*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body,h1,h2,h3,h4,p,ul,ol,figure{margin:0}ul,ol{padding:0;list-style:none}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}body{min-height:100vh}table{border-collapse:collapse} .skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:10px;z-index:9999}.skip-link:focus{left:10px;top:10px}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#E8DAD4;--bg-soft:#F2EAE6;--bg-light:#FCF8F6;--camel:#AE8978;--camel-dark:#936D5E;--camel-soft:#D1B8AE;--text:#382F2B;--muted:#71635D;--border:#D7C5BD;--white:#fff;--danger:#B76363;--success:#6F8F72;--shadow:0 14px 40px rgba(56,47,43,.08);--serif:'Cormorant Garamond',serif;--sans:'Inter',system-ui,-apple-system,sans-serif;--container:1200px;--header-h:62px;--radius:2px;--tr:.18s ease;color-scheme:light}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5}body.no-scroll{overflow:hidden}.app-shell{min-height:100vh;display:flex;flex-direction:column}.main{flex:1}.container{width:min(var(--container),calc(100% - 32px));margin-inline:auto}.section{padding:54px 0}.section-sm{padding:32px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-title,h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08}.section-title{font-size:clamp(30px,4vw,48px)}.page-title{font-size:clamp(34px,5vw,58px);margin-bottom:10px}.muted{color:var(--muted)}.grid{display:grid;gap:22px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}.page-hero{padding:42px 0 22px}.breadcrumbs{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:18px}.breadcrumbs a:hover{color:var(--text)}.breadcrumbs span:not(:last-child)::after{content:'/';margin-left:8px;color:var(--border)}.notice{background:var(--bg-light);border:1px solid var(--border);padding:16px 18px}.hidden{display:none!important}
/* --- KAMIEL layout correction 21.06 --- */
:root{--container:1120px}.section-title{font-size:clamp(38px,4vw,54px)}
/* =========================
KAMIEL COMPONENTS CSS
full clean replacement
header / search / cards / footer / wishlist / cart drawer
========================= */
/* ---------- Buttons ---------- */
.btn {
min-height: 42px;
padding: 10px 18px;
border: 1px solid var(--camel);
border-radius: 7px;
background: transparent;
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: var(--tr);
letter-spacing: .01em;
text-decoration: none;
cursor: pointer;
}
.btn:hover {
background: var(--camel);
color: #fff;
}
.btn-primary {
background: var(--camel);
color: #fff;
}
.btn-primary:hover {
background: var(--camel-dark);
border-color: var(--camel-dark);
}
.btn-ghost {
border-color: transparent;
}
.btn-danger {
background: var(--danger);
border-color: var(--danger);
color: #fff;
}
.btn-full {
width: 100%;
}
/* ---------- Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 80;
background: rgba(43, 33, 26, .94);
backdrop-filter: blur(14px);
color: #fff;
border-bottom: 1px solid rgba(210, 184, 145, .22);
box-shadow: 0 8px 30px rgba(25, 18, 14, .12);
}
.header-inner {
height: 92px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 18px;
width: min(1220px, calc(100% - 64px));
margin: auto;
}
.header-nav {
display: flex;
align-items: center;
gap: 34px;
font-size: 11px;
font-weight: 600;
letter-spacing: .11em;
text-transform: uppercase;
}
.header-nav a,
.header-nav button,
.catalog-trigger {
position: relative;
display: inline-flex;
align-items: center;
height: 34px;
padding: 0;
border: 0;
background: transparent;
color: #fff;
text-decoration: none;
font: inherit;
cursor: pointer;
opacity: .96;
transition: opacity .18s ease, transform .18s ease;
}
.header-nav a::after,
.header-nav button::after,
.catalog-trigger::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 2px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: center;
transition: transform .2s ease;
}
.header-nav a:hover,
.header-nav button:hover,
.catalog-trigger:hover {
opacity: .72;
transform: translateY(-1px);
}
.header-nav a:hover::after,
.header-nav button:hover::after,
.catalog-trigger:hover::after {
transform: scaleX(1);
}
.logo {
min-width: 128px;
height: 82px;
display: grid;
grid-template-rows: 40px 22px 10px;
justify-items: center;
align-content: center;
color: #f4eadc;
text-decoration: none;
transform: none;
}
.logo-mark {
width: 42px;
height: 42px;
object-fit: contain;
}
.logo-word {
font-family: var(--serif);
font-size: 21px;
line-height: 1;
letter-spacing: .34em;
font-weight: 500;
transform: translateX(.17em);
}
.logo small {
color: #c6a66f;
font-size: 7px;
line-height: 1;
letter-spacing: .32em;
transform: translateX(.16em);
}
.header-actions {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 14px;
}
.icon-btn,
.header-icon-btn {
width: 35px;
height: 35px;
min-width: 35px;
min-height: 35px;
border: 0;
background: transparent;
color: #fff;
display: inline-grid;
place-items: center;
position: relative;
cursor: pointer;
opacity: .96;
transition: opacity .18s ease, transform .18s ease;
}
.icon-btn:hover,
.header-icon-btn:hover {
opacity: .7;
transform: translateY(-1px);
color: #fff;
}
.header-icon {
width: 25px;
height: 25px;
display: block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.header-icon-search {
background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='9' stroke='white' stroke-width='2.4'/%3E%3Cpath d='M22 22L30 30' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.header-icon-heart {
background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 28.5C17.5 28.5 6.5 21.8 6.5 13.8C6.5 9.9 9.2 7.4 12.6 7.4C14.8 7.4 16.4 8.6 17.5 10.2C18.6 8.6 20.2 7.4 22.4 7.4C25.8 7.4 28.5 9.9 28.5 13.8C28.5 21.8 17.5 28.5 17.5 28.5Z' stroke='white' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.header-icon-bag {
background-image: url("data:image/svg+xml,%3Csvg width='35' height='35' viewBox='0 0 35 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 13H25.5L27 29H8L9.5 13Z' stroke='white' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M13.2 13C13.2 8.8 15 6.5 17.5 6.5C20 6.5 21.8 8.8 21.8 13' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.counter {
position: absolute;
right: -2px;
top: -3px;
background: #a98761;
color: #fff;
border-radius: 50%;
font-size: 10px;
min-width: 17px;
height: 17px;
display: grid;
place-items: center;
line-height: 1;
}
.header-svg {
display: none !important;
}
.burger {
display: none;
}
/* ---------- Mega catalog ---------- */
.mega-wrap {
position: fixed;
z-index: 90;
left: 50%;
top: 66px;
transform: translateX(-50%);
width: min(980px, calc(100vw - 120px));
background: var(--bg-light);
border: 1px solid var(--border);
box-shadow: 0 18px 55px rgba(63, 48, 41, .14);
display: none;
color: var(--text);
overflow: hidden;
}
.mega-wrap.is-open {
display: block;
animation: megaFade .16s ease;
}
.mega-body {
display: flex;
align-items: stretch;
min-height: 330px;
max-height: 430px;
overflow: hidden;
}
.mega-col {
width: 245px;
min-width: 245px;
max-width: 245px;
border-right: 1px solid var(--border);
padding: 14px 0;
max-height: 430px;
overflow-y: auto;
background: var(--bg-light);
}
.mega-col:last-child {
border-right: 0;
}
.mega-item {
width: 100%;
min-height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 18px;
border: 0;
background: transparent;
color: var(--text);
text-align: left;
text-decoration: none;
font-family: var(--serif);
font-size: 17px;
line-height: 1.2;
cursor: pointer;
transition: background .16s ease, color .16s ease;
}
.mega-item:hover,
.mega-item.active {
background: var(--camel);
color: #fff;
}
.mega-arrow {
font-family: var(--serif);
font-size: 24px;
line-height: 1;
opacity: .9;
}
.mega-close {
position: absolute;
right: 12px;
top: 8px;
z-index: 3;
width: 28px;
height: 28px;
border: 0;
background: transparent;
color: var(--muted);
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.mega-close:hover {
color: var(--text);
}
.mega-preview,
[data-mega-preview] {
display: none !important;
}
/* ---------- Header search ---------- */
.header-search-overlay {
position: fixed;
left: 50%;
top: 66px;
z-index: 95;
width: min(760px, calc(100vw - 180px));
max-height: calc(100vh - 110px);
transform: translateX(-50%);
display: none;
background: rgba(255, 247, 241, .96);
border: 1px solid rgba(216, 191, 175, .72);
box-shadow: 0 18px 48px rgba(63, 48, 41, .12);
color: var(--text);
overflow: hidden;
}
.header-search-overlay.is-open {
display: block;
animation: searchDrop .16s ease;
}
.header-search-panel {
position: relative;
width: 100%;
max-height: calc(100vh - 110px);
overflow: auto;
background: transparent;
padding: 22px 30px 30px;
}
.header-search-label {
display: none;
}
.header-search-input {
width: calc(100% - 54px);
height: 42px;
border: 1px solid rgba(216, 191, 175, .72);
border-radius: 8px;
background: rgba(234, 216, 203, .48);
color: var(--text);
padding: 0 16px;
font-family: var(--serif);
font-size: 20px;
outline: none;
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.header-search-input:focus {
background: rgba(255, 250, 247, .94);
border-color: var(--camel);
box-shadow: 0 0 0 3px rgba(184, 150, 130, .11);
}
.header-search-input::placeholder {
color: rgba(63, 48, 41, .45);
}
.header-search-input::-webkit-search-cancel-button,
.header-search-input::-webkit-search-decoration {
appearance: none;
-webkit-appearance: none;
display: none;
}
.header-search-close {
position: absolute;
right: 10px;
top: 22px;
z-index: 5;
width: 42px;
height: 42px;
border: 0;
background: transparent;
color: rgba(63, 48, 41, .62);
font-size: 24px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: .85;
transition: opacity .18s ease, color .18s ease;
}
.header-search-close:hover {
opacity: 1;
color: var(--text);
}
.header-search-subtitle {
font-family: var(--serif);
font-size: 24px;
font-weight: 400;
line-height: 1;
margin: 24px 0 18px;
color: var(--text);
}
.header-search-results {
min-height: 120px;
}
.search-products-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.search-product-card {
background: rgba(255, 250, 247, .78);
border: 1px solid rgba(216, 191, 175, .58);
overflow: hidden;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.search-product-card:hover {
border-color: var(--camel);
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(63, 48, 41, .08);
}
.search-product-img {
display: block;
height: 128px;
background: rgba(255, 255, 255, .68);
overflow: hidden;
}
.search-product-img img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
transition: transform .18s ease;
}
.search-product-card:hover .search-product-img img {
transform: scale(1.035);
}
.search-product-body {
padding: 11px 13px 13px;
}
.search-product-code {
min-height: 15px;
margin-bottom: 5px;
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
.search-product-title {
display: block;
min-height: 38px;
font-family: var(--serif);
font-size: 16px;
line-height: 1.18;
color: var(--text);
text-decoration: none;
}
.search-product-title:hover {
color: var(--camel-dark);
}
.search-product-price {
margin: 8px 0 10px;
font-size: 15px;
font-weight: 600;
}
.search-product-actions {
display: grid;
grid-template-columns: 1fr 36px;
gap: 8px;
}
.search-buy-btn,
.search-wish-btn {
height: 36px;
border: 0;
border-radius: 7px;
background: var(--camel);
color: #fff;
cursor: pointer;
transition: background .18s ease, transform .18s ease;
}
.search-buy-btn:hover,
.search-wish-btn:hover {
background: var(--camel-dark);
transform: translateY(-1px);
}
.search-wish-btn {
background: rgba(234, 216, 203, .9);
color: var(--text);
font-size: 18px;
}
.search-wish-btn.active {
background: var(--camel);
color: #fff;
}
.search-empty {
min-height: 160px;
display: grid;
place-items: center;
align-content: center;
text-align: center;
gap: 10px;
border: 1px solid rgba(216, 191, 175, .56);
background: rgba(255, 250, 247, .62);
}
.search-empty h3 {
font-family: var(--serif);
font-size: 27px;
font-weight: 400;
margin: 0;
}
.search-empty p {
max-width: 360px;
margin: 0;
color: var(--muted);
}
/* ---------- Old overlays / drawer / modal ---------- */
.search-overlay,
.drawer-overlay,
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(63, 48, 41, .34);
z-index: 100;
display: none;
}
.search-overlay.is-open,
.drawer-overlay.is-open,
.modal-overlay.is-open {
display: block;
}
.drawer {
position: fixed;
z-index: 110;
right: 0;
top: 0;
height: 100vh;
width: min(430px, 100vw);
background: var(--bg-light);
transform: translateX(100%);
transition: .24s ease;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
}
.drawer.is-open {
transform: none;
}
.drawer-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px;
border-bottom: 1px solid var(--border);
}
.drawer-body {
padding: 18px;
overflow: auto;
}
.mobile-menu {
display: grid;
gap: 10px;
}
.mobile-menu a,
.mobile-menu button {
padding: 13px;
border: 1px solid var(--border);
background: #fff;
text-align: left;
}
.menu-drawer {
left: 0;
right: auto;
transform: translateX(-100%);
width: min(360px, 88vw);
}
.menu-drawer.is-open {
transform: translateX(0);
}
.menu-drawer .drawer-head strong {
font-family: var(--serif);
font-size: 28px;
font-weight: 500;
letter-spacing: .16em;
}
.menu-close {
width: 40px;
height: 40px;
border: 0;
background: transparent;
color: var(--text);
font-size: 30px;
line-height: 1;
}
.mobile-menu a {
min-height: 50px;
display: flex;
align-items: center;
background: var(--bg-light);
font-size: 16px;
}
.mobile-menu a:active,
.mobile-menu a:hover {
background: var(--bg-soft);
border-color: var(--camel);
}
/* ---------- Product cards ---------- */
.product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.product-card {
background: #fdf8f3;
border: 1px solid rgba(216, 191, 175, .75);
transition: var(--tr);
position: relative;
min-width: 0;
overflow: visible;
}
.product-card:hover {
border-color: var(--camel);
transform: translateY(-2px);
}
.product-link {
color: inherit;
text-decoration: none;
}
.product-media {
aspect-ratio: 1 / 1;
background: #fffaf7;
display: grid;
place-items: center;
overflow: hidden;
}
.product-media img {
width: 100%;
height: 100%;
object-fit: contain;
transition: var(--tr);
}
.product-card:hover img {
transform: scale(1.04);
}
.product-info {
padding: 12px;
}
.brand {
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
}
.product-title {
font-family: var(--serif);
font-size: 17px;
line-height: 1.1;
margin: 5px 0;
min-height: 38px;
}
.product-path {
font-size: 10.5px;
color: var(--muted);
min-height: 32px;
}
.price-row {
display: flex;
align-items: center;
gap: 8px;
margin: 8px 0;
}
.price {
font-weight: 600;
}
.old-price {
text-decoration: line-through;
color: var(--muted);
font-size: 13px;
}
.badge {
display: inline-flex;
font-size: 11px;
padding: 3px 7px;
background: var(--camel);
color: #fff;
}
.card-actions {
display: flex;
gap: 8px;
}
.product-card .wishlist-btn {
position: absolute;
top: 14px;
right: 14px;
z-index: 30;
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
border: 0;
border-radius: 8px;
background: rgba(255, 247, 241, .72);
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 18px;
line-height: 1;
opacity: 1;
visibility: visible;
transform: none;
cursor: pointer;
transition: background .18s ease, color .18s ease, transform .18s ease, opacity .18s ease;
}
.product-card .wishlist-btn:hover {
background: rgba(184, 150, 130, .9);
color: #fff;
transform: translateY(-1px);
}
.product-card .wishlist-btn.active,
.product-card .wishlist-btn.is-active {
background: var(--camel);
color: #fff;
}
.product-card .wishlist-btn::before,
.product-card .wishlist-btn::after {
content: none !important;
display: none !important;
}
/* ---------- Wishlist drawer ---------- */
.drawer-open,
body.drawer-open {
overflow: hidden;
}
.wishlist-drawer-overlay {
position: fixed;
inset: 0;
z-index: 890;
background: rgba(43, 32, 27, .34);
opacity: 0;
visibility: hidden;
transition: opacity .22s ease, visibility .22s ease;
}
.wishlist-drawer-overlay.is-open {
opacity: 1;
visibility: visible;
}
.wishlist-drawer {
position: fixed;
top: 0;
right: 0;
z-index: 900;
width: min(760px, 72vw);
height: 100vh;
background: var(--bg);
border-left: 1px solid rgba(216, 191, 175, .9);
box-shadow: -20px 0 60px rgba(63, 48, 41, .14);
transform: translateX(100%);
transition: transform .28s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
.wishlist-drawer.is-open {
transform: translateX(0);
}
.wishlist-drawer-head {
flex: 0 0 auto;
min-height: 118px;
padding: 30px 42px 24px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 24px;
border-bottom: 1px solid rgba(216, 191, 175, .82);
}
.wishlist-drawer-head span {
display: block;
margin-bottom: 8px;
color: var(--camel-dark);
font-size: 12px;
letter-spacing: .24em;
text-transform: uppercase;
}
.wishlist-drawer-head h2 {
margin: 0;
font-family: var(--serif);
font-size: 46px;
line-height: .95;
font-weight: 400;
color: var(--text);
}
.wishlist-drawer-head button {
width: 40px;
height: 40px;
border: 0;
background: transparent;
color: var(--text);
font-size: 38px;
line-height: 1;
font-weight: 300;
cursor: pointer;
}
.wishlist-drawer-body {
flex: 1 1 auto;
padding: 32px 42px;
overflow-y: auto;
overflow-x: hidden;
}
.wishlist-drawer-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.wishlist-drawer .product-card {
background: rgba(255, 247, 241, .72);
border: 1px solid rgba(216, 191, 175, .82);
overflow: hidden;
}
.wishlist-drawer .product-media {
padding: 0;
margin: 0;
border: 0;
aspect-ratio: 1 / 1.02;
background: #f6ebe4;
display: block;
overflow: hidden;
}
.wishlist-drawer .product-media img {
width: 100%;
height: 100%;
display: block;
margin: 0;
padding: 0;
object-fit: cover;
object-position: center;
}
.wishlist-drawer-empty {
min-height: 430px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.wishlist-drawer-empty span {
margin-bottom: 14px;
color: var(--camel-dark);
font-size: 12px;
letter-spacing: .22em;
text-transform: uppercase;
}
.wishlist-drawer-empty h3 {
margin: 0 0 12px;
font-family: var(--serif);
font-size: 36px;
line-height: 1;
font-weight: 400;
}
.wishlist-drawer-empty p {
max-width: 360px;
margin: 0 0 24px;
color: var(--muted);
line-height: 1.5;
}
/* ---------- Cart drawer ---------- */
.cart-drawer-overlay {
position: fixed;
inset: 0;
z-index: 998;
background: rgba(63, 48, 41, .45);
opacity: 0;
visibility: hidden;
transition: opacity .24s ease, visibility .24s ease;
}
.cart-drawer-overlay.is-open {
opacity: 1;
visibility: visible;
}
.cart-drawer-side {
position: fixed;
top: 0;
right: 0;
z-index: 999;
width: min(680px, 46vw);
height: 100vh;
background: #fbf1ec;
border-left: 1px solid rgba(216, 191, 175, .85);
box-shadow: -18px 0 42px rgba(63, 48, 41, .10);
transform: translateX(100%);
transition: transform .28s ease;
display: flex;
flex-direction: column;
overflow: hidden;
}
.cart-drawer-side.is-open {
transform: translateX(0);
}
.cart-drawer-head {
flex: 0 0 auto;
min-height: 96px;
padding: 24px 40px 18px;
display: flex;
justify-content: space-between;
align-items: flex-start;
background: rgba(255, 247, 241, .72);
border-bottom: 1px solid rgba(216, 191, 175, .75);
}
.cart-drawer-head span {
display: block;
margin-bottom: 5px;
color: var(--camel-dark);
font-size: 11px;
line-height: 1;
letter-spacing: .24em;
text-transform: uppercase;
}
.cart-drawer-head h2 {
margin: 0;
font-family: var(--serif);
font-size: 38px;
line-height: .95;
font-weight: 400;
color: var(--text);
}
.cart-drawer-head button {
width: 34px;
height: 34px;
border: 0;
background: transparent;
color: var(--text);
font-size: 34px;
line-height: 1;
cursor: pointer;
}
.cart-drawer-body {
flex: 1 1 auto;
min-height: 0;
padding: 26px 40px;
overflow-y: auto;
overflow-x: hidden;
}
.cart-drawer-body::-webkit-scrollbar {
width: 4px;
}
.cart-drawer-body::-webkit-scrollbar-thumb {
background: rgba(184, 150, 130, .52);
}
.cart-drawer-list {
display: grid;
gap: 14px;
}
.cart-drawer-item {
position: relative;
min-height: 112px;
padding: 14px 46px 14px 14px;
display: grid;
grid-template-columns: 86px minmax(0, 1fr);
gap: 16px;
background: rgba(255, 250, 247, .82);
border: 1px solid rgba(216, 191, 175, .82);
box-shadow: none;
}
.cart-drawer-img {
width: 86px;
height: 86px;
display: block;
overflow: hidden;
background: #d8b7a8;
}
.cart-drawer-img img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
.cart-drawer-info {
min-width: 0;
padding: 0;
display: grid;
align-content: start;
}
.cart-drawer-brand {
margin: 0 0 6px;
color: var(--muted);
font-size: 10px;
line-height: 1;
letter-spacing: .18em;
text-transform: uppercase;
}
.cart-drawer-title {
display: block;
margin: 0 0 8px;
color: var(--text);
text-decoration: none;
font-family: var(--serif);
font-size: 18px;
line-height: 1.12;
font-weight: 400;
}
.cart-drawer-title:hover {
color: var(--camel-dark);
}
.cart-drawer-category,
.cart-drawer-option {
display: none;
}
.cart-drawer-bottom {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 18px;
margin: 2px 0 0;
padding: 0;
}
.cart-drawer-qty {
width: 96px;
height: 30px;
display: grid;
grid-template-columns: 30px 36px 30px;
border: 1px solid rgba(216, 191, 175, .9);
background: rgba(255, 247, 241, .64);
}
.cart-drawer-qty button,
.cart-drawer-qty span {
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-right: 1px solid rgba(216, 191, 175, .9);
background: transparent;
color: var(--text);
font-size: 14px;
line-height: 1;
font-weight: 500;
}
.cart-drawer-qty button:last-child {
border-right: 0;
}
.cart-drawer-qty button {
cursor: pointer;
}
.cart-drawer-qty button:hover {
background: rgba(184, 150, 130, .14);
}
.cart-drawer-bottom strong {
color: var(--text);
font-size: 17px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
}
.cart-drawer-remove {
position: absolute;
top: 14px;
right: 14px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: 0;
line-height: 1;
}
.cart-drawer-remove::before {
content: "🗑";
font-size: 14px;
line-height: 1;
}
.cart-drawer-remove:hover {
color: var(--text);
}
.cart-drawer-footer {
flex: 0 0 auto;
min-height: 136px;
padding: 22px 40px 26px;
background: rgba(255, 247, 241, .72);
border-top: 1px solid rgba(216, 191, 175, .75);
}
.cart-drawer-summary {
width: 100%;
max-width: 300px;
margin: 0;
}
.cart-drawer-total {
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 20px;
margin: 0 0 16px;
}
.cart-drawer-total span {
font-family: var(--serif);
font-size: 26px;
line-height: 1;
font-weight: 400;
color: var(--text);
}
.cart-drawer-total strong {
color: var(--text);
font-size: 20px;
line-height: 1;
font-weight: 700;
white-space: nowrap;
}
.cart-drawer-summary .btn,
.cart-drawer-footer .btn {
width: 238px;
height: 46px;
border-radius: 7px;
font-size: 15px;
font-weight: 500;
}
.cart-drawer-empty {
min-height: 320px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
}
.cart-drawer-empty span {
margin-bottom: 10px;
color: var(--camel-dark);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
}
.cart-drawer-empty h3 {
margin: 0 0 12px;
font-family: var(--serif);
font-size: 32px;
font-weight: 400;
color: var(--text);
}
.cart-drawer-empty p {
max-width: 320px;
margin: 0 0 22px;
color: var(--muted);
line-height: 1.45;
}
/* ---------- Footer ---------- */
.site-footer {
background: var(--bg);
border-top: 1px solid var(--border);
padding: 44px 0 34px;
margin-top: 60px;
}
.footer-grid {
width: min(1040px, calc(100% - 80px));
margin: 0 auto;
display: grid;
grid-template-columns: 1.35fr 1fr 1fr 1fr;
gap: 36px;
align-items: start;
}
.footer-brand p {
margin: 6px 0;
color: var(--muted);
}
.footer-logo {
display: inline-block;
font-family: var(--serif);
letter-spacing: .33em;
font-size: 30px;
color: var(--text);
text-decoration: none;
margin-bottom: 12px;
}
.footer-col {
border-left: 1px solid var(--border);
padding-left: 24px;
}
.footer-col h3 {
font-family: var(--serif);
font-size: 22px;
font-weight: 400;
margin: 0 0 12px;
color: var(--text);
}
.footer-col a {
display: block;
margin: 7px 0;
color: var(--muted);
text-decoration: none;
}
.footer-col a:hover {
color: var(--text);
}
.footer-col p {
margin: 7px 0;
color: var(--muted);
}
.footer-dev-link {
color: var(--text);
text-decoration: none;
border-bottom: 1px solid currentColor;
transition: opacity .18s ease;
}
.footer-dev-link:hover {
opacity: .65;
}
.footer-socials {
display: flex;
align-items: center;
gap: 12px;
margin-top: 14px;
}
.footer-social-link {
width: 24px;
height: 24px;
display: inline-flex !important;
align-items: center;
justify-content: center;
margin: 0 !important;
text-decoration: none;
color: var(--text);
opacity: .9;
transition: opacity .18s ease, transform .18s ease;
}
.footer-social-link:hover {
opacity: .6;
transform: translateY(-1px);
}
.footer-social-link img {
width: 24px;
height: 24px;
display: block;
object-fit: contain;
}
/* ---------- Toast / modal / form ---------- */
.toast-root {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 200;
display: grid;
gap: 10px;
}
.toast {
background: var(--text);
color: #fff;
padding: 12px 16px;
box-shadow: var(--shadow);
}
.modal {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: var(--bg-light);
border: 1px solid var(--border);
z-index: 130;
width: min(460px, calc(100vw - 30px));
padding: 24px;
display: none;
}
.modal.is-open {
display: block;
}
.form-field {
display: grid;
gap: 6px;
margin-bottom: 14px;
}
.form-field label {
font-size: 13px;
color: var(--muted);
}
.input,
select,
textarea {
width: 100%;
border: 1px solid var(--border);
background: #fff;
padding: 12px;
color: var(--text);
}
textarea {
min-height: 100px;
resize: vertical;
}
.error {
color: var(--danger);
font-size: 12px;
}
.qty {
display: inline-flex;
border: 1px solid var(--border);
}
.qty button,
.qty span {
width: 38px;
height: 36px;
border: 0;
background: #fff;
display: grid;
place-items: center;
}
.qty span {
border-inline: 1px solid var(--border);
}
/* ---------- Animations ---------- */
@keyframes megaFade {
from {
opacity: 0;
transform: translateX(-50%) translateY(6px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@keyframes searchDrop {
from {
opacity: 0;
transform: translateX(-50%) translateY(6px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
.cart-drawer-side {
width: min(680px, 58vw);
}
}
@media (max-width: 900px) {
.header-inner {
width: min(100% - 28px, 1220px);
grid-template-columns: 1fr auto 1fr;
}
.logo {
height: 66px;
min-width: 100px;
grid-template-rows: 30px 18px;
}
.logo-mark {
width: 31px;
height: 31px;
}
.logo-word {
font-size: 16px;
letter-spacing: .28em;
}
.logo small {
display: none;
}
.header-nav {
display: none;
}
.burger {
display: inline-grid;
gap: 4px;
width: 35px;
height: 35px;
place-items: center;
border: 0;
background: transparent;
}
.burger span {
width: 20px;
height: 1px;
background: #fff;
display: block;
}
.mega-wrap {
width: calc(100vw - 28px);
top: 66px;
}
.mega-body {
overflow-x: auto;
}
.mega-col {
width: 230px;
min-width: 230px;
max-width: 230px;
}
.header-search-overlay {
width: calc(100vw - 44px);
}
.search-products-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wishlist-drawer {
width: min(86vw, 620px);
}
.footer-grid {
width: min(100% - 36px, 1040px);
grid-template-columns: 1fr 1fr;
gap: 28px;
}
}
@media (max-width: 820px) {
.cart-drawer-side,
.wishlist-drawer {
width: 100vw;
}
.cart-drawer-head {
min-height: 86px;
padding: 22px 22px 16px;
}
.cart-drawer-head h2 {
font-size: 34px;
}
.cart-drawer-body {
padding: 20px 22px;
}
.cart-drawer-footer {
min-height: 136px;
padding: 20px 22px 24px;
}
.cart-drawer-item {
grid-template-columns: 76px minmax(0, 1fr);
gap: 13px;
padding: 13px 40px 13px 13px;
}
.cart-drawer-img {
width: 76px;
height: 76px;
}
.cart-drawer-title {
font-size: 17px;
}
.cart-drawer-bottom {
gap: 12px;
}
.cart-drawer-summary {
max-width: none;
}
.cart-drawer-summary .btn,
.cart-drawer-footer .btn {
width: 100%;
}
.wishlist-drawer-head {
padding: 24px 22px 20px;
}
.wishlist-drawer-head h2 {
font-size: 34px;
}
.wishlist-drawer-body {
padding: 22px;
}
.wishlist-drawer-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.logo {
min-width: 88px;
}
.header-actions {
gap: 6px;
}
.mega-wrap {
left: 14px;
right: 14px;
transform: none;
width: auto;
}
.mega-col {
width: 210px;
min-width: 210px;
max-width: 210px;
}
.mega-item {
font-size: 15px;
}
.header-search-overlay {
left: 14px;
right: 14px;
width: auto;
transform: none;
}
.header-search-overlay.is-open {
animation: none;
}
.header-search-panel {
padding: 18px 16px 22px;
}
.header-search-input {
width: calc(100% - 46px);
height: 42px;
font-size: 17px;
}
.header-search-subtitle {
font-size: 22px;
}
.search-products-grid {
grid-template-columns: 1fr;
}
.search-product-img {
height: 170px;
}
.product-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-col {
border-left: 0;
padding-left: 0;
border-top: 1px solid var(--border);
padding-top: 18px;
}
}
/* цена внутри карточки корзины */
.cart-drawer-item .cart-drawer-bottom strong,
.cart-drawer-item .cart-drawer-meta strong,
.cart-drawer-item .cart-drawer-price,
.cart-drawer-item strong {
color: #2f241f !important;
background: transparent !important;
text-shadow: none !important;
}
.api-offline-banner {
padding: 14px 24px;
background: #fff4e8;
color: #5f3f32;
border-bottom: 1px solid rgba(95, 63, 50, 0.18);
font-size: 14px;
text-align: center;
}
.api-offline-banner b {
font-weight: 700;
}
.api-online-banner,
.api-offline-banner {
padding: 10px 18px;
font-size: 14px;
text-align: center;
line-height: 1.45;
}
.api-online-banner {
background: #eef7ef;
color: #2f5e35;
}
.api-offline-banner {
background: #fff3e7;
color: #8a4b22;
}
/* =========================================================
FIX: drawers must not create horizontal scroll
cart / wishlist visible only after click
========================================================= */
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
body.drawer-open {
overflow: hidden;
}
/* overlays не должны ловить клики, пока закрыты */
.wishlist-drawer-overlay,
.cart-drawer-overlay {
position: fixed;
inset: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.wishlist-drawer-overlay.is-open,
.cart-drawer-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* wishlist drawer */
.wishlist-drawer {
position: fixed !important;
top: 0;
right: 0;
left: auto !important;
height: 100dvh;
max-height: 100dvh;
transform: translate3d(100%, 0, 0) !important;
visibility: hidden;
pointer-events: none;
will-change: transform;
}
.wishlist-drawer.is-open {
transform: translate3d(0, 0, 0) !important;
visibility: visible;
pointer-events: auto;
}
/* cart drawer */
.cart-drawer-side {
position: fixed !important;
top: 0;
right: 0;
left: auto !important;
height: 100dvh;
max-height: 100dvh;
transform: translate3d(100%, 0, 0) !important;
visibility: hidden;
pointer-events: none;
will-change: transform;
}
.cart-drawer-side.is-open {
transform: translate3d(0, 0, 0) !important;
visibility: visible;
pointer-events: auto;
}
/* чтобы body/header не расширялись из-за fixed элементов */
.site-header,
.app-shell,
.main {
max-width: 100%;
overflow-x: clip;
}
/* мобильный размер drawer */
@media (max-width: 760px) {
.wishlist-drawer,
.cart-drawer-side {
width: 100vw !important;
}
}
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1000;
background: rgba(43, 33, 26, .94);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: #fff;
border-bottom: 1px solid rgba(210, 184, 145, .22);
box-shadow: 0 8px 30px rgba(25, 18, 14, .12);
}
/* =========================================================
FINAL FIX: fixed header must not cover page content
========================================================= */
:root {
--header-height: 92px;
}
html {
scroll-padding-top: var(--header-height);
}
body {
padding-top: var(--header-height) !important;
}
/* header остается fixed */
.site-header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
height: var(--header-height) !important;
z-index: 1000 !important;
}
/* чтобы dropdown catalog/search начинались ниже header */
.mega-wrap,
.header-search-overlay {
top: var(--header-height) !important;
}
/* если где-то есть sticky-блоки справа/слева */
.summary,
.checkout-summary,
.offer-side,
.returns-note,
.privacy-note {
top: calc(var(--header-height) + 22px) !important;
}
@media (max-width: 900px) {
:root {
--header-height: 72px;
}
body {
padding-top: var(--header-height) !important;
}
.mega-wrap,
.header-search-overlay {
top: var(--header-height) !important;
}
}
/* =========================================================
CART DRAWER FIX — option color + trash icon
========================================================= */
.cart-drawer-side {
overflow-x: hidden !important;
}
.cart-drawer-body {
overflow-x: hidden !important;
}
.cart-drawer-item {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: 120px minmax(0, 1fr) 34px !important;
gap: 22px !important;
align-items: start !important;
}
.cart-drawer-info {
min-width: 0 !important;
}
.cart-drawer-title {
color: var(--text) !important;
word-break: break-word !important;
}
.cart-drawer-option-line {
color: var(--muted) !important;
font-size: 15px !important;
line-height: 1.3 !important;
margin: 8px 0 10px !important;
opacity: 1 !important;
}
.cart-drawer-remove {
width: 28px !important;
height: 28px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
opacity: .75 !important;
transition: opacity .18s ease, transform .18s ease !important;
}
.cart-drawer-remove:hover {
opacity: 1 !important;
transform: translateY(-1px) !important;
}
.cart-drawer-remove img {
width: 22px !important;
height: 22px !important;
display: block !important;
object-fit: contain !important;
pointer-events: none !important;
}
.cart-drawer-img {
width: 120px !important;
height: 120px !important;
background: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
}
.cart-drawer-img img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
padding: 12px !important;
background: #fff !important;
}
/* =========================================================
CART DRAWER REMOVE ICON — ONLY ONE SVG
========================================================= */
.cart-drawer-remove {
width: 34px !important;
height: 34px !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
background: transparent !important;
background-image: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
line-height: 0 !important;
cursor: pointer !important;
opacity: .72 !important;
transition: opacity .18s ease, transform .18s ease !important;
}
.cart-drawer-remove::before,
.cart-drawer-remove::after {
display: none !important;
content: none !important;
background: none !important;
background-image: none !important;
}
.cart-drawer-remove:hover {
opacity: 1 !important;
transform: translateY(-1px) !important;
}
.cart-drawer-remove img {
width: 24px !important;
height: 24px !important;
display: block !important;
object-fit: contain !important;
pointer-events: none !important;
}
/* =========================================================
WISHLIST EMPTY TEXT COLOR FIX
========================================================= */
.wishlist-drawer-empty h3 {
color: var(--text) !important;
}
.wishlist-drawer-empty p {
color: var(--muted) !important;
}
.wishlist-drawer-empty span {
color: var(--camel-dark) !important;
}
/* =========================
FOOTER LEGAL DETAILS
========================= */
.footer-revision,
.footer-technical-note {
font-size: 12px;
line-height: 1.55;
opacity: .78;
}
.footer-technical-note .footer-dev-link {
display: inline;
}
.service-alert {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 12px 20px;
color: #4a2f28;
background: #fff2e8;
border-bottom: 1px solid #e8cdbf;
text-align: center;
}
.service-alert .btn {
flex: 0 0 auto;
}
@media (max-width: 640px) {
.service-alert {
align-items: stretch;
flex-direction: column;
}
}
/* =========================================================
KAMIEL 2026: translucent editorial header
========================================================= */
/* Inner pages keep enough contrast while remaining airy. */
.site-header {
background: rgba(42, 33, 27, .66) !important;
-webkit-backdrop-filter: blur(12px) saturate(110%) !important;
backdrop-filter: blur(12px) saturate(110%) !important;
border-bottom-color: rgba(238, 222, 199, .18) !important;
box-shadow: 0 8px 28px rgba(24, 18, 14, .08) !important;
transition: background-color .25s ease, box-shadow .25s ease;
}
/* On the home hero the photograph continues beneath the header. */
body:has(.home-hero) {
padding-top: 0 !important;
}
body:has(.home-hero) .site-header {
background: linear-gradient(
180deg,
rgba(28, 21, 17, .34) 0%,
rgba(28, 21, 17, .14) 72%,
rgba(28, 21, 17, .04) 100%
) !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-bottom-color: rgba(244, 229, 204, .17) !important;
box-shadow: none !important;
}
@media (max-width: 900px) {
body:has(.home-hero) .site-header {
background: linear-gradient(
180deg,
rgba(28, 21, 17, .42) 0%,
rgba(28, 21, 17, .12) 100%
) !important;
}
}
/* =========================================================
KAMIEL 2026: branded inner-page header and catalog fallback
========================================================= */
body:not([data-route="home"]) .site-header {
background:
linear-gradient(90deg, rgba(30, 22, 18, .88), rgba(45, 33, 27, .68), rgba(30, 22, 18, .88)),
url('../assets/images/kamiel-hero-brand-2026.jpg') center 42% / cover no-repeat !important;
-webkit-backdrop-filter: blur(4px) saturate(112%) !important;
backdrop-filter: blur(4px) saturate(112%) !important;
border-bottom: 1px solid rgba(215, 180, 125, .42) !important;
box-shadow: 0 12px 34px rgba(28, 20, 16, .16) !important;
}
body:not([data-route="home"]) .site-header::after {
content: "";
position: absolute;
left: 50%;
bottom: -1px;
width: min(420px, 54vw);
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(224, 192, 141, .84), transparent);
pointer-events: none;
}
.mega-wrap {
background: rgba(249, 245, 241, .97);
border-color: rgba(165, 133, 112, .22);
box-shadow: 0 24px 70px rgba(38, 27, 22, .20);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
}
.mega-empty {
width: 100%;
min-height: 230px;
padding: 44px clamp(28px, 6vw, 72px);
display: flex;
flex-direction: column;
justify-content: center;
background:
linear-gradient(90deg, rgba(250, 247, 244, .98) 0%, rgba(250, 247, 244, .92) 58%, rgba(250, 247, 244, .72) 100%),
url('../assets/images/kamiel-hero-brand-2026.jpg') right center / cover no-repeat;
}
.mega-body:has(.mega-empty) {
min-height: 0;
max-height: none;
}
.mega-empty-kicker {
margin-bottom: 10px;
color: #a47f68;
font-size: 10px;
font-weight: 700;
letter-spacing: .24em;
}
.mega-empty strong {
font-family: var(--serif);
font-size: clamp(27px, 3vw, 38px);
font-weight: 400;
}
.mega-empty p {
max-width: 520px;
margin: 10px 0 22px;
color: var(--muted);
line-height: 1.55;
}
.mega-empty-actions {
display: flex;
flex-wrap: wrap;
gap: 10px 26px;
}
.mega-empty-actions a {
padding-bottom: 4px;
border-bottom: 1px solid rgba(71, 53, 44, .42);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
body[data-route="catalog"] .header-nav a[href="#/catalog"]::after,
body[data-route="product"] .header-nav a[href="#/catalog"]::after,
body[data-route="about"] .header-nav a[href="#/about"]::after,
body[data-route="delivery"] .header-nav a[href="#/delivery"]::after,
body[data-route="contacts"] .header-nav a[href="#/contacts"]::after {
transform: scaleX(1);
}
body:not([data-route="home"]) .header-nav a:hover {
color: #f0d2a5;
opacity: 1;
}
@media (max-width: 900px) {
body:not([data-route="home"]) .site-header {
background:
linear-gradient(90deg, rgba(30, 22, 18, .86), rgba(45, 33, 27, .70)),
url('../assets/images/kamiel-hero-brand-2026.jpg') center 44% / cover no-repeat !important;
}
}
/* =========================
KAMIEL PAGES CSS — CLEAN FINAL
========================= */
/* =========================================================
BASE PAGE BLOCKS
========================================================= */
.hero {
padding: 0;
}
.hero-card {
background: linear-gradient(90deg, rgba(255, 247, 241, .92), rgba(234, 216, 203, .55));
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
min-height: 430px;
border: 1px solid var(--border);
}
.hero-copy {
padding: 54px;
}
.hero h1 {
font-size: clamp(42px, 6vw, 76px);
}
.hero p {
margin: 14px 0 26px;
color: var(--muted);
font-size: 18px;
}
.hero-img {
height: 430px;
object-fit: cover;
width: 100%;
}
.category-card,
.brand-card,
.info-card {
background: var(--bg-light);
border: 1px solid var(--border);
padding: 18px;
}
.category-card img {
width: 100%;
height: 150px;
object-fit: cover;
margin-bottom: 12px;
}
.banner {
background: var(--bg-soft);
border: 1px solid var(--border);
display: grid;
grid-template-columns: 1.2fr .8fr;
align-items: center;
overflow: hidden;
}
.banner-copy {
padding: 36px;
}
.banner img {
height: 260px;
width: 100%;
object-fit: cover;
}
.page-hero,
.catalog-hero,
.brands-hero {
padding: 42px 0 34px;
margin: 0;
background: var(--bg);
}
.page-hero .container,
.catalog-hero .container,
.brands-hero .container {
width: min(100% - 140px, 1240px);
margin-inline: auto;
}
.breadcrumbs {
margin: 0 0 28px;
color: var(--muted);
font-size: 14px;
}
.breadcrumbs a {
color: var(--muted);
text-decoration: none;
}
.breadcrumbs a:hover {
color: var(--text);
}
.page-title {
font-family: var(--serif);
font-size: clamp(46px, 4.4vw, 70px);
line-height: 1;
font-weight: 400;
margin: 0 0 16px;
color: var(--text);
}
.page-hero .muted,
.catalog-hero .muted {
font-size: 16px;
color: var(--muted);
margin: 0;
}
.empty {
background: var(--bg-light);
border: 1px solid var(--border);
padding: 34px;
text-align: center;
}
.map {
height: 280px;
background: var(--bg-soft);
border: 1px solid var(--border);
display: grid;
place-items: center;
color: var(--muted);
}
/* =========================================================
HOME PAGE
========================================================= */
.home-page-width {
width: min(100% - 140px, 1240px);
margin-inline: auto;
overflow: hidden;
}
.home-hero {
width: 100%;
padding: 0 0 58px;
margin: 0;
background: var(--bg);
}
.home-hero-bg {
width: 100vw;
min-height: clamp(560px, 52vw, 720px);
margin-left: 50%;
transform: translateX(-50%);
border: 0;
border-radius: 0;
background-size: cover;
background-position: center right;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.home-hero-bg::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(248, 244, 242, .76) 0%,
rgba(248, 244, 242, .48) 35%,
rgba(248, 244, 242, .12) 62%,
rgba(248, 244, 242, 0) 100%
);
pointer-events: none;
}
.home-hero-copy {
position: relative;
z-index: 1;
width: min(620px, 49vw);
margin-left: clamp(90px, 8vw, 150px);
transform: translateY(8px);
}
.home-hero-copy h1 {
font-family: var(--serif);
font-size: clamp(48px, 4.8vw, 72px);
line-height: 1.03;
font-weight: 400;
color: var(--text);
margin: 0 0 24px;
letter-spacing: .005em;
}
.home-hero-eyebrow {
display: block;
margin-bottom: 22px;
color: var(--muted);
font-size: 12px;
font-weight: 600;
letter-spacing: .16em;
}
.home-hero-copy p {
font-size: 17px;
line-height: 1.55;
color: var(--muted);
margin: 0 0 26px;
}
.home-hero-copy .home-hero-cta {
width: min(310px, 100%);
min-height: 54px;
border: 1px solid rgba(56, 47, 43, .58);
border-radius: 0;
padding: 0 22px;
background: rgba(252, 248, 246, .10);
color: var(--text);
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 24px;
font-size: 12px;
font-weight: 600;
letter-spacing: .11em;
backdrop-filter: blur(2px);
}
.home-hero-copy .home-hero-cta:hover {
background: rgba(252, 248, 246, .38);
border-color: var(--text);
color: var(--text);
}
.home-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
margin: 0 0 28px;
padding: 0;
min-height: 54px;
}
.home-section-head h2 {
font-family: var(--serif);
font-size: clamp(38px, 4vw, 56px);
line-height: 1;
font-weight: 400;
margin: 0;
color: var(--text);
}
.home-section-head > a,
.home-head-actions a {
display: inline-flex;
align-items: center;
height: 28px;
color: var(--text);
text-decoration: none;
border-bottom: 1px solid currentColor;
font-size: 15px;
line-height: 1;
white-space: nowrap;
}
.home-section-head > a:hover,
.home-head-actions a:hover {
opacity: .65;
}
.home-head-actions,
.home-arrows {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
height: 36px;
}
.home-arrow {
width: 26px;
height: 34px;
border: 0;
background: transparent;
color: var(--text);
font-family: var(--serif);
font-size: 38px;
font-weight: 400;
line-height: 1;
padding: 0;
margin: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: none;
}
.home-arrow:hover {
opacity: .55;
background: transparent;
}
.home-categories-section {
background: var(--bg);
padding: 0 0 66px;
}
.home-category-track {
display: flex;
gap: 26px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
padding: 0 0 4px;
}
.home-category-track::-webkit-scrollbar {
display: none;
}
.home-category-card {
flex: 0 0 224px;
width: 224px;
min-width: 224px;
max-width: 224px;
background: transparent;
border: 0;
padding: 0;
text-decoration: none;
color: var(--text);
display: block;
}
.home-category-card img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
display: block;
margin: 0;
background: #dbc0b1;
}
.home-category-card span {
min-height: 34px;
background: var(--camel);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--serif);
font-size: 21px;
line-height: 1.08;
padding: 5px 10px;
}
.home-products-section {
background: var(--bg);
padding: 0 0 70px;
overflow: hidden;
}
.home-products-head {
align-items: flex-end;
}
.home-product-carousel-fixed {
width: 100%;
display: flex;
gap: 26px;
overflow-x: auto;
overflow-y: visible;
scroll-behavior: smooth;
scrollbar-width: none;
padding: 0 0 6px;
margin: 0;
}
.home-product-carousel-fixed::-webkit-scrollbar {
display: none;
}
.home-product-carousel-fixed .product-card {
flex: 0 0 calc((100% - 78px) / 4);
width: calc((100% - 78px) / 4);
min-width: calc((100% - 78px) / 4);
max-width: calc((100% - 78px) / 4);
}
/* clothes collection */
.home-clothes-section {
background: var(--bg);
padding: 0 0 74px;
}
.home-clothes-section .home-section-head {
margin-bottom: 28px;
}
.home-clothes-section .home-collection-hero {
display: block;
width: 100%;
height: 340px;
margin-bottom: 36px;
overflow: hidden;
background: var(--bg-soft);
text-decoration: none;
}
.home-clothes-section .home-collection-hero img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.home-clothes-products {
margin-top: 0;
}
.home-clothes-products .product-card {
flex: 0 0 calc((100% - 78px) / 4);
width: calc((100% - 78px) / 4);
min-width: calc((100% - 78px) / 4);
max-width: calc((100% - 78px) / 4);
}
/* =========================================================
PRODUCT CARD FIXES
========================================================= */
.product-card {
position: relative;
overflow: visible;
}
.product-card a,
.product-card .product-link {
position: relative;
z-index: 1;
}
.product-card button,
.product-card .wishlist-btn,
.product-card [data-wishlist],
.product-card [data-wishlist-toggle],
.product-card [data-action="wishlist"] {
pointer-events: auto;
}
.product-card .wishlist-btn,
.product-card [data-wishlist],
.product-card [data-wishlist-toggle],
.product-card [data-action="wishlist"] {
position: absolute;
top: 14px;
right: 14px;
z-index: 30;
width: 42px;
height: 42px;
min-width: 42px;
min-height: 42px;
background: rgba(255, 247, 241, .96);
border: 0;
color: var(--text);
display: grid;
place-items: center;
opacity: 1;
visibility: visible;
transform: none;
cursor: pointer;
}
.product-card .wishlist-btn:hover,
.product-card [data-wishlist]:hover,
.product-card [data-wishlist-toggle]:hover,
.product-card [data-action="wishlist"]:hover {
background: var(--camel);
color: #fff;
}
.product-card::before,
.product-card::after {
pointer-events: none;
}
.product-card .btn,
.product-card .btn-primary,
.product-card [data-add-cart],
.product-card [data-action="add-cart"] {
position: relative;
z-index: 10;
}
/* =========================================================
CATALOG FINAL
========================================================= */
.catalog-section {
padding: 0 0 92px;
background: var(--bg);
}
.catalog-layout,
.catalog-layout-final {
width: min(100% - 140px, 1240px);
margin-inline: auto;
display: grid;
grid-template-columns: 245px minmax(0, 1fr);
gap: 34px;
align-items: start;
}
.catalog-top,
.catalog-top-final {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 34px;
}
.catalog-top-actions {
display: flex;
align-items: center;
gap: 12px;
}
.catalog-sort,
#sort.input {
width: 215px;
height: 46px;
background: rgba(255, 247, 241, .76);
border: 1px solid rgba(216, 191, 175, .9);
color: var(--text);
padding: 0 42px 0 16px;
font-size: 15px;
outline: none;
box-shadow: none;
cursor: pointer;
}
.catalog-sort:focus,
#sort.input:focus {
border-color: var(--camel);
box-shadow: 0 0 0 3px rgba(184, 150, 130, .12);
}
.catalog-filter-panel,
.filters {
position: static;
top: auto;
max-height: none;
height: auto;
overflow: visible;
background: rgba(255, 247, 241, .64);
border: 1px solid rgba(216, 191, 175, .78);
padding: 24px 22px 26px;
box-shadow: none;
color: var(--text);
}
.catalog-filter-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding-bottom: 18px;
margin-bottom: 22px;
border-bottom: 1px solid rgba(216, 191, 175, .9);
}
.catalog-filter-head h2 {
font-family: var(--serif);
font-size: 32px;
font-weight: 400;
line-height: 1;
margin: 0;
color: var(--text);
}
.catalog-filter-head a {
color: var(--muted);
font-size: 14px;
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.catalog-filter-head a:hover {
color: var(--text);
}
.catalog-filter-block,
.filters .filter-block {
padding: 0 0 24px;
margin: 0 0 24px;
border-bottom: 1px solid rgba(216, 191, 175, .64);
}
.catalog-filter-block:last-child,
.filters .filter-block:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.catalog-filter-block h3,
.filters .filter-block h3 {
font-family: var(--serif);
font-size: 22px;
font-weight: 400;
line-height: 1.1;
margin: 0 0 16px;
color: var(--text);
}
.catalog-filter-row {
position: relative;
min-height: 34px;
display: grid;
grid-template-columns: minmax(0, 1fr) 30px;
align-items: center;
gap: 10px;
padding: 5px 8px;
color: var(--text);
text-decoration: none;
border-radius: 7px;
font-size: 15px;
line-height: 1.16;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.catalog-filter-row:hover {
background: rgba(234, 216, 203, .45);
color: var(--text);
}
.catalog-filter-row.is-active {
background: var(--camel);
color: #fff;
font-weight: 600;
}
.catalog-filter-row span {
min-width: 0;
}
.catalog-filter-row small,
.catalog-brand-link small,
.catalog-chip-list a small {
width: 26px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(234, 216, 203, .78);
color: var(--muted);
border-radius: 999px;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
}
.catalog-filter-row.is-active small,
.catalog-brand-link.is-active small,
.catalog-chip-list a.is-active small {
background: rgba(255, 255, 255, .22);
color: #fff;
}
/* category list + subcategories */
.catalog-category-groups,
.catalog-category-tree,
.cat-tree {
display: grid;
gap: 4px;
}
.catalog-category-group {
display: grid;
gap: 2px;
}
.catalog-category-root {
font-family: var(--serif);
font-size: 17px;
}
.catalog-category-root.has-active-child {
background: rgba(234, 216, 203, .48);
color: var(--text);
}
.catalog-subcategory-list {
display: grid;
gap: 2px;
margin: 4px 0 8px;
}
.catalog-subcategory-link {
padding-left: calc(8px + (var(--category-depth, 1) * 18px));
font-size: 14px;
color: var(--muted);
}
.catalog-subcategory-link::before {
content: "";
width: 6px;
height: 1px;
background: currentColor;
opacity: .45;
position: absolute;
left: calc(8px + (var(--category-depth, 1) * 10px));
}
.catalog-subcategory-link.has-active-child {
color: var(--text);
}
.catalog-subcategory-link.is-active {
color: #fff;
}
/* show more / less */
.catalog-limited-list .is-extra {
display: none;
}
.catalog-limited-list.is-expanded .is-extra {
display: grid;
}
.catalog-filter-more {
width: 100%;
height: 34px;
margin: 12px auto 0;
border: 0;
border-top: 1px solid rgba(216, 191, 175, .58);
background: transparent;
color: var(--muted);
font-size: 14px;
font-family: inherit;
cursor: pointer;
display: flex;
align-items: flex-end;
justify-content: center;
padding: 8px 0 0;
transition: color .18s ease;
}
.catalog-filter-more:hover {
color: var(--text);
}
/* brand filter */
.catalog-brand-list {
display: grid;
gap: 4px;
}
.catalog-brand-link {
min-height: 34px;
display: grid;
grid-template-columns: minmax(0, 1fr) 30px;
align-items: center;
gap: 10px;
padding: 5px 8px;
color: var(--text);
text-decoration: none;
border-radius: 7px;
font-size: 15px;
line-height: 1.16;
transition: background .18s ease, color .18s ease;
}
.catalog-brand-link:hover {
background: rgba(234, 216, 203, .45);
}
.catalog-brand-link.is-active {
background: var(--camel);
color: #fff;
font-weight: 600;
}
/* price */
.catalog-price-filter {
display: grid;
gap: 12px;
}
.catalog-price-row {
display: grid;
grid-template-columns: 1fr 16px 1fr;
align-items: center;
gap: 8px;
}
.catalog-price-row span {
width: 12px;
height: 1px;
justify-self: center;
background: rgba(63, 48, 41, .32);
}
.catalog-price-input {
width: 100%;
height: 40px;
border: 1px solid rgba(216, 191, 175, .9);
background: rgba(255, 250, 247, .86);
color: var(--text);
padding: 0 10px;
outline: none;
font-size: 14px;
}
.catalog-price-input:focus {
border-color: var(--camel);
box-shadow: 0 0 0 3px rgba(184, 150, 130, .12);
}
.catalog-filter-apply {
height: 40px;
border: 1px solid var(--camel);
background: var(--camel);
color: #fff;
cursor: pointer;
border-radius: 7px;
font-size: 14px;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.catalog-filter-apply:hover {
background: var(--camel-dark);
border-color: var(--camel-dark);
transform: translateY(-1px);
}
/* chips */
.catalog-chip-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.catalog-chip-list-vertical {
display: grid;
grid-template-columns: 1fr;
}
.catalog-chip-list a {
min-height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 7px 12px;
border: 1px solid rgba(216, 191, 175, .86);
background: rgba(255, 250, 247, .62);
color: var(--text);
text-decoration: none;
border-radius: 999px;
font-size: 14px;
line-height: 1;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.catalog-chip-list-vertical a {
justify-content: space-between;
border-radius: 7px;
}
.catalog-chip-list a:hover {
border-color: var(--camel);
transform: translateY(-1px);
}
.catalog-chip-list a.is-active {
background: var(--camel);
border-color: var(--camel);
color: #fff;
}
/* catalog grid */
.catalog-products-area {
min-width: 0;
}
.catalog-products-area .product-grid,
.catalog-layout-final .product-grid,
.catalog-layout .product-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 20px;
align-items: start;
}
.catalog-layout-final .product-card,
.catalog-layout .product-card {
background: rgba(255, 247, 241, .72);
border: 1px solid rgba(216, 191, 175, .82);
min-width: 0;
height: auto;
}
.catalog-layout-final .product-media,
.catalog-layout .product-media {
aspect-ratio: 1 / 1.02;
padding: 0;
margin: 0;
background: #f6ebe4;
display: block;
overflow: hidden;
}
.catalog-layout-final .product-media img,
.catalog-layout .product-media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
margin: 0;
padding: 0;
}
.catalog-layout-final .product-media::before,
.catalog-layout .product-media::before,
.catalog-layout-final .product-media::after,
.catalog-layout .product-media::after {
display: none;
content: none;
}
.catalog-layout-final .product-info,
.catalog-layout .product-info {
padding: 14px 14px 16px;
}
.catalog-layout-final .brand,
.catalog-layout .brand {
font-size: 11px;
letter-spacing: .12em;
}
.catalog-layout-final .product-title,
.catalog-layout .product-title {
font-size: 17px;
line-height: 1.16;
min-height: 42px;
}
.catalog-layout-final .product-path,
.catalog-layout .product-path {
font-size: 11px;
line-height: 1.25;
min-height: 34px;
}
.catalog-layout-final .card-actions .btn,
.catalog-layout .card-actions .btn {
height: 44px;
min-height: 44px;
}
.catalog-empty {
grid-column: 1 / -1;
}
/* pagination */
.catalog-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 44px 0 0;
}
.catalog-pagination a,
.catalog-pagination span {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(216, 191, 175, .9);
background: rgba(255, 247, 241, .62);
color: var(--text);
text-decoration: none;
font-family: var(--serif);
font-size: 18px;
line-height: 1;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.catalog-pagination a:hover,
.catalog-pagination a.is-active {
background: var(--camel);
border-color: var(--camel);
color: #fff;
}
.catalog-pagination a:hover {
transform: translateY(-1px);
}
.catalog-pagination span {
opacity: .38;
pointer-events: none;
}
/* =========================================================
BRANDS PAGE — PRODUCT CARD STYLE
========================================================= */
.brands-hero {
padding-bottom: 26px;
}
.brands-head-clean {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 28px;
}
.brands-head-clean > span {
color: var(--muted);
font-size: 14px;
border-bottom: 1px solid currentColor;
white-space: nowrap;
}
.brands-letters-clean {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 28px;
max-width: 760px;
}
.brands-letters-clean a {
min-width: 31px;
height: 30px;
padding: 0 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(216, 191, 175, .85);
background: rgba(255, 247, 241, .46);
color: var(--text);
text-decoration: none;
font-family: var(--serif);
font-size: 14px;
line-height: 1;
transition: background .16s ease, color .16s ease, border-color .16s ease, opacity .16s ease;
}
.brands-letters-clean a.is-active:hover,
.brands-letters-clean a.is-current {
background: var(--camel);
border-color: var(--camel);
color: #fff;
}
.brands-letters-clean a.is-disabled {
opacity: .28;
pointer-events: none;
}
.brands-section {
padding: 0 0 76px;
}
.brands-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px;
}
.brand-card-clean {
display: flex;
flex-direction: column;
min-height: 455px;
background: #fdf8f3;
border: 1px solid rgba(216, 191, 175, .75);
color: var(--text);
text-decoration: none;
padding: 0;
overflow: hidden;
transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.brand-card-clean:hover {
border-color: var(--camel);
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(63, 48, 41, .08);
}
.brand-card-image {
aspect-ratio: 1 / 1;
background: #fffaf7;
overflow: hidden;
display: grid;
place-items: center;
}
.brand-card-image img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform .22s ease;
}
.brand-card-clean:hover .brand-card-image img {
transform: scale(1.04);
}
.brand-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 14px 16px 18px;
}
.brand-card-kicker {
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 6px;
}
.brand-card-body h3 {
font-family: var(--serif);
font-size: 22px;
line-height: 1.08;
font-weight: 400;
margin: 0 0 10px;
color: var(--text);
}
.brand-description {
color: var(--muted);
margin: 0 0 18px;
font-size: 14px;
line-height: 1.42;
}
.brand-card-bottom {
margin-top: auto;
display: grid;
gap: 12px;
}
.brand-card-bottom span {
color: var(--muted);
font-size: 14px;
}
.brand-card-bottom b {
min-height: 42px;
width: 100%;
padding: 10px 18px;
border-radius: 7px;
background: var(--camel);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 500;
font-size: 15px;
transition: background .18s ease;
}
.brand-card-clean:hover .brand-card-bottom b {
background: var(--camel-dark);
}
/* =========================================================
DELIVERY PAGE
========================================================= */
.delivery-page {
background: var(--bg);
padding: 42px 0 88px;
}
.delivery-container {
width: min(100% - 140px, 1240px);
margin-inline: auto;
}
.delivery-breadcrumbs {
margin: 0 0 32px;
color: var(--muted);
font-size: 14px;
}
.delivery-breadcrumbs a {
color: var(--muted);
text-decoration: none;
}
.delivery-breadcrumbs a:hover {
color: var(--text);
}
.delivery-head {
max-width: 760px;
margin-bottom: 46px;
}
.delivery-head h1 {
font-family: var(--serif);
font-size: clamp(52px, 5vw, 76px);
font-weight: 400;
line-height: 1;
margin: 0 0 18px;
color: var(--text);
}
.delivery-head p {
max-width: 660px;
margin: 0;
color: var(--muted);
font-size: 18px;
line-height: 1.55;
}
.delivery-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 34px;
}
.delivery-card {
min-height: 230px;
background: rgba(255, 247, 241, .72);
border: 1px solid rgba(216, 191, 175, .85);
padding: 26px 26px 28px;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.delivery-card:hover {
transform: translateY(-2px);
border-color: var(--camel);
box-shadow: 0 14px 34px rgba(63, 48, 41, .07);
}
.delivery-card-number {
display: inline-flex;
margin-bottom: 28px;
color: var(--camel-dark);
font-family: var(--serif);
font-size: 18px;
border-bottom: 1px solid currentColor;
}
.delivery-card h2 {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
line-height: 1.1;
margin: 0 0 14px;
color: var(--text);
}
.delivery-card p {
margin: 0;
color: var(--muted);
line-height: 1.48;
}
.delivery-info {
display: grid;
grid-template-columns: 1fr 340px;
gap: 28px;
align-items: stretch;
}
.delivery-info-main {
background: rgba(255, 247, 241, .52);
border: 1px solid rgba(216, 191, 175, .78);
padding: 34px;
}
.delivery-info-main h2 {
font-family: var(--serif);
font-size: 34px;
font-weight: 400;
margin: 0 0 24px;
color: var(--text);
}
.delivery-steps {
display: grid;
gap: 18px;
}
.delivery-step {
display: grid;
grid-template-columns: 42px 1fr;
gap: 18px;
align-items: start;
}
.delivery-step span {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--camel);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 20px;
}
.delivery-step p {
margin: 7px 0 0;
color: var(--text);
line-height: 1.5;
}
.delivery-note {
background: var(--camel);
color: #fff;
padding: 32px 28px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
}
.delivery-note h3 {
font-family: var(--serif);
font-size: 32px;
font-weight: 400;
margin: 0;
}
.delivery-note p {
margin: 0;
line-height: 1.55;
color: rgba(255, 255, 255, .92);
}
.delivery-note .btn {
width: 100%;
border-color: #fff;
background: #fff;
color: var(--text);
}
.delivery-note .btn:hover {
background: var(--camel-dark);
border-color: var(--camel-dark);
color: #fff;
}
/* =========================================================
OFFER PAGE
========================================================= */
.offer-page {
background: var(--bg);
padding: 42px 0 90px;
}
.offer-container {
width: min(100% - 140px, 1240px);
margin-inline: auto;
}
.offer-breadcrumbs {
margin: 0 0 32px;
color: var(--muted);
font-size: 14px;
}
.offer-breadcrumbs a {
color: var(--muted);
text-decoration: none;
}
.offer-breadcrumbs a:hover {
color: var(--text);
}
.offer-head {
margin-bottom: 38px;
max-width: 860px;
}
.offer-kicker {
display: inline-flex;
margin-bottom: 14px;
color: var(--camel-dark);
font-size: 13px;
letter-spacing: .18em;
text-transform: uppercase;
}
.offer-head h1 {
font-family: var(--serif);
font-size: clamp(46px, 5.4vw, 76px);
font-weight: 400;
line-height: .98;
margin: 0 0 18px;
color: var(--text);
}
.offer-head p {
max-width: 720px;
margin: 0;
color: var(--muted);
font-size: 18px;
line-height: 1.55;
}
.offer-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: 30px;
align-items: start;
}
.offer-side {
position: sticky;
top: 92px;
background: rgba(255, 247, 241, .5);
border: 1px solid rgba(216, 191, 175, .78);
padding: 22px;
display: grid;
gap: 4px;
}
.offer-side h3 {
font-family: var(--serif);
font-size: 26px;
font-weight: 400;
margin: 0 0 12px;
color: var(--text);
}
.offer-side a {
display: none;
}
.offer-side button {
width: 100%;
padding: 8px 0;
border: 0;
border-bottom: 1px solid rgba(216, 191, 175, .45);
background: transparent;
color: var(--muted);
text-align: left;
font: inherit;
font-size: 14px;
line-height: 1.25;
cursor: pointer;
transition: color .18s ease, padding-left .18s ease;
}
.offer-side button:hover {
color: var(--text);
padding-left: 6px;
}
.offer-document {
background: rgba(255, 247, 241, .62);
border: 1px solid rgba(216, 191, 175, .9);
padding: 34px;
}
.offer-notice {
margin-bottom: 34px;
padding: 20px 22px;
background: rgba(234, 216, 203, .42);
border: 1px solid rgba(184, 150, 130, .42);
color: var(--text);
line-height: 1.55;
}
.offer-block {
padding: 0 0 34px;
margin: 0 0 34px;
border-bottom: 1px solid rgba(216, 191, 175, .72);
scroll-margin-top: 96px;
}
.offer-block:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}
.offer-block h2 {
font-family: var(--serif);
font-size: 34px;
font-weight: 400;
line-height: 1.12;
margin: 0 0 18px;
color: var(--text);
}
.offer-block h3 {
font-family: var(--serif);
font-size: 24px;
font-weight: 400;
margin: 24px 0 10px;
color: var(--text);
}
.offer-block p {
margin: 0 0 14px;
color: var(--text);
line-height: 1.62;
}
.offer-block b {
font-weight: 600;
}
/* =========================================================
RETURNS / PRIVACY SHARED
========================================================= */
.returns-page,
.privacy-page {
background: var(--bg);
padding: 42px 0 88px;
}
.returns-container,
.privacy-container {
width: min(100% - 140px, 1240px);
margin-inline: auto;
}
.returns-breadcrumbs,
.privacy-breadcrumbs {
margin: 0 0 34px;
font-size: 14px;
color: var(--muted);
}
.returns-breadcrumbs a,
.privacy-breadcrumbs a {
color: var(--muted);
text-decoration: none;
}
.returns-head,
.privacy-head {
max-width: 820px;
margin-bottom: 42px;
}
.returns-head span,
.privacy-head span {
display: block;
margin-bottom: 18px;
color: var(--camel-dark);
letter-spacing: .18em;
font-size: 13px;
text-transform: uppercase;
}
.returns-head h1,
.privacy-head h1 {
font-family: var(--serif);
font-size: clamp(50px, 5.7vw, 78px);
line-height: .95;
font-weight: 400;
margin: 0 0 22px;
color: var(--text);
}
.returns-head p,
.privacy-head p {
max-width: 680px;
margin: 0;
color: var(--muted);
font-size: 18px;
line-height: 1.5;
}
.returns-cards,
.privacy-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 34px;
}
.returns-card,
.privacy-card {
min-height: 230px;
background: rgba(255, 247, 241, .72);
border: 1px solid rgba(216, 191, 175, .9);
padding: 28px;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.returns-card:hover,
.privacy-card:hover {
transform: translateY(-2px);
border-color: var(--camel);
box-shadow: 0 16px 38px rgba(63, 48, 41, .08);
}
.returns-card-number,
.privacy-card-number {
display: inline-flex;
margin-bottom: 34px;
color: var(--camel-dark);
font-family: var(--serif);
font-size: 18px;
}
.returns-card h2,
.privacy-card h2 {
font-family: var(--serif);
font-size: 28px;
font-weight: 400;
line-height: 1.1;
margin: 0 0 14px;
color: var(--text);
}
.returns-card p,
.privacy-card p {
margin: 0;
color: var(--muted);
line-height: 1.5;
}
.returns-info,
.privacy-info {
display: grid;
grid-template-columns: 1fr 340px;
gap: 28px;
align-items: start;
}
.returns-info-main,
.privacy-info-main {
background: rgba(255, 247, 241, .72);
border: 1px solid rgba(216, 191, 175, .9);
padding: 34px;
}
.returns-info-main h2,
.privacy-info-main h2 {
font-family: var(--serif);
font-size: 34px;
font-weight: 400;
margin: 0 0 26px;
color: var(--text);
}
.returns-block,
.privacy-block {
padding: 22px 0;
border-top: 1px solid rgba(216, 191, 175, .72);
}
.returns-block:first-of-type,
.privacy-block:first-of-type {
border-top: 0;
padding-top: 0;
}
.returns-block h3,
.privacy-block h3 {
font-family: var(--serif);
font-size: 24px;
font-weight: 400;
margin: 0 0 10px;
color: var(--text);
}
.returns-block p,
.privacy-block p {
margin: 0;
max-width: 760px;
color: var(--muted);
line-height: 1.55;
}
.returns-note,
.privacy-note {
background: rgba(234, 216, 203, .62);
border: 1px solid rgba(216, 191, 175, .9);
padding: 28px;
position: sticky;
top: 92px;
}
.returns-note h3,
.privacy-note h3 {
font-family: var(--serif);
font-size: 30px;
font-weight: 400;
margin: 0 0 14px;
color: var(--text);
}
.returns-note p,
.privacy-note p {
margin: 0;
color: var(--muted);
line-height: 1.5;
}
/* =========================================================
ABOUT PAGE
========================================================= */
.about-page {
background: var(--bg);
padding: 42px 0 88px;
}
.about-container {
width: min(100% - 140px, 1240px);
margin-inline: auto;
}
.about-breadcrumbs {
margin: 0 0 36px;
font-size: 14px;
color: var(--muted);
}
.about-title {
font-family: var(--serif);
font-size: clamp(44px, 4.2vw, 68px);
font-weight: 400;
line-height: 1;
margin: 0 0 72px;
color: var(--text);
}
.about-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
margin-bottom: 92px;
}
.about-row-bottom {
margin-bottom: 0;
}
.about-image {
width: 100%;
background: rgba(255, 247, 241, .35);
overflow: hidden;
}
.about-image img {
width: 100%;
height: 340px;
display: block;
object-fit: cover;
}
.about-row-top .about-image img {
height: 345px;
}
.about-text {
font-family: var(--serif);
color: var(--text);
font-size: 23px;
line-height: 1.18;
}
.about-text p {
margin: 0 0 28px;
}
.about-text p:last-child {
margin-bottom: 0;
}
.about-text b {
font-weight: 500;
}
/* =========================================================
CONTACTS ELEGANT PAGE
========================================================= */
.contacts-elegant-page {
background: var(--bg);
padding: 42px 0 88px;
}
.contacts-elegant-container {
width: min(100% - 140px, 1240px);
margin-inline: auto;
}
.contacts-elegant-breadcrumbs {
margin: 0 0 34px;
font-size: 14px;
color: var(--muted);
}
.contacts-elegant-breadcrumbs a {
color: var(--muted);
text-decoration: none;
}
.contacts-elegant-breadcrumbs a:hover {
color: var(--text);
}
.contacts-elegant-hero {
display: grid;
grid-template-columns: 1fr 520px;
gap: 70px;
align-items: end;
margin-bottom: 42px;
}
.contacts-elegant-kicker {
display: block;
margin-bottom: 12px;
color: var(--camel-dark);
font-size: 13px;
letter-spacing: .22em;
text-transform: uppercase;
}
.contacts-elegant-hero h1 {
font-family: var(--serif);
font-size: clamp(42px, 4.4vw, 64px);
line-height: .95;
font-weight: 400;
margin: 0;
color: var(--text);
}
.contacts-elegant-hero p {
margin: 0 0 10px;
color: var(--muted);
font-size: 19px;
line-height: 1.48;
font-weight: 500;
}
.contacts-elegant-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 24px;
}
.contacts-elegant-card {
min-height: 126px;
padding: 24px 26px;
background: rgba(255, 247, 241, .72);
border: 1px solid rgba(216, 191, 175, .9);
color: var(--text);
text-decoration: none;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.contacts-elegant-card:hover {
border-color: var(--camel);
background: rgba(255, 250, 247, .94);
transform: translateY(-2px);
}
.contacts-elegant-card span {
color: var(--muted);
font-size: 14px;
}
.contacts-elegant-card b {
margin-top: 18px;
font-weight: 500;
line-height: 1.35;
}
.contacts-elegant-main {
display: grid;
grid-template-columns: 1fr 330px;
gap: 24px;
align-items: stretch;
}
.contacts-elegant-map {
height: 520px;
border: 1px solid rgba(216, 191, 175, .95);
background: rgba(255, 247, 241, .62);
overflow: hidden;
position: relative;
}
.contacts-elegant-map iframe {
width: 100%;
height: 100%;
display: block;
filter: saturate(.72) contrast(.94) brightness(1.03);
}
.contacts-elegant-side {
padding: 34px 30px;
background: rgba(234, 216, 203, .42);
border: 1px solid rgba(216, 191, 175, .95);
display: flex;
flex-direction: column;
}
.contacts-elegant-side-label {
color: var(--camel-dark);
font-size: 12px;
letter-spacing: .22em;
text-transform: uppercase;
margin-bottom: 16px;
}
.contacts-elegant-side h2 {
font-family: var(--serif);
font-size: 42px;
font-weight: 400;
line-height: 1;
margin: 0 0 22px;
color: var(--text);
}
.contacts-elegant-side p {
margin: 0;
color: var(--muted);
line-height: 1.55;
font-size: 16px;
}
.contacts-elegant-details {
display: grid;
gap: 14px;
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid rgba(184, 150, 130, .34);
}
.contacts-elegant-details div {
display: grid;
gap: 5px;
}
.contacts-elegant-details span {
color: var(--muted);
font-size: 13px;
}
.contacts-elegant-details b {
font-weight: 500;
color: var(--text);
line-height: 1.35;
}
.contacts-elegant-socials {
display: grid;
gap: 10px;
margin-top: 28px;
}
.contacts-elegant-socials a {
min-height: 42px;
padding: 10px 14px;
border: 1px solid rgba(184, 150, 130, .55);
color: var(--text);
text-decoration: none;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 247, 241, .28);
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.contacts-elegant-socials a::after {
content: "→";
font-family: var(--serif);
font-size: 20px;
}
.contacts-elegant-socials a:hover {
background: var(--camel);
color: #fff;
transform: translateX(2px);
}
.contacts-elegant-route {
margin-top: 12px;
min-height: 46px;
padding: 12px 18px;
border: 1px solid var(--camel);
background: transparent;
color: var(--text);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 7px;
transition: background .18s ease, color .18s ease, transform .18s ease;
}
.contacts-elegant-route:hover {
background: var(--camel);
color: #fff;
transform: translateY(-1px);
}
/* =========================================================
CART / CHECKOUT / PRODUCT DETAIL
========================================================= */
.product-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 42px;
}
.gallery-main {
background: #fff;
border: 1px solid var(--border);
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
}
.gallery-main img {
max-height: 100%;
object-fit: contain;
}
.thumbs {
display: flex;
gap: 10px;
margin-top: 12px;
}
.thumbs button {
width: 70px;
height: 70px;
border: 1px solid var(--border);
background: #fff;
}
.thumbs img {
width: 100%;
height: 100%;
object-fit: contain;
}
.option-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0 16px;
}
.option {
border: 1px solid var(--border);
background: #fff;
padding: 8px 12px;
}
.option.active {
background: var(--camel);
color: #fff;
}
.tabs {
margin-top: 34px;
border: 1px solid var(--border);
background: var(--bg-soft);
}
.tab-buttons {
display: flex;
border-bottom: 1px solid var(--border);
}
.tab-buttons button {
flex: 1;
border: 0;
background: transparent;
padding: 14px;
}
.tab-buttons button.active {
background: var(--camel);
color: #fff;
}
.tab-panel {
padding: 22px;
}
.cart-layout,
.checkout-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 28px;
}
.cart-item {
display: grid;
grid-template-columns: 90px 1fr auto;
gap: 16px;
background: var(--bg-light);
border: 1px solid var(--border);
padding: 14px;
margin-bottom: 12px;
}
.cart-item img {
width: 90px;
height: 90px;
object-fit: contain;
background: #fff;
}
.summary {
background: var(--bg-soft);
border: 1px solid var(--border);
padding: 20px;
align-self: start;
position: sticky;
top: 88px;
}
.summary-row {
display: flex;
justify-content: space-between;
gap: 12px;
margin: 10px 0;
}
.summary-row.total {
font-weight: 700;
border-top: 1px solid var(--border);
padding-top: 12px;
}
.checkout-form {
background: var(--bg-light);
border: 1px solid var(--border);
padding: 22px;
}
.form-section {
border-bottom: 1px solid var(--border);
padding-bottom: 18px;
margin-bottom: 18px;
}
/* =========================================================
LEGAL OLD FALLBACK
========================================================= */
.legal {
background: var(--bg-light);
border: 1px solid var(--border);
padding: 30px;
max-width: 940px;
}
.legal h2 {
margin-top: 24px;
margin-bottom: 10px;
}
.mobile-filter-btn {
display: none;
}
.main:has(.about-page) + .site-footer,
.main:has(.contacts-elegant-page) + .site-footer,
.main:has(.returns-page) + .site-footer,
.main:has(.privacy-page) + .site-footer,
.main:has(.offer-page) + .site-footer,
.main:has(.delivery-page) + .site-footer {
margin-top: 0;
}
/* =========================================================
RESPONSIVE
========================================================= */
@media (max-width: 1180px) {
.home-page-width,
.page-hero .container,
.catalog-hero .container,
.brands-hero .container,
.catalog-layout,
.catalog-layout-final,
.delivery-container,
.offer-container,
.returns-container,
.privacy-container,
.contacts-elegant-container,
.about-container {
width: min(100% - 64px, 1240px);
}
.catalog-layout,
.catalog-layout-final {
grid-template-columns: 235px minmax(0, 1fr);
gap: 24px;
}
.catalog-products-area .product-grid,
.catalog-layout-final .product-grid,
.catalog-layout .product-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-product-carousel-fixed .product-card,
.home-clothes-products .product-card {
flex-basis: calc((100% - 52px) / 3);
width: calc((100% - 52px) / 3);
min-width: calc((100% - 52px) / 3);
max-width: calc((100% - 52px) / 3);
}
.brands-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 1040px) {
.contacts-elegant-hero,
.contacts-elegant-main,
.offer-layout,
.delivery-info,
.returns-info,
.privacy-info {
grid-template-columns: 1fr;
}
.offer-side,
.returns-note,
.privacy-note {
position: static;
}
.offer-side {
display: flex;
flex-wrap: wrap;
gap: 8px 14px;
}
.offer-side h3 {
width: 100%;
}
.offer-side button {
width: auto;
border-bottom: 0;
background: rgba(234, 216, 203, .38);
padding: 8px 12px;
}
.offer-side button:hover {
padding-left: 12px;
background: var(--camel);
color: #fff;
}
}
@media (max-width: 980px) {
.catalog-layout,
.catalog-layout-final,
.product-detail,
.cart-layout,
.checkout-layout {
grid-template-columns: 1fr;
}
.catalog-top,
.catalog-top-final {
flex-direction: column;
align-items: flex-start;
}
.catalog-top-actions,
.catalog-sort,
#sort.input {
width: 100%;
}
.delivery-cards,
.returns-cards,
.privacy-cards {
grid-template-columns: 1fr;
}
.home-hero-bg {
min-height: 450px;
background-position: 62% center;
}
.home-hero-copy {
width: min(430px, 82vw);
margin-left: 34px;
transform: translateY(0);
}
.home-hero-copy h1 {
font-size: clamp(42px, 8vw, 58px);
}
}
@media (max-width: 820px) {
.home-page-width,
.page-hero .container,
.catalog-hero .container,
.brands-hero .container,
.catalog-layout,
.catalog-layout-final,
.delivery-container,
.offer-container,
.returns-container,
.privacy-container,
.contacts-elegant-container,
.about-container {
width: min(100% - 36px, 1240px);
}
.catalog-products-area .product-grid,
.catalog-layout-final .product-grid,
.catalog-layout .product-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-product-carousel-fixed .product-card,
.home-clothes-products .product-card {
flex-basis: calc((100% - 26px) / 2);
width: calc((100% - 26px) / 2);
min-width: calc((100% - 26px) / 2);
max-width: calc((100% - 26px) / 2);
}
.home-category-card {
flex-basis: 210px;
width: 210px;
min-width: 210px;
max-width: 210px;
}
.brands-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
.brands-head-clean {
display: block;
}
.brands-head-clean > span {
display: inline-flex;
margin-top: 16px;
}
.about-row {
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 54px;
}
.about-row-middle .about-text {
order: 2;
}
.about-row-middle .about-image {
order: 1;
}
.contacts-elegant-cards {
grid-template-columns: 1fr;
}
.contacts-elegant-map {
height: 420px;
}
}
@media (max-width: 620px) {
.home-page-width,
.page-hero .container,
.catalog-hero .container,
.brands-hero .container,
.catalog-layout,
.catalog-layout-final,
.delivery-container,
.offer-container,
.returns-container,
.privacy-container,
.contacts-elegant-container,
.about-container {
width: min(100% - 28px, 1240px);
}
.page-title {
font-size: 42px;
}
.home-hero-bg {
min-height: 420px;
}
.home-hero-copy {
width: 82vw;
margin-left: 22px;
}
.home-hero-copy h1 {
font-size: 38px;
}
.home-hero-copy p {
font-size: 16px;
}
.home-hero-copy p br {
display: none;
}
.home-hero-eyebrow {
margin-bottom: 16px;
font-size: 11px;
}
.home-hero-copy .home-hero-cta {
width: min(280px, 100%);
min-height: 50px;
padding-inline: 18px;
font-size: 11px;
}
.home-section-head h2 {
font-size: 34px;
}
.home-category-track {
gap: 18px;
}
.home-category-card {
flex-basis: 74vw;
width: 74vw;
min-width: 74vw;
max-width: 74vw;
}
.home-category-card img {
height: auto;
aspect-ratio: 16 / 9;
}
.home-product-carousel-fixed .product-card,
.home-clothes-products .product-card {
flex-basis: 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
}
.catalog-products-area .product-grid,
.catalog-layout-final .product-grid,
.catalog-layout .product-grid,
.brands-grid {
grid-template-columns: 1fr;
}
.delivery-head h1,
.returns-head h1,
.privacy-head h1,
.offer-head h1,
.contacts-elegant-hero h1 {
font-size: 42px;
}
.delivery-head p,
.returns-head p,
.privacy-head p,
.offer-head p,
.contacts-elegant-hero p {
font-size: 16px;
}
.delivery-card,
.delivery-info-main,
.delivery-note,
.returns-card,
.returns-info-main,
.returns-note,
.privacy-card,
.privacy-info-main,
.privacy-note,
.offer-document,
.contacts-elegant-card,
.contacts-elegant-side {
padding: 22px;
}
.contacts-elegant-map {
height: 340px;
}
.about-title {
font-size: 38px;
margin-bottom: 34px;
}
.about-text {
font-size: 16px;
line-height: 1.3;
}
.about-image img,
.about-row-top .about-image img {
height: 220px;
}
}
/* =========================
WISHLIST PAGE
========================= */
.wishlist-hero {
padding-bottom: 30px !important;
}
.wishlist-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
}
.wishlist-head > span {
color: var(--muted);
font-size: 14px;
border-bottom: 1px solid currentColor;
white-space: nowrap;
}
.wishlist-section {
background: var(--bg);
padding: 0 0 88px;
}
.wishlist-section .container {
width: min(100% - 140px, 1240px);
margin-inline: auto;
}
.wishlist-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.wishlist-empty {
min-height: 360px;
padding: 64px 34px;
background: rgba(255, 247, 241, .68);
border: 1px solid rgba(216, 191, 175, .86);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
.wishlist-empty span {
display: block;
margin-bottom: 16px;
color: var(--camel-dark);
letter-spacing: .22em;
font-size: 13px;
}
.wishlist-empty h2 {
font-family: var(--serif);
font-size: clamp(34px, 4vw, 52px);
font-weight: 400;
line-height: 1;
margin: 0 0 18px;
color: var(--text);
}
.wishlist-empty p {
max-width: 460px;
margin: 0 0 26px;
color: var(--muted);
line-height: 1.5;
}
@media (max-width: 1100px) {
.wishlist-section .container {
width: min(100% - 64px, 1240px);
}
.wishlist-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
.wishlist-section .container {
width: min(100% - 36px, 1240px);
}
.wishlist-head {
display: block;
}
.wishlist-head > span {
display: inline-flex;
margin-top: 16px;
}
.wishlist-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.wishlist-section .container {
width: min(100% - 28px, 1240px);
}
.wishlist-grid {
grid-template-columns: 1fr;
}
.wishlist-empty {
padding: 46px 22px;
}
}
/* =========================================================
FINAL ALIGN: BRANDS / NEW / DISCOUNTS / PRODUCT CARDS
========================================================= */
/* ---------- Global container line ---------- */
.page-hero .container,
.brands-hero .container,
.brands-section .container,
.catalog-hero .container,
.catalog-layout-final,
.catalog-layout,
.delivery-container,
.returns-container,
.privacy-container,
.contacts-elegant-container,
.about-container,
.offer-container {
width: min(100% - 140px, 1240px) !important;
margin-inline: auto !important;
}
/* ---------- Brands align ---------- */
.brands-hero,
.brands-section {
background: var(--bg) !important;
}
.brands-hero {
padding: 42px 0 26px !important;
}
.brands-section {
padding: 0 0 86px !important;
}
.brands-head-clean {
width: 100% !important;
}
.brands-letters-clean {
max-width: 760px !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.brands-grid {
width: 100% !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 24px !important;
justify-content: start !important;
align-items: start !important;
}
.brand-card-clean {
width: 100% !important;
min-width: 0 !important;
}
/* ---------- Product cards photo top gap fix everywhere ---------- */
.product-card {
overflow: hidden !important;
}
.product-card .product-media,
.product-media,
.product-card picture,
.product-card figure {
padding: 0 !important;
margin: 0 !important;
}
.product-card .product-media {
display: block !important;
overflow: hidden !important;
background: #f6ebe4 !important;
}
.product-card .product-media img,
.product-media img {
width: 100% !important;
height: 100% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center !important;
}
.product-card .product-media::before,
.product-card .product-media::after,
.product-media::before,
.product-media::after {
display: none !important;
content: none !important;
}
/* ---------- Catalog / New / Discounts shared layout ---------- */
.catalog-section {
background: var(--bg) !important;
padding: 0 0 92px !important;
}
.catalog-layout-final,
.catalog-layout {
display: grid !important;
grid-template-columns: 245px minmax(0, 1fr) !important;
gap: 34px !important;
align-items: start !important;
}
.catalog-products-area,
.catalog-layout > div {
min-width: 0 !important;
}
.catalog-products-area .product-grid,
.catalog-layout-final .product-grid,
.catalog-layout .product-grid,
.product-grid {
align-items: start !important;
}
/* только внутри каталога карточки ровной сеткой */
.catalog-layout-final .product-grid,
.catalog-layout .product-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 20px !important;
}
.catalog-layout-final .product-card,
.catalog-layout .product-card {
background: rgba(255, 247, 241, .72) !important;
border: 1px solid rgba(216, 191, 175, .82) !important;
}
.catalog-layout-final .product-media,
.catalog-layout .product-media {
aspect-ratio: 1 / 1.02 !important;
}
/* ---------- New / Discounts title becomes catalog title ---------- */
.catalog-hero,
.page-hero {
background: var(--bg) !important;
padding: 42px 0 34px !important;
margin: 0 !important;
}
.catalog-top-final,
.catalog-top {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
gap: 24px !important;
margin-bottom: 34px !important;
}
.page-title {
font-family: var(--serif) !important;
font-size: clamp(46px, 4.4vw, 70px) !important;
line-height: 1 !important;
font-weight: 400 !important;
margin: 0 0 16px !important;
color: var(--text) !important;
}
/* ---------- Filter clean ---------- */
.catalog-filter-panel,
.filters {
position: static !important;
top: auto !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
background: rgba(255, 247, 241, .64) !important;
border: 1px solid rgba(216, 191, 175, .78) !important;
box-shadow: none !important;
padding: 24px 22px 26px !important;
}
.catalog-filter-head {
display: flex !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 16px !important;
padding-bottom: 18px !important;
margin-bottom: 22px !important;
border-bottom: 1px solid rgba(216, 191, 175, .9) !important;
}
.catalog-filter-head h2 {
font-family: var(--serif) !important;
font-size: 32px !important;
font-weight: 400 !important;
line-height: 1 !important;
margin: 0 !important;
color: var(--text) !important;
}
.catalog-filter-head a {
color: var(--muted) !important;
font-size: 14px !important;
text-decoration: none !important;
border-bottom: 1px solid currentColor !important;
}
.catalog-filter-head a:hover {
color: var(--text) !important;
}
.catalog-filter-block,
.filters .filter-block {
padding: 0 0 24px !important;
margin: 0 0 24px !important;
border-bottom: 1px solid rgba(216, 191, 175, .64) !important;
}
.catalog-filter-block:last-child,
.filters .filter-block:last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}
.catalog-filter-block h3,
.filters .filter-block h3 {
font-family: var(--serif) !important;
font-size: 22px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
margin: 0 0 16px !important;
color: var(--text) !important;
}
/* ---------- Filter rows ---------- */
.catalog-filter-row,
.catalog-category-link,
.catalog-brand-link,
.catalog-category-child,
.catalog-subcategory-link {
min-height: 34px !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 30px !important;
align-items: center !important;
gap: 10px !important;
padding: 5px 8px !important;
color: var(--text) !important;
text-decoration: none !important;
border-radius: 7px !important;
font-size: 15px !important;
line-height: 1.16 !important;
transition: background .18s ease, color .18s ease, transform .18s ease !important;
}
.catalog-filter-row:hover,
.catalog-category-link:hover,
.catalog-brand-link:hover,
.catalog-category-child:hover,
.catalog-subcategory-link:hover {
background: rgba(234, 216, 203, .45) !important;
color: var(--text) !important;
}
.catalog-filter-row.is-active,
.catalog-category-link.is-active,
.catalog-brand-link.is-active,
.catalog-category-child.is-active,
.catalog-subcategory-link.is-active {
background: var(--camel) !important;
color: #fff !important;
font-weight: 600 !important;
}
.catalog-filter-row small,
.catalog-category-link small,
.catalog-brand-link small,
.catalog-category-child small,
.catalog-subcategory-link small,
.catalog-chip-list a small {
width: 26px !important;
height: 24px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(234, 216, 203, .78) !important;
color: var(--muted) !important;
border-radius: 999px !important;
font-family: var(--sans) !important;
font-size: 12px !important;
font-weight: 500 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
.catalog-filter-row.is-active small,
.catalog-category-link.is-active small,
.catalog-brand-link.is-active small,
.catalog-category-child.is-active small,
.catalog-subcategory-link.is-active small {
background: rgba(255, 255, 255, .22) !important;
color: #fff !important;
}
/* ---------- Category sublevels ---------- */
.catalog-category-groups,
.catalog-category-tree,
.catalog-brand-list {
display: grid !important;
gap: 4px !important;
}
.catalog-subcategory-list {
display: grid !important;
gap: 2px !important;
margin: 4px 0 8px !important;
}
.catalog-subcategory-link {
padding-left: calc(8px + (var(--category-depth, 1) * 18px)) !important;
font-size: 14px !important;
color: var(--muted) !important;
}
.catalog-category-root.has-active-child,
.catalog-subcategory-link.has-active-child {
background: rgba(234, 216, 203, .48) !important;
color: var(--text) !important;
}
/* ---------- Limited filters show more ---------- */
.catalog-limited-list .is-extra {
display: none !important;
}
.catalog-limited-list.is-expanded .is-extra {
display: grid !important;
}
.catalog-filter-more {
width: 100% !important;
height: 34px !important;
margin: 12px auto 0 !important;
border: 0 !important;
border-top: 1px solid rgba(216, 191, 175, .58) !important;
background: transparent !important;
color: var(--muted) !important;
font-size: 14px !important;
font-family: inherit !important;
cursor: pointer !important;
display: flex !important;
align-items: flex-end !important;
justify-content: center !important;
padding: 8px 0 0 !important;
}
.catalog-filter-more:hover {
color: var(--text) !important;
}
/* ---------- Price filter ---------- */
.catalog-price-filter {
display: grid !important;
gap: 12px !important;
}
.catalog-price-row {
display: grid !important;
grid-template-columns: 1fr 16px 1fr !important;
align-items: center !important;
gap: 8px !important;
}
.catalog-price-row span {
width: 12px !important;
height: 1px !important;
justify-self: center !important;
background: rgba(63, 48, 41, .32) !important;
}
.catalog-price-input {
width: 100% !important;
height: 40px !important;
border: 1px solid rgba(216, 191, 175, .9) !important;
background: rgba(255, 250, 247, .86) !important;
color: var(--text) !important;
padding: 0 10px !important;
outline: none !important;
font-size: 14px !important;
}
.catalog-price-input:focus {
border-color: var(--camel) !important;
box-shadow: 0 0 0 3px rgba(184, 150, 130, .12) !important;
}
.catalog-filter-apply {
height: 40px !important;
border: 1px solid var(--camel) !important;
background: var(--camel) !important;
color: #fff !important;
cursor: pointer !important;
border-radius: 7px !important;
font-size: 14px !important;
}
.catalog-filter-apply:hover {
background: var(--camel-dark) !important;
border-color: var(--camel-dark) !important;
}
/* ---------- Chips ---------- */
.catalog-chip-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.catalog-chip-list-vertical {
display: grid !important;
grid-template-columns: 1fr !important;
}
.catalog-chip-list a {
min-height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 7px 12px !important;
border: 1px solid rgba(216, 191, 175, .86) !important;
background: rgba(255, 250, 247, .62) !important;
color: var(--text) !important;
text-decoration: none !important;
border-radius: 999px !important;
font-size: 14px !important;
line-height: 1 !important;
}
.catalog-chip-list-vertical a {
justify-content: space-between !important;
border-radius: 7px !important;
}
.catalog-chip-list a:hover {
border-color: var(--camel) !important;
}
.catalog-chip-list a.is-active {
background: var(--camel) !important;
border-color: var(--camel) !important;
color: #fff !important;
}
/* ---------- Sort ---------- */
.catalog-sort,
#sort.input {
width: 215px !important;
height: 46px !important;
background: rgba(255, 247, 241, .76) !important;
border: 1px solid rgba(216, 191, 175, .9) !important;
color: var(--text) !important;
padding: 0 42px 0 16px !important;
font-size: 15px !important;
outline: none !important;
box-shadow: none !important;
}
.catalog-sort:focus,
#sort.input:focus {
border-color: var(--camel) !important;
box-shadow: 0 0 0 3px rgba(184, 150, 130, .12) !important;
}
/* ---------- Pagination ---------- */
.catalog-pagination {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
margin: 44px 0 0 !important;
}
.catalog-pagination a,
.catalog-pagination span {
width: 40px !important;
height: 40px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid rgba(216, 191, 175, .9) !important;
background: rgba(255, 247, 241, .62) !important;
color: var(--text) !important;
text-decoration: none !important;
font-family: var(--serif) !important;
font-size: 18px !important;
line-height: 1 !important;
}
.catalog-pagination a:hover,
.catalog-pagination a.is-active {
background: var(--camel) !important;
border-color: var(--camel) !important;
color: #fff !important;
}
.catalog-pagination span {
opacity: .38 !important;
pointer-events: none !important;
}
/* ---------- Wishlist drawer cards photo fix ---------- */
.wishlist-drawer .product-card .product-media,
.wishlist-drawer .product-media {
padding: 0 !important;
margin: 0 !important;
aspect-ratio: 1 / 1.02 !important;
overflow: hidden !important;
}
.wishlist-drawer .product-card .product-media img,
.wishlist-drawer .product-media img {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
object-position: center !important;
}
/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
.page-hero .container,
.brands-hero .container,
.brands-section .container,
.catalog-hero .container,
.catalog-layout-final,
.catalog-layout,
.delivery-container,
.returns-container,
.privacy-container,
.contacts-elegant-container,
.about-container,
.offer-container {
width: min(100% - 64px, 1240px) !important;
}
.catalog-layout-final,
.catalog-layout {
grid-template-columns: 235px minmax(0, 1fr) !important;
gap: 24px !important;
}
.catalog-layout-final .product-grid,
.catalog-layout .product-grid,
.brands-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
}
@media (max-width: 900px) {
.page-hero .container,
.brands-hero .container,
.brands-section .container,
.catalog-hero .container,
.catalog-layout-final,
.catalog-layout,
.delivery-container,
.returns-container,
.privacy-container,
.contacts-elegant-container,
.about-container,
.offer-container {
width: min(100% - 36px, 1240px) !important;
}
.catalog-layout-final,
.catalog-layout {
grid-template-columns: 1fr !important;
}
.catalog-layout-final .product-grid,
.catalog-layout .product-grid,
.brands-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.catalog-top-final,
.catalog-top {
flex-direction: column !important;
align-items: flex-start !important;
}
.catalog-top-actions,
.catalog-sort,
#sort.input {
width: 100% !important;
}
}
@media (max-width: 560px) {
.page-hero .container,
.brands-hero .container,
.brands-section .container,
.catalog-hero .container,
.catalog-layout-final,
.catalog-layout,
.delivery-container,
.returns-container,
.privacy-container,
.contacts-elegant-container,
.about-container,
.offer-container {
width: min(100% - 28px, 1240px) !important;
}
.catalog-layout-final .product-grid,
.catalog-layout .product-grid,
.brands-grid {
grid-template-columns: 1fr !important;
}
.page-title {
font-size: 42px !important;
}
}
/* =========================================================
PRODUCT PAGE — FINAL KAMIEL
gallery / options / tabs / related line
========================================================= */
.product-page {
background: var(--bg);
padding: 38px 0 92px;
}
.product-container {
width: min(100% - 140px, 1240px);
margin-inline: auto;
}
.product-breadcrumbs {
margin: 0 0 30px !important;
}
/* ---------- Main layout ---------- */
.product-main-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 540px;
gap: 44px;
align-items: start;
}
/* ---------- Gallery ---------- */
.product-gallery {
min-width: 0;
}
.product-main-image {
width: 100%;
aspect-ratio: 1 / 1;
background: #dec0af;
border: 1px solid rgba(216, 191, 175, .9);
overflow: hidden;
}
.product-main-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
.product-thumbs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 14px;
}
.product-thumbs button {
width: 70px;
height: 70px;
padding: 0;
border: 1px solid rgba(216, 191, 175, .95);
background: #fffaf7;
cursor: pointer;
overflow: hidden;
}
.product-thumbs button.active {
border-color: var(--camel);
box-shadow: 0 0 0 4px rgba(184, 150, 130, .18);
}
.product-thumbs img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* ---------- Summary ---------- */
.product-summary {
padding-top: 2px;
}
.product-brand {
margin-bottom: 10px;
color: var(--camel-dark);
text-transform: uppercase;
letter-spacing: .14em;
font-size: 12px;
font-weight: 600;
}
.product-summary h1 {
font-family: var(--serif);
font-size: clamp(44px, 4.6vw, 68px);
font-weight: 400;
line-height: .98;
margin: 0 0 18px;
color: var(--text);
}
.product-path {
color: var(--muted);
font-size: 16px;
line-height: 1.4;
margin-bottom: 8px;
}
.product-rating {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 14px;
color: var(--text);
}
.product-rating span {
color: var(--text);
}
.product-rating b {
font-weight: 500;
}
.product-rating small {
color: var(--muted);
font-size: 14px;
}
.product-price-row {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 20px;
}
.product-price {
font-size: 22px;
font-weight: 700;
color: var(--text);
}
.product-old-price {
color: var(--muted);
text-decoration: line-through;
font-size: 16px;
}
.product-discount {
min-height: 26px;
padding: 4px 8px;
background: var(--camel);
color: #fff;
font-size: 13px;
display: inline-flex;
align-items: center;
}
/* ---------- Options ---------- */
.product-options {
margin: 18px 0;
}
.product-option-label {
margin-bottom: 10px;
color: var(--muted);
font-size: 16px;
}
.product-option-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.product-option {
min-width: 44px;
height: 44px;
padding: 0 14px;
border: 1px solid rgba(216, 191, 175, .95);
background: rgba(255, 250, 247, .72);
color: var(--text);
cursor: pointer;
font-size: 16px;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.product-option:hover {
border-color: var(--camel);
}
.product-option.active {
background: var(--camel);
border-color: var(--camel);
color: #fff;
}
/* ---------- Qty / buttons ---------- */
.product-qty {
display: inline-grid;
grid-template-columns: 42px 48px 42px;
height: 42px;
margin: 0 0 16px;
border: 1px solid rgba(216, 191, 175, .95);
background: rgba(255, 250, 247, .72);
}
.product-qty button {
border: 0;
background: transparent;
cursor: pointer;
font-size: 18px;
color: var(--text);
}
.product-qty span {
display: grid;
place-items: center;
border-left: 1px solid rgba(216, 191, 175, .95);
border-right: 1px solid rgba(216, 191, 175, .95);
font-weight: 500;
}
.product-actions-main {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 24px;
}
.product-actions-main .btn {
height: 48px;
min-width: 160px;
border-radius: 7px;
}
.product-buy-now {
background: transparent;
border: 1px solid var(--camel);
color: var(--text);
}
.product-buy-now:hover {
background: var(--camel);
color: #fff;
}
.product-wish {
width: 48px;
height: 48px;
border: 1px solid rgba(216, 191, 175, .95);
background: rgba(255, 250, 247, .72);
color: var(--text);
border-radius: 7px;
font-size: 22px;
cursor: pointer;
}
.product-wish.active,
.product-wish:hover {
background: var(--camel);
border-color: var(--camel);
color: #fff;
}
/* ---------- Service box ---------- */
.product-service-box {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
border: 1px solid rgba(216, 191, 175, .95);
background: rgba(255, 247, 241, .68);
}
.product-service-item {
padding: 16px 18px;
border-right: 1px solid rgba(216, 191, 175, .7);
border-bottom: 1px solid rgba(216, 191, 175, .7);
}
.product-service-item:nth-child(2n) {
border-right: 0;
}
.product-service-item span {
display: block;
margin-bottom: 6px;
color: var(--muted);
font-size: 13px;
}
.product-service-item b {
color: var(--text);
font-weight: 500;
line-height: 1.25;
}
.product-service-note {
grid-column: 1 / -1;
padding: 16px 18px;
color: var(--muted);
line-height: 1.45;
font-size: 14px;
}
/* ---------- Tabs ---------- */
.product-tabs-section {
margin-top: 34px;
}
.product-tabs {
border: 1px solid rgba(216, 191, 175, .95);
background: rgba(255, 247, 241, .62);
}
.product-tab-buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid rgba(216, 191, 175, .95);
}
.product-tab-buttons button {
min-height: 54px;
border: 0;
border-right: 1px solid rgba(216, 191, 175, .95);
background: transparent;
color: var(--text);
cursor: pointer;
font-size: 15px;
}
.product-tab-buttons button:last-child {
border-right: 0;
}
.product-tab-buttons button.active {
background: var(--camel);
color: #fff;
}
.product-tab-panels {
padding: 28px 30px;
}
.product-tab-panel {
display: none;
}
.product-tab-panel.active {
display: block;
}
.product-tab-panel p {
margin: 0;
max-width: 900px;
color: var(--text);
line-height: 1.6;
}
.product-specs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.product-specs div {
padding: 16px;
border: 1px solid rgba(216, 191, 175, .72);
background: rgba(255, 250, 247, .58);
}
.product-specs span {
display: block;
margin-bottom: 8px;
color: var(--muted);
font-size: 13px;
}
.product-specs b {
color: var(--text);
font-weight: 500;
line-height: 1.35;
}
/* ---------- Related ---------- */
.product-related-section {
margin-top: 76px;
}
.product-related-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 28px;
}
.product-related-head h2 {
font-family: var(--serif);
font-size: clamp(42px, 4vw, 62px);
line-height: 1;
font-weight: 400;
margin: 0;
color: var(--text);
}
.product-related-actions {
display: flex;
align-items: center;
gap: 14px;
}
.product-related-arrow {
width: 30px;
height: 38px;
border: 0;
background: transparent;
color: var(--text);
font-family: var(--serif);
font-size: 38px;
line-height: 1;
cursor: pointer;
}
.product-related-arrow:hover {
opacity: .6;
}
.product-related-line {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
padding-bottom: 6px;
}
.product-related-line::-webkit-scrollbar {
display: none;
}
.product-related-line .product-card {
flex: 0 0 calc((100% - 72px) / 4);
width: calc((100% - 72px) / 4);
min-width: calc((100% - 72px) / 4);
max-width: calc((100% - 72px) / 4);
}
/* fix related card image top gap */
.product-related-line .product-media,
.product-related-line .product-card .product-media {
padding: 0 !important;
margin: 0 !important;
aspect-ratio: 1 / 1.02 !important;
overflow: hidden !important;
}
.product-related-line .product-media img,
.product-related-line .product-card .product-media img {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: cover !important;
object-position: center !important;
}
/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
.product-container {
width: min(100% - 64px, 1240px);
}
.product-main-layout {
grid-template-columns: 1fr;
}
.product-summary {
padding-top: 0;
}
.product-related-line .product-card {
flex-basis: calc((100% - 48px) / 3);
width: calc((100% - 48px) / 3);
min-width: calc((100% - 48px) / 3);
max-width: calc((100% - 48px) / 3);
}
}
@media (max-width: 820px) {
.product-container {
width: min(100% - 36px, 1240px);
}
.product-tab-buttons {
grid-template-columns: 1fr 1fr;
}
.product-tab-buttons button:nth-child(2n) {
border-right: 0;
}
.product-tab-buttons button {
border-bottom: 1px solid rgba(216, 191, 175, .75);
}
.product-specs {
grid-template-columns: 1fr 1fr;
}
.product-service-box {
grid-template-columns: 1fr;
}
.product-service-item {
border-right: 0;
}
.product-related-line .product-card {
flex-basis: calc((100% - 24px) / 2);
width: calc((100% - 24px) / 2);
min-width: calc((100% - 24px) / 2);
max-width: calc((100% - 24px) / 2);
}
}
@media (max-width: 560px) {
.product-page {
padding: 26px 0 70px;
}
.product-container {
width: min(100% - 28px, 1240px);
}
.product-summary h1 {
font-size: 42px;
}
.product-actions-main .btn {
width: 100%;
}
.product-wish {
width: 100%;
}
.product-tab-buttons {
grid-template-columns: 1fr;
}
.product-tab-buttons button {
border-right: 0;
}
.product-tab-panels {
padding: 22px;
}
.product-specs {
grid-template-columns: 1fr;
}
.product-related-line .product-card {
flex-basis: 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
}
}
/* PRODUCT PAGE CLEAN PATCH */
.product-summary .product-path,
.product-service-box {
display: none !important;
}
.product-characteristics-list {
display: grid;
gap: 10px;
}
.product-characteristics-list p {
margin: 0;
color: var(--text);
line-height: 1.55;
}
.product-characteristics-list b {
font-weight: 700;
}
.product-tab-panel {
display: none !important;
}
.product-tab-panel.active {
display: block !important;
}
.product-option-list {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.product-option {
min-width: 44px !important;
height: 44px !important;
padding: 0 14px !important;
border: 1px solid rgba(216, 191, 175, .95) !important;
background: rgba(255, 250, 247, .72) !important;
color: var(--text) !important;
cursor: pointer !important;
font-size: 16px !important;
}
.product-option.active {
background: var(--camel) !important;
border-color: var(--camel) !important;
color: #fff !important;
}
.product-related-line {
display: flex !important;
gap: 24px !important;
overflow-x: auto !important;
scroll-behavior: smooth !important;
scrollbar-width: none !important;
}
.product-related-line::-webkit-scrollbar {
display: none !important;
}
.product-related-line .product-card {
flex: 0 0 calc((100% - 72px) / 4) !important;
width: calc((100% - 72px) / 4) !important;
min-width: calc((100% - 72px) / 4) !important;
max-width: calc((100% - 72px) / 4) !important;
}
@media (max-width: 1100px) {
.product-related-line .product-card {
flex-basis: calc((100% - 48px) / 3) !important;
width: calc((100% - 48px) / 3) !important;
min-width: calc((100% - 48px) / 3) !important;
max-width: calc((100% - 48px) / 3) !important;
}
}
@media (max-width: 820px) {
.product-related-line .product-card {
flex-basis: calc((100% - 24px) / 2) !important;
width: calc((100% - 24px) / 2) !important;
min-width: calc((100% - 24px) / 2) !important;
max-width: calc((100% - 24px) / 2) !important;
}
}
@media (max-width: 560px) {
.product-related-line .product-card {
flex-basis: 100% !important;
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
}
/* CATALOG SORT — small elegant fix */
.catalog-top-final,
.catalog-top {
align-items: flex-start !important;
}
.catalog-top-actions {
padding-top: 18px !important;
}
.catalog-sort,
#sort.input {
width: 220px !important;
height: 48px !important;
padding: 0 42px 0 18px !important;
background: rgba(255, 247, 241, .72) !important;
border: 1px solid rgba(184, 150, 130, .45) !important;
border-radius: 7px !important;
color: var(--text) !important;
font-size: 15px !important;
line-height: 48px !important;
outline: none !important;
box-shadow: none !important;
cursor: pointer !important;
transform: translateY(6px);
}
.catalog-sort:hover,
#sort.input:hover {
border-color: var(--camel) !important;
background: rgba(255, 250, 247, .88) !important;
}
.catalog-sort:focus,
#sort.input:focus {
border-color: var(--camel) !important;
box-shadow: 0 0 0 3px rgba(184, 150, 130, .12) !important;
}
@media (max-width: 900px) {
.catalog-top-actions {
padding-top: 0 !important;
}
.catalog-sort,
#sort.input {
width: 100% !important;
transform: none !important;
}
}
/* SORT SELECT — move native arrow left only */
/* SORT SELECT — final position */
.catalog-top-actions,
.catalog-sort-wrap {
position: relative;
}
.catalog-sort,
#sort.input {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: none !important;
padding-right: 6px !important;
}
.catalog-top-actions::after {
content: "";
position: absolute;
right: 24px;
top: 39px;
width: 13px;
height: 13px;
border-right: 2px solid var(--text);
border-bottom: 2px solid var(--text);
transform: rotate(45deg);
pointer-events: none;
opacity: .88;
}
/* =========================================================
CHECKOUT PAGE — KAMIEL CLEAN
========================================================= */
.checkout-page {
padding: 42px 0 70px;
}
.checkout-container {
width: min(1120px, calc(100% - 80px));
margin: 0 auto;
}
.checkout-title {
margin: 28px 0 48px;
}
.checkout-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 28px;
align-items: start;
}
.checkout-form,
.checkout-summary {
background: rgba(255, 247, 241, .72);
border: 1px solid rgba(216, 191, 175, .86);
}
.checkout-form {
padding: 24px;
}
.checkout-block {
padding-bottom: 28px;
margin-bottom: 26px;
border-bottom: 1px solid rgba(216, 191, 175, .82);
}
.checkout-block:last-of-type {
margin-bottom: 0;
}
.checkout-block h2 {
margin: 0 0 18px;
font-family: var(--serif);
font-size: 24px;
line-height: 1;
font-weight: 400;
color: var(--text);
}
.checkout-block h2 span {
font-family: inherit;
}
.checkout-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 22px;
}
.checkout-form label {
display: grid;
gap: 7px;
}
.checkout-form label > span,
.checkout-packaging > span {
color: var(--muted);
font-size: 14px;
line-height: 1.2;
}
.checkout-form input[type="text"],
.checkout-form input[type="tel"],
.checkout-form input[type="email"],
.checkout-form textarea,
.checkout-form select,
.checkout-summary select {
width: 100%;
min-height: 48px;
border: 1px solid rgba(216, 191, 175, .9);
background: rgba(255, 255, 255, .78);
padding: 0 14px;
color: var(--text);
font: inherit;
outline: none;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.checkout-form textarea {
min-height: 104px;
padding: 12px 14px;
resize: vertical;
}
.checkout-form input:focus,
.checkout-form textarea:focus,
.checkout-form select:focus,
.checkout-summary select:focus {
border-color: var(--camel);
background: #fff;
box-shadow: 0 0 0 3px rgba(184, 150, 130, .12);
}
.checkout-full {
margin-top: 16px;
}
.checkout-radio-row,
.checkout-delivery-tabs {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-bottom: 18px;
}
.checkout-radio-row label,
.checkout-delivery-tabs label,
.checkout-agreements label {
display: inline-flex;
grid-template-columns: none;
align-items: center;
gap: 8px;
color: var(--text);
cursor: pointer;
}
.checkout-radio-row input,
.checkout-delivery-tabs input,
.checkout-agreements input {
width: 15px;
height: 15px;
accent-color: var(--camel);
}
.delivery-panel {
display: none;
}
.delivery-panel.is-active {
display: block;
}
.checkout-form small {
display: block;
margin-top: 2px;
color: var(--muted);
font-size: 12px;
line-height: 1.3;
}
.checkout-note {
margin: 16px 0 0;
color: var(--muted);
line-height: 1.45;
}
.pickup-box {
padding: 18px 20px;
background: rgba(234, 216, 203, .34);
border: 1px solid rgba(216, 191, 175, .84);
}
.pickup-box span {
display: block;
margin-bottom: 7px;
color: var(--muted);
font-size: 13px;
}
.pickup-box strong {
display: block;
margin-bottom: 8px;
color: var(--text);
font-size: 17px;
}
.pickup-box p {
margin: 0;
color: var(--muted);
line-height: 1.45;
}
.payment-box {
padding: 16px 18px;
background: rgba(234, 216, 203, .28);
border: 1px solid rgba(216, 191, 175, .72);
}
.payment-box strong {
display: block;
margin-bottom: 6px;
color: var(--text);
}
.payment-box p {
margin: 0;
color: var(--muted);
}
.checkout-agreements {
display: grid;
gap: 9px;
margin: 0 0 24px;
}
.checkout-submit {
width: 100%;
min-height: 48px;
}
/* summary */
.checkout-summary {
position: sticky;
top: 92px;
padding: 22px;
}
.checkout-summary h2 {
margin: 0 0 18px;
font-family: var(--serif);
font-size: 24px;
font-weight: 400;
color: var(--text);
}
.checkout-summary-list {
display: grid;
gap: 13px;
margin-bottom: 18px;
}
.checkout-summary-item {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: start;
}
.checkout-summary-item strong {
display: block;
margin-bottom: 5px;
color: var(--text);
line-height: 1.25;
}
.checkout-summary-item span {
display: block;
color: var(--muted);
font-size: 13px;
line-height: 1.3;
}
.checkout-summary-item b {
color: var(--text);
white-space: nowrap;
}
.checkout-packaging {
display: grid;
gap: 8px;
padding-top: 16px;
margin-top: 4px;
border-top: 1px solid rgba(216, 191, 175, .82);
}
.checkout-packaging select {
height: 48px;
padding: 0 42px 0 14px;
appearance: none;
-webkit-appearance: none;
background-image:
linear-gradient(45deg, transparent 50%, var(--text) 50%),
linear-gradient(135deg, var(--text) 50%, transparent 50%);
background-position:
calc(100% - 20px) 20px,
calc(100% - 14px) 20px;
background-size:
6px 6px,
6px 6px;
background-repeat: no-repeat;
}
.checkout-summary-total {
display: flex;
justify-content: space-between;
gap: 16px;
padding-top: 18px;
margin-top: 18px;
border-top: 1px solid rgba(216, 191, 175, .82);
}
.checkout-summary-total span,
.checkout-summary-total strong {
color: var(--text);
font-weight: 700;
}
.checkout-empty-text {
margin: 0;
color: var(--muted);
}
/* native select dropdown color on supported browsers */
.checkout-summary select option {
background: #fff7f1;
color: var(--text);
}
/* responsive */
@media (max-width: 980px) {
.checkout-container {
width: min(100% - 36px, 1120px);
}
.checkout-layout {
grid-template-columns: 1fr;
}
.checkout-summary {
position: static;
}
}
@media (max-width: 640px) {
.checkout-title {
font-size: 44px;
margin-bottom: 34px;
}
.checkout-form {
padding: 20px;
}
.checkout-grid {
grid-template-columns: 1fr;
}
.checkout-radio-row,
.checkout-delivery-tabs {
gap: 12px;
flex-direction: column;
}
}
/* =========================================================
FINAL FIX: product images must be shown fully, not cropped
========================================================= */
/* карточки товаров: главная, каталог, новинки, скидки, избранное */
.product-card .product-media,
.product-media {
background: #fff !important;
display: grid !important;
place-items: center !important;
overflow: hidden !important;
}
.product-card .product-media img,
.product-media img,
.catalog-layout-final .product-media img,
.catalog-layout .product-media img,
.product-related-line .product-media img,
.wishlist-drawer .product-media img {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: contain !important;
object-position: center center !important;
padding: 22px !important;
margin: 0 !important;
background: #fff !important;
transform: none !important;
}
/* hover не должен увеличивать и обрезать товар */
.product-card:hover img,
.product-related-line .product-card:hover img,
.wishlist-drawer .product-card:hover img {
transform: none !important;
}
/* детальная страница товара */
.product-main-image {
background: #fff !important;
display: grid !important;
place-items: center !important;
overflow: hidden !important;
}
.product-main-image img {
width: 100% !important;
height: 100% !important;
display: block !important;
object-fit: contain !important;
object-position: center center !important;
padding: 34px !important;
margin: 0 !important;
background: #fff !important;
}
/* миниатюры в деталке */
.product-thumbs button {
background: #fff !important;
}
.product-thumbs img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
padding: 6px !important;
background: #fff !important;
}
/* миниатюры в корзине */
.cart-drawer-img {
background: #fff !important;
}
.cart-drawer-img img {
object-fit: contain !important;
object-position: center center !important;
padding: 8px !important;
background: #fff !important;
}
/* =========================================================
FINAL PRODUCT IMAGE AIR FIX
одинаковые отступы у фото товара сверху/снизу/слева/справа
========================================================= */
/* карточки товара */
.product-card .product-media,
.catalog-layout-final .product-card .product-media,
.catalog-layout .product-card .product-media,
.home-product-carousel-fixed .product-card .product-media,
.product-related-line .product-card .product-media,
.wishlist-grid .product-card .product-media,
.wishlist-drawer .product-card .product-media {
background: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
padding: 22px !important;
box-sizing: border-box !important;
}
/* сама картинка внутри карточки */
.product-card .product-media img,
.catalog-layout-final .product-card .product-media img,
.catalog-layout .product-card .product-media img,
.home-product-carousel-fixed .product-card .product-media img,
.product-related-line .product-card .product-media img,
.wishlist-grid .product-card .product-media img,
.wishlist-drawer .product-card .product-media img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
transform: none !important;
}
/* чтобы hover не увеличивал и не резал товар */
.product-card:hover .product-media img,
.product-related-line .product-card:hover .product-media img,
.wishlist-drawer .product-card:hover .product-media img {
transform: none !important;
}
/* детальная страница — большой блок */
.product-main-image {
background: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
padding: 48px !important;
box-sizing: border-box !important;
}
/* картинка в детальной */
.product-main-image img {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
transform: none !important;
}
/* thumbnails снизу */
.product-thumbs button {
background: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px !important;
box-sizing: border-box !important;
}
.product-thumbs img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* корзина */
.cart-drawer-img {
background: #fff !important;
padding: 8px !important;
box-sizing: border-box !important;
}
.cart-drawer-img img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center center !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
}
/* =========================================================
FINAL FIX: equal product cards + buttons aligned
========================================================= */
.product-card {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.product-card .product-link {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
.product-card .product-info:not(.card-actions) {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
/* фиксируем высоты текстов, чтобы карточки были ровные */
.product-card .brand {
min-height: 16px !important;
}
.product-card .product-title {
min-height: 44px !important;
max-height: 44px !important;
overflow: hidden !important;
}
.product-card .product-path {
min-height: 48px !important;
max-height: 48px !important;
overflow: hidden !important;
}
.product-card .muted {
min-height: 22px !important;
}
.product-card .price-row {
min-height: 28px !important;
margin-top: 8px !important;
margin-bottom: 0 !important;
}
/* кнопка всегда внизу карточки */
.product-card .card-actions {
margin-top: auto !important;
padding-top: 10px !important;
}
.product-card .card-actions .btn,
.product-card .btn-full {
height: 46px !important;
min-height: 46px !important;
width: 100% !important;
}
/* сетка выравнивает карточки по высоте */
.product-grid,
.home-product-carousel-fixed,
.product-related-line,
.wishlist-grid {
align-items: stretch !important;
}
/* =========================================================
HOME CATEGORIES — SMALL CARD, FULL IMAGE
========================================================= */
.home-category-track {
display: flex !important;
gap: 26px !important;
align-items: stretch !important;
overflow-x: auto !important;
scroll-behavior: smooth !important;
scrollbar-width: none !important;
padding-bottom: 8px !important;
}
.home-category-track::-webkit-scrollbar {
display: none !important;
}
/* сама карточка меньше */
.home-category-card {
flex: 0 0 224px !important;
width: 224px !important;
min-width: 224px !important;
max-width: 224px !important;
height: 150px !important;
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
background: var(--camel) !important;
border: 0 !important;
overflow: hidden !important;
text-decoration: none !important;
color: #fff !important;
transition: transform .22s ease, box-shadow .22s ease !important;
}
/* верх с фоткой */
.home-category-card .home-category-image {
width: 100% !important;
height: 115px !important;
min-height: 115px !important;
display: block !important;
overflow: hidden !important;
padding: 0 !important;
margin: 0 !important;
background: #d8b7a8 !important;
}
/* если вдруг img стоит напрямую */
.home-category-card > img {
width: 100% !important;
height: 115px !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center !important;
}
/* картинка внутри */
.home-category-card .home-category-image img {
width: 100% !important;
height: 100% !important;
display: block !important;
padding: 0 !important;
margin: 0 !important;
object-fit: cover !important;
object-position: center !important;
transform: none !important;
transition: transform .28s ease, filter .28s ease !important;
}
/* нижняя плашка с текстом */
.home-category-card .home-category-title,
.home-category-card > span:last-child {
width: 100% !important;
height: 35px !important;
min-height: 35px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 10px !important;
margin: 0 !important;
background: var(--camel) !important;
color: #fff !important;
font-family: var(--serif) !important;
font-size: 21px !important;
line-height: 1 !important;
font-weight: 400 !important;
text-align: center !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* hover нормальный, без огромного увеличения */
.home-category-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 28px rgba(63, 48, 41, .12) !important;
}
.home-category-card:hover .home-category-image img,
.home-category-card:hover > img {
transform: scale(1.04) !important;
filter: saturate(1.04) contrast(1.02) !important;
}
.home-category-card:hover .home-category-title,
.home-category-card:hover > span:last-child {
background: var(--camel-dark) !important;
}
/* планшет */
@media (max-width: 900px) {
.home-category-card {
flex-basis: 210px !important;
width: 210px !important;
min-width: 210px !important;
max-width: 210px !important;
height: 145px !important;
}
.home-category-card .home-category-image,
.home-category-card > img {
height: 110px !important;
min-height: 110px !important;
}
.home-category-card .home-category-title,
.home-category-card > span:last-child {
height: 35px !important;
min-height: 35px !important;
font-size: 20px !important;
}
}
/* мобилка */
@media (max-width: 560px) {
.home-category-card {
flex-basis: 74vw !important;
width: 74vw !important;
min-width: 74vw !important;
max-width: 74vw !important;
height: 170px !important;
}
.home-category-card .home-category-image,
.home-category-card > img {
height: 130px !important;
min-height: 130px !important;
}
.home-category-card .home-category-title,
.home-category-card > span:last-child {
height: 40px !important;
min-height: 40px !important;
font-size: 22px !important;
}
}
/* Wishlist drawer text fix */
.wishlist-drawer .product-card,
.wishlist-drawer .product-card * {
color: #3b2b27;
}
.wishlist-drawer .product-card .brand,
.wishlist-drawer .product-card .product-brand,
.wishlist-drawer .product-card .product-card-brand {
color: #8a746b;
}
.wishlist-drawer .product-card h3,
.wishlist-drawer .product-card .product-title,
.wishlist-drawer .product-card .product-card-title,
.wishlist-drawer .product-card a {
color: #3b2b27;
}
.wishlist-drawer .product-card .product-price,
.wishlist-drawer .product-card .price,
.wishlist-drawer .product-card b,
.wishlist-drawer .product-card strong {
color: #2f2522;
}
.wishlist-drawer .product-card .muted,
.wishlist-drawer .product-card .category-path,
.wishlist-drawer .product-card .product-category {
color: #7d6a62;
}
.wishlist-drawer .product-card .btn,
.wishlist-drawer .product-card button {
color: #ffffff;
}
/* =========================================================
RETURNS PAGE — note buttons spacing fix
========================================================= */
.returns-note-links {
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
margin-top: 18px !important;
}
.returns-note-links .btn {
width: 100% !important;
min-height: 46px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
}
/* если хочешь на большом экране кнопки рядом, но с отступом */
@media (min-width: 900px) {
.returns-note-links {
flex-direction: column !important;
}
}
/* =========================================================
CHECKOUT NOVA POST — FINAL UI FIX
========================================================= */
.checkout-main-delivery,
.checkout-delivery-tabs {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
margin: 12px 0 18px !important;
}
.checkout-main-delivery label,
.checkout-delivery-tabs label {
min-height: 42px !important;
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
padding: 10px 16px !important;
border: 1px solid rgba(181, 139, 118, .38) !important;
background: rgba(255, 250, 246, .55) !important;
color: #6f5b52 !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease !important;
}
.checkout-main-delivery label:hover,
.checkout-delivery-tabs label:hover {
border-color: #b9947f !important;
transform: translateY(-1px) !important;
}
.checkout-main-delivery label:has(input:checked),
.checkout-delivery-tabs label:has(input:checked) {
background: #b9947f !important;
border-color: #b9947f !important;
color: #fff !important;
}
.checkout-main-delivery input,
.checkout-delivery-tabs input {
width: 15px !important;
height: 15px !important;
accent-color: #b9947f !important;
}
.delivery-panel {
display: none !important;
}
.delivery-panel.is-active {
display: block !important;
}
.checkout-nova-fields {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 16px 22px !important;
margin-top: 14px !important;
}
.checkout-nova-fields.is-hidden {
display: none !important;
}
.checkout-field {
min-width: 0 !important;
}
.checkout-field label {
display: grid !important;
gap: 7px !important;
}
.checkout-field label > span {
color: #7e6a61 !important;
font-size: 14px !important;
line-height: 1.2 !important;
}
.checkout-field input {
width: 100% !important;
min-height: 48px !important;
border: 1px solid rgba(216, 191, 175, .9) !important;
background: rgba(255, 255, 255, .78) !important;
padding: 0 14px !important;
color: #3d2e2a !important;
font: inherit !important;
outline: none !important;
transition: border-color .18s ease, background .18s ease, box-shadow .18s ease !important;
}
.checkout-field input:focus {
border-color: #b9947f !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(184, 150, 130, .12) !important;
}
.autocomplete-field {
position: relative !important;
}
.checkout-autocomplete {
position: absolute !important;
top: calc(100% + 6px) !important;
left: 0 !important;
right: 0 !important;
z-index: 200 !important;
display: none !important;
max-height: 260px !important;
overflow-y: auto !important;
background: #fff8f3 !important;
border: 1px solid rgba(181, 139, 118, .45) !important;
box-shadow: 0 18px 42px rgba(60, 45, 39, .16) !important;
padding: 6px !important;
}
.checkout-autocomplete.is-open {
display: grid !important;
gap: 4px !important;
}
.checkout-autocomplete button {
width: 100% !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 12px !important;
align-items: center !important;
border: 0 !important;
background: transparent !important;
padding: 11px 12px !important;
color: #3d2e2a !important;
text-align: left !important;
cursor: pointer !important;
border-radius: 6px !important;
transition: background .16s ease, color .16s ease !important;
}
.checkout-autocomplete button:hover {
background: #b9947f !important;
color: #fff !important;
}
.checkout-autocomplete button span {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 14px !important;
line-height: 1.25 !important;
}
.checkout-autocomplete button small {
color: inherit !important;
opacity: .78 !important;
font-size: 12px !important;
white-space: nowrap !important;
}
.checkout-autocomplete-empty {
padding: 12px 14px !important;
color: #7e6a61 !important;
font-size: 14px !important;
line-height: 1.35 !important;
}
.checkout-form small,
.checkout-field small {
display: block !important;
margin-top: 7px !important;
color: #7e6a61 !important;
font-size: 13px !important;
line-height: 1.35 !important;
}
.checkout-note {
margin: 20px 0 0 !important;
padding: 14px 16px !important;
background: rgba(255, 250, 246, .62) !important;
border: 1px solid rgba(181, 139, 118, .32) !important;
color: #6f5b52 !important;
line-height: 1.45 !important;
}
.checkout-summary-row {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
padding: 16px 0 !important;
border-top: 1px solid rgba(216, 191, 175, .82) !important;
}
.checkout-summary-row span {
color: #3d2e2a !important;
font-weight: 600 !important;
}
.checkout-summary-row strong {
color: #3d2e2a !important;
font-weight: 700 !important;
white-space: nowrap !important;
}
.checkout-summary-row-total span,
.checkout-summary-row-total strong {
font-size: 17px !important;
}
@media (max-width: 760px) {
.checkout-nova-fields {
grid-template-columns: 1fr !important;
}
.checkout-main-delivery,
.checkout-delivery-tabs {
flex-direction: column !important;
gap: 10px !important;
}
.checkout-main-delivery label,
.checkout-delivery-tabs label {
width: 100% !important;
}
.checkout-autocomplete {
position: static !important;
margin-top: 6px !important;
max-height: 220px !important;
}
}
/* =========================================================
CHECKOUT DELIVERY — SOFT FINAL STYLE
========================================================= */
/* верхние кнопки Нова Пошта / Самовивіз */
.checkout-main-delivery label,
.checkout-delivery-tabs label {
min-height: 40px !important;
padding: 9px 15px !important;
background: rgba(255, 250, 246, .62) !important;
border: 1px solid rgba(181, 139, 118, .34) !important;
color: #6f5b52 !important;
border-radius: 8px !important;
box-shadow: none !important;
transform: none !important;
}
/* активная кнопка — мягче, не такая тёмная */
.checkout-main-delivery label:has(input:checked),
.checkout-delivery-tabs label:has(input:checked) {
background: rgba(185, 148, 127, .22) !important;
border-color: rgba(185, 148, 127, .75) !important;
color: #3d2e2a !important;
font-weight: 600 !important;
}
/* hover аккуратнее */
.checkout-main-delivery label:hover,
.checkout-delivery-tabs label:hover {
background: rgba(185, 148, 127, .14) !important;
border-color: rgba(185, 148, 127, .55) !important;
color: #3d2e2a !important;
transform: none !important;
}
/* radio внутри */
.checkout-main-delivery input,
.checkout-delivery-tabs input {
accent-color: #8f6d5c !important;
}
/* чуть меньше расстояния между группами */
.checkout-main-delivery {
margin-bottom: 12px !important;
}
.checkout-delivery-tabs {
margin-top: 4px !important;
margin-bottom: 16px !important;
}
/* поля доставки */
.checkout-nova-fields {
gap: 14px 22px !important;
margin-top: 10px !important;
}
.checkout-field input {
min-height: 46px !important;
background: rgba(255, 255, 255, .72) !important;
border: 1px solid rgba(216, 191, 175, .85) !important;
border-radius: 0 !important;
}
.checkout-field input:focus {
background: #fff !important;
border-color: rgba(185, 148, 127, .9) !important;
box-shadow: 0 0 0 3px rgba(185, 148, 127, .10) !important;
}
/* подсказки под input */
.checkout-form small,
.checkout-field small {
margin-top: 6px !important;
color: #8a746b !important;
font-size: 12.5px !important;
}
/* блок заметки */
.checkout-note {
margin-top: 18px !important;
padding: 13px 15px !important;
background: rgba(255, 250, 246, .50) !important;
border: 1px solid rgba(216, 191, 175, .72) !important;
color: #6f5b52 !important;
font-size: 15px !important;
}
/* =========================================================
CHECKOUT AUTOCOMPLETE — SHOW FULL DIVISIONS
========================================================= */
.autocomplete-field {
position: relative !important;
}
/* выпадающий список шире, чтобы видно было полное отделение */
.checkout-autocomplete {
top: calc(100% + 6px) !important;
left: 0 !important;
right: auto !important;
width: min(620px, 92vw) !important;
max-height: 360px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background: #fff8f3 !important;
border: 1px solid rgba(181, 139, 118, .42) !important;
box-shadow: 0 18px 46px rgba(60, 45, 39, .14) !important;
padding: 7px !important;
border-radius: 0 !important;
}
/* если dropdown у правого поля — пусть раскрывается влево, чтобы не вылезал за форму */
[data-nova-warehouse-dropdown] {
left: auto !important;
right: 0 !important;
}
/* строки внутри dropdown */
.checkout-autocomplete button {
min-height: 48px !important;
display: block !important;
width: 100% !important;
padding: 11px 13px !important;
background: transparent !important;
border: 0 !important;
border-radius: 6px !important;
color: #3d2e2a !important;
text-align: left !important;
}
/* текст больше НЕ обрезается в одну строку */
.checkout-autocomplete button span {
display: block !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: unset !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 500 !important;
}
/* категория/доп текст */
.checkout-autocomplete button small {
display: block !important;
margin-top: 4px !important;
white-space: normal !important;
color: #8a746b !important;
opacity: 1 !important;
font-size: 12px !important;
line-height: 1.25 !important;
}
/* hover и выбранная строка мягче */
.checkout-autocomplete button:hover,
.checkout-autocomplete button:focus {
background: rgba(185, 148, 127, .14) !important;
color: #3d2e2a !important;
}
.checkout-autocomplete button:hover small,
.checkout-autocomplete button:focus small {
color: #6f5b52 !important;
}
/* empty */
.checkout-autocomplete-empty {
padding: 13px 14px !important;
color: #7e6a61 !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
/* scrollbar аккуратный */
.checkout-autocomplete::-webkit-scrollbar {
width: 8px !important;
}
.checkout-autocomplete::-webkit-scrollbar-track {
background: rgba(216, 191, 175, .22) !important;
}
.checkout-autocomplete::-webkit-scrollbar-thumb {
background: rgba(185, 148, 127, .55) !important;
border-radius: 999px !important;
}
.checkout-autocomplete::-webkit-scrollbar-thumb:hover {
background: rgba(185, 148, 127, .75) !important;
}
/* на мобилке dropdown обычный по ширине поля */
@media (max-width: 760px) {
.checkout-autocomplete,
[data-nova-warehouse-dropdown] {
position: static !important;
width: 100% !important;
max-height: 300px !important;
margin-top: 6px !important;
}
}
.checkout-nova-fields.is-hidden,
[data-nova-warehouse-fields].is-hidden,
[data-nova-courier-fields].is-hidden {
display: none !important;
}
.checkout-nova-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 22px;
margin-top: 14px;
}
.checkout-nova-fields .checkout-full {
grid-column: 1 / -1;
}
.checkout-radio-row,
.checkout-delivery-tabs {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 14px 0;
}
.checkout-radio-row label,
.checkout-delivery-tabs label {
min-height: 44px;
padding: 0 18px;
border: 1px solid #dec5b8;
border-radius: 8px;
background: rgba(255, 255, 255, 0.38);
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
color: #6d5850;
font-weight: 600;
transition: border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.checkout-radio-row label:has(input:checked),
.checkout-delivery-tabs label:has(input:checked) {
background: rgba(190, 153, 132, 0.22);
border-color: #bd9984;
color: #4b3832;
box-shadow: 0 8px 20px rgba(99, 70, 57, 0.08);
}
.checkout-radio-row input,
.checkout-delivery-tabs input {
accent-color: #bd9984;
}
.delivery-panel {
display: none;
}
.delivery-panel.is-active {
display: block;
}
.autocomplete-field {
position: relative;
}
.checkout-autocomplete {
display: none;
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 30;
max-height: 320px;
overflow-y: auto;
background: #fffaf6;
border: 1px solid #dec5b8;
border-radius: 8px;
box-shadow: 0 18px 40px rgba(67, 43, 33, 0.18);
}
.checkout-autocomplete.is-open {
display: block;
}
.checkout-autocomplete button {
width: 100%;
border: 0;
background: transparent;
padding: 12px 14px;
text-align: left;
cursor: pointer;
color: #4b3832;
display: block;
}
.checkout-autocomplete button:hover {
background: rgba(190, 153, 132, 0.18);
}
.checkout-autocomplete button span {
display: block;
font-weight: 600;
line-height: 1.35;
}
.checkout-autocomplete button small {
display: block;
margin-top: 4px;
color: #8a7166;
line-height: 1.25;
}
.checkout-autocomplete-empty {
padding: 14px;
color: #8a7166;
}
.checkout-note {
margin-top: 16px;
padding: 14px 16px;
border: 1px solid #ead5ca;
background: rgba(255, 255, 255, 0.35);
color: #6d5850;
line-height: 1.45;
}
.checkout-submit:disabled {
opacity: 0.65;
cursor: not-allowed;
}
@media (max-width: 760px) {
.checkout-nova-fields {
grid-template-columns: 1fr;
gap: 14px;
}
.checkout-radio-row,
.checkout-delivery-tabs {
flex-direction: column;
gap: 10px;
}
.checkout-radio-row label,
.checkout-delivery-tabs label {
width: 100%;
justify-content: flex-start;
}
.checkout-autocomplete {
max-height: 260px;
}
}
.checkout-nova-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 22px;
margin-top: 16px;
}
.checkout-nova-fields.is-hidden {
display: none !important;
}
.checkout-field-full {
grid-column: 1 / -1;
}
.checkout-field,
.autocomplete-field {
position: relative;
min-width: 0;
}
.checkout-field label,
.autocomplete-field label {
display: block;
}
.checkout-field input,
.autocomplete-field input {
width: 100%;
box-sizing: border-box;
}
.checkout-autocomplete {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
z-index: 80;
display: none;
width: 100%;
max-height: 260px;
overflow-y: auto;
background: #fffaf6;
border: 1px solid rgba(183, 143, 120, 0.35);
box-shadow: 0 18px 45px rgba(80, 50, 35, 0.18);
}
.checkout-autocomplete.is-open {
display: block;
}
.checkout-autocomplete button {
display: block;
width: 100%;
padding: 12px 14px;
border: 0;
border-bottom: 1px solid rgba(183, 143, 120, 0.16);
background: transparent;
text-align: left;
cursor: pointer;
color: #4b3832;
font-size: 14px;
line-height: 1.35;
}
.checkout-autocomplete button:hover {
background: rgba(188, 151, 128, 0.18);
}
.checkout-autocomplete button span {
display: block;
max-width: 100%;
white-space: normal;
overflow: visible;
text-overflow: unset;
font-weight: 600;
}
.checkout-autocomplete button small {
display: block;
margin-top: 4px;
color: #8a7066;
font-size: 12px;
line-height: 1.3;
}
.checkout-autocomplete-empty {
padding: 14px;
color: #8a7066;
font-size: 14px;
}
.checkout-radio-row,
.checkout-delivery-tabs {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.checkout-radio-row label,
.checkout-delivery-tabs label {
min-width: 155px;
padding: 12px 18px;
border: 1px solid rgba(183, 143, 120, 0.35);
border-radius: 8px;
background: rgba(255, 250, 246, 0.65);
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
color: #6f584f;
font-weight: 600;
transition: 0.18s ease;
}
.checkout-radio-row label:has(input:checked),
.checkout-delivery-tabs label:has(input:checked) {
background: rgba(188, 151, 128, 0.28);
border-color: rgba(153, 111, 88, 0.55);
color: #4b3832;
}
.checkout-note {
margin-top: 18px;
padding: 14px 16px;
border: 1px solid rgba(183, 143, 120, 0.25);
background: rgba(255, 250, 246, 0.55);
color: #6f584f;
font-size: 15px;
line-height: 1.45;
}
@media (max-width: 768px) {
.checkout-nova-fields {
grid-template-columns: 1fr;
gap: 12px;
}
.checkout-radio-row,
.checkout-delivery-tabs {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.checkout-radio-row label,
.checkout-delivery-tabs label {
width: 100%;
min-width: 0;
}
.checkout-autocomplete {
max-height: 220px;
}
}
/* =========================
CHECKOUT NOVA POST FIX
========================= */
.checkout-radio-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 14px 0 16px;
}
.checkout-radio-row label {
min-width: 160px;
height: 46px;
padding: 0 18px;
border: 1px solid #dcc4b5;
background: rgba(255, 255, 255, 0.45);
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
color: #71594f;
font-weight: 600;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.checkout-radio-row label:has(input:checked) {
background: #e6d3c5;
border-color: #c7a58f;
color: #4c3830;
}
.checkout-radio-row input {
width: 16px;
height: 16px;
margin: 0;
accent-color: #b8957f;
}
.checkout-radio-row-sub {
margin-top: 8px;
margin-bottom: 18px;
}
.delivery-panel {
display: none;
}
.delivery-panel.is-active {
display: block;
}
.checkout-nova-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px 24px;
align-items: start;
}
.checkout-nova-fields.is-hidden {
display: none !important;
}
.checkout-field {
position: relative;
min-width: 0;
}
.checkout-field-wide {
grid-column: span 2;
}
.checkout-field label,
.checkout-full,
.checkout-grid label {
display: flex;
flex-direction: column;
gap: 7px;
}
.checkout-field span,
.checkout-full span,
.checkout-grid span {
color: #7a6258;
font-size: 15px;
line-height: 1.2;
}
.checkout-field input,
.checkout-grid input,
.checkout-full textarea,
.checkout-packaging select {
width: 100%;
min-width: 0;
height: 52px;
border: 1px solid #dcc4b5;
background: rgba(255, 255, 255, 0.72);
color: #3d2e29;
padding: 0 16px;
border-radius: 0;
font-size: 16px;
outline: none;
}
.checkout-full textarea {
height: 120px;
padding-top: 14px;
resize: vertical;
}
.checkout-field input:focus,
.checkout-grid input:focus,
.checkout-full textarea:focus,
.checkout-packaging select:focus {
border-color: #b8957f;
box-shadow: 0 0 0 2px rgba(184, 149, 127, 0.15);
}
.checkout-field small,
.checkout-nova-fields small {
display: block;
margin-top: 7px;
color: #9a8176;
font-size: 13px;
line-height: 1.35;
}
.autocomplete-field {
position: relative;
}
.checkout-autocomplete {
display: none;
position: absolute;
left: 0;
right: 0;
top: calc(100% - 2px);
z-index: 50;
max-height: 280px;
overflow-y: auto;
border: 1px solid #d9bfae;
background: #fff8f2;
box-shadow: 0 18px 38px rgba(73, 46, 35, 0.16);
}
.checkout-autocomplete.is-open {
display: block;
}
.checkout-autocomplete button {
width: 100%;
border: 0;
border-bottom: 1px solid rgba(217, 191, 174, 0.7);
background: transparent;
padding: 13px 15px;
text-align: left;
cursor: pointer;
color: #44302a;
display: flex;
flex-direction: column;
gap: 4px;
font-size: 14px;
line-height: 1.35;
}
.checkout-autocomplete button:hover {
background: #ead6c8;
}
.checkout-autocomplete button span {
color: #44302a;
font-size: 14px;
font-weight: 600;
}
.checkout-autocomplete button small {
color: #8b7065;
font-size: 12px;
margin: 0;
}
.checkout-autocomplete-empty {
padding: 14px 15px;
color: #7b6258;
font-size: 14px;
line-height: 1.4;
}
.checkout-note {
margin-top: 18px;
padding: 16px;
border: 1px solid #dfc7b8;
background: rgba(255, 255, 255, 0.38);
color: #71594f;
font-size: 16px;
line-height: 1.45;
}
.pickup-box,
.payment-box {
border: 1px solid #dfc7b8;
background: rgba(255, 255, 255, 0.34);
padding: 18px;
color: #71594f;
}
.pickup-box span {
display: block;
margin-bottom: 6px;
color: #9a8176;
font-size: 14px;
}
.pickup-box strong,
.payment-box strong {
display: block;
color: #3d2e29;
margin-bottom: 8px;
}
.checkout-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 17px 0;
border-top: 1px solid #dfc7b8;
color: #3d2e29;
font-weight: 700;
}
.checkout-summary-row-total {
font-size: 18px;
}
.checkout-summary-item {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
padding: 12px 0;
}
.checkout-summary-item strong {
display: block;
color: #3d2e29;
}
.checkout-summary-item span {
display: block;
margin-top: 4px;
color: #8b7065;
font-size: 13px;
}
@media (max-width: 768px) {
.checkout-radio-row {
gap: 10px;
}
.checkout-radio-row label {
width: 100%;
min-width: 0;
height: 44px;
padding: 0 14px;
}
.checkout-nova-fields {
grid-template-columns: 1fr;
gap: 14px;
}
.checkout-field-wide {
grid-column: span 1;
}
.checkout-autocomplete {
max-height: 230px;
}
}
@media (max-width: 520px) {
.checkout-field input,
.checkout-grid input,
.checkout-full textarea,
.checkout-packaging select {
height: 48px;
font-size: 15px;
padding-left: 13px;
padding-right: 13px;
}
.checkout-note {
font-size: 14px;
padding: 13px;
}
.checkout-autocomplete button {
padding: 12px 13px;
}
}
/* =========================
PAYMENT PAGE
========================= */
.payment-page {
min-height: 72vh;
padding: 42px 0 90px;
background: #ead9cc;
}
.payment-title {
margin-bottom: 30px;
}
.payment-layout {
width: 100%;
max-width: 780px;
margin: 0 auto;
}
.payment-box {
width: 100%;
border: 1px solid #d8bfae;
background: rgba(255, 248, 242, 0.72);
padding: 34px;
color: #46342e;
}
.payment-kicker {
display: block;
margin-bottom: 10px;
color: #9a7a69;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 12px;
line-height: 1.2;
}
.payment-box h2 {
margin: 0 0 22px;
color: #3b2b27;
font-size: 28px;
font-weight: 500;
line-height: 1.25;
}
.payment-total {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
padding: 18px 0;
margin-bottom: 22px;
border-top: 1px solid #ddc4b3;
border-bottom: 1px solid #ddc4b3;
}
.payment-total span {
color: #755d53;
font-size: 16px;
}
.payment-total strong {
color: #3b2b27;
font-size: 25px;
font-weight: 700;
white-space: nowrap;
}
.payment-info-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-bottom: 24px;
}
.payment-info-list div {
border: 1px solid #dfc7b8;
background: rgba(255, 255, 255, 0.35);
padding: 14px;
}
.payment-info-list span {
display: block;
margin-bottom: 6px;
color: #9a8176;
font-size: 13px;
line-height: 1.25;
}
.payment-info-list b {
display: block;
color: #3d2e29;
font-size: 15px;
line-height: 1.3;
}
.payment-muted {
margin: 0 0 24px;
color: #755d53;
font-size: 15px;
line-height: 1.6;
}
.payment-start-btn {
margin-bottom: 24px;
}
.payment-start-btn:disabled {
opacity: 0.68;
cursor: not-allowed;
}
.liqpay-checkout-box {
width: 100%;
min-height: 0;
overflow: hidden;
}
.liqpay-checkout-box iframe {
width: 100% !important;
max-width: 100% !important;
}
.payment-status {
min-height: 22px;
margin: 18px 0 0;
color: #755d53;
font-size: 15px;
line-height: 1.45;
}
.payment-status.is-pending {
color: #755d53;
}
.payment-status.is-success {
color: #3d7651;
}
.payment-status.is-error {
color: #9b3b30;
}
.payment-security-note {
margin-top: 24px;
padding: 16px;
border: 1px solid #dfc7b8;
background: rgba(255, 255, 255, 0.34);
}
.payment-security-note strong {
display: block;
margin-bottom: 6px;
color: #3d2e29;
}
.payment-security-note p {
margin: 0;
color: #755d53;
font-size: 14px;
line-height: 1.55;
}
@media (max-width: 768px) {
.payment-page {
padding: 34px 0 70px;
}
.payment-layout {
max-width: 100%;
}
.payment-box {
padding: 24px 18px;
}
.payment-box h2 {
font-size: 24px;
}
.payment-total {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.payment-total strong {
font-size: 22px;
}
.payment-info-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.payment-page {
padding-top: 26px;
}
.payment-box {
padding: 20px 14px;
}
.payment-muted,
.payment-status {
font-size: 14px;
}
.payment-security-note {
padding: 14px;
}
}
.payment-status.is-success {
color: #3f8f55;
font-weight: 600;
}
.payment-status.is-error {
color: #9b3b30;
font-weight: 600;
}
.payment-status.is-pending {
color: #755d53;
}
/* =========================
PAYMENT CLEAN PAGE
========================= */
.payment-page-clean {
min-height: 100vh;
padding: 56px 0 90px;
background: #ead9cc;
}
.payment-layout-clean {
width: 100%;
max-width: 760px;
margin: 0 auto;
}
.payment-box-clean {
width: 100%;
border: 1px solid #d8bfae;
background: rgba(255, 248, 242, 0.72);
padding: 34px 34px 36px;
color: #46342e;
}
.payment-box-clean .payment-kicker {
display: block;
margin-bottom: 12px;
color: #9a7a69;
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 12px;
line-height: 1.2;
}
.payment-box-clean h2 {
margin: 0 0 24px;
color: #3b2b27;
font-size: 28px;
font-weight: 500;
line-height: 1.25;
}
.payment-total-clean {
display: flex;
align-items: center;
justify-content: space-between;
gap: 22px;
padding: 20px 0;
margin-bottom: 28px;
border-top: 1px solid #ddc4b3;
border-bottom: 1px solid #ddc4b3;
}
.payment-total-clean span {
color: #755d53;
font-size: 17px;
font-weight: 600;
}
.payment-total-clean strong {
color: #3b2b27;
font-size: 30px;
font-weight: 700;
white-space: nowrap;
}
.liqpay-checkout-box-clean {
width: 100%;
min-height: 0;
overflow: hidden;
}
.liqpay-checkout-box-clean iframe {
width: 100% !important;
max-width: 100% !important;
}
.payment-status {
margin: 18px 0 0;
min-height: 22px;
color: #755d53;
font-size: 15px;
line-height: 1.45;
}
.payment-status.is-success {
color: #3f8f55;
font-weight: 600;
}
.payment-status.is-error {
color: #9b3b30;
font-weight: 600;
}
.payment-status.is-pending {
color: #755d53;
}
@media (max-width: 768px) {
.payment-page-clean {
padding: 34px 0 70px;
}
.payment-layout-clean {
max-width: 100%;
}
.payment-box-clean {
padding: 24px 18px;
}
.payment-box-clean h2 {
font-size: 24px;
}
.payment-total-clean {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.payment-total-clean strong {
font-size: 24px;
}
}
@media (max-width: 480px) {
.payment-page-clean {
padding-top: 26px;
}
.payment-box-clean {
padding: 20px 14px;
}
.payment-status {
font-size: 14px;
}
}
/* =========================
LEGAL / CHECKOUT FINAL
========================= */
.legal-revision,
.offer-kicker,
.returns-head > span,
.privacy-head > span {
display: inline-block;
margin-bottom: 12px;
color: #9a6f5d;
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.legal-seller-card {
margin-top: 18px;
padding: 22px;
border: 1px solid rgba(139, 93, 72, .22);
background: rgba(235, 215, 203, .36);
}
.legal-seller-card p {
margin: 8px 0;
}
.legal-seller-card a,
.checkout-agreements a,
.payment-legal-links a {
color: #764b3b;
text-decoration: underline;
text-underline-offset: 3px;
}
.checkout-agreements label {
align-items: flex-start;
}
.checkout-agreements input {
margin-top: 3px;
flex: 0 0 auto;
}
.checkout-legal-note {
margin: -2px 0 18px;
color: #795e53;
font-size: 13px;
line-height: 1.6;
}
.payment-legal-links {
margin: 18px 0 0;
color: #80675d;
font-size: 12px;
line-height: 1.6;
}
.payment-result-card {
text-align: center;
}
.payment-result-order {
margin: 20px 0;
color: #4d3830;
}
.payment-result-actions {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 24px;
}
@media (max-width: 560px) {
.checkout-agreements span {
font-size: 13px;
line-height: 1.45;
}
.payment-result-actions .btn {
width: 100%;
}
}
/* =========================================================
KAMIEL 2026: moody editorial home hero
========================================================= */
.home-hero {
padding-top: 0;
}
.home-hero-bg {
min-height: clamp(640px, 57vw, 790px);
background-position: center center;
}
.home-hero-bg::before {
background: linear-gradient(
90deg,
rgba(28, 21, 17, .43) 0%,
rgba(28, 21, 17, .27) 37%,
rgba(28, 21, 17, .08) 61%,
rgba(28, 21, 17, 0) 78%
);
}
.home-hero-copy h1,
.home-hero-copy p,
.home-hero-eyebrow {
color: #f5eee5;
text-shadow: 0 2px 18px rgba(20, 14, 11, .24);
}
.home-hero-copy .home-hero-cta {
border-color: rgba(248, 239, 229, .70);
background: rgba(255, 255, 255, .035);
color: #fffaf3;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.home-hero-copy .home-hero-cta:hover {
border-color: #fffaf3;
background: rgba(255, 250, 243, .13);
color: #fffaf3;
}
@media (max-width: 820px) {
.home-hero-bg {
min-height: 610px;
background-position: 58% center;
}
.home-hero-bg::before {
background: linear-gradient(
90deg,
rgba(27, 20, 16, .64) 0%,
rgba(27, 20, 16, .45) 48%,
rgba(27, 20, 16, .13) 100%
);
}
}
@media (max-width: 620px) {
.home-hero-bg {
min-height: 570px;
background-position: 57% center;
}
.home-hero-copy {
margin-top: var(--header-height);
}
.home-hero-copy h1 {
font-size: clamp(34px, 10vw, 43px);
}
}
/* =========================================================
KAMIEL 2026: branded hero and refined route transitions
========================================================= */
.home-hero-bg::before {
background: linear-gradient(
90deg,
rgba(28, 21, 17, .62) 0%,
rgba(28, 21, 17, .44) 35%,
rgba(28, 21, 17, .15) 58%,
rgba(28, 21, 17, 0) 76%
);
}
.main.route-enter > * {
animation: kamielRouteReveal .46s cubic-bezier(.22, .72, .24, 1) both;
}
.main.route-enter > *:nth-child(2) {
animation-delay: .045s;
}
.main.route-enter > *:nth-child(3) {
animation-delay: .08s;
}
@keyframes kamielRouteReveal {
from {
opacity: 0;
transform: translateY(12px);
filter: blur(2px);
}
to {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
}
body:not([data-route="home"]) .main {
background-image: linear-gradient(180deg, rgba(232, 215, 203, .18), transparent 190px);
}
@media (prefers-reduced-motion: reduce) {
.main.route-enter > * {
animation: none;
}
}
@media(max-width:1100px){.product-grid{grid-template-columns:repeat(3,1fr)}.catalog-layout{grid-template-columns:230px 1fr}.mega-wrap{width:calc(100vw - 28px);grid-template-columns:220px 230px 230px 1fr!important}}@media(max-width:900px){:root{--header-h:58px}.desktop-nav{display:none}.burger{display:inline-grid}.header-inner{grid-template-columns:auto 1fr auto}.logo{font-size:24px;justify-self:center}.hero-card,.banner,.two-col,.product-detail,.cart-layout,.checkout-layout{grid-template-columns:1fr}.hero-copy{padding:32px}.hero-img{height:300px}.product-grid{grid-template-columns:repeat(2,1fr)}.catalog-layout{display:block}.filters{display:none}.mobile-filter-btn{display:inline-flex}.footer-grid{grid-template-columns:1fr 1fr}.footer-col{border-left:0;padding-left:0}.mega-wrap{display:none!important}.search-panel{top:0;width:100%;height:100vh;max-height:none}.drawer{width:min(390px,100vw)}}@media(max-width:560px){.container{width:calc(100% - 22px)}.section{padding:38px 0}.hero{padding-top:20px}.hero h1{font-size:42px}.product-grid{grid-template-columns:1fr 1fr;gap:12px}.product-info{padding:10px}.product-title{font-size:16px}.card-actions{flex-direction:column}.cart-item{grid-template-columns:72px 1fr}.cart-item img{width:72px;height:72px}.cart-item-actions{grid-column:1/-1}.footer-grid{grid-template-columns:1fr}.tab-buttons{display:grid}.search-result{grid-template-columns:46px 1fr}.search-result .btn{display:none}}
/* --- KAMIEL responsive correction 21.06 --- */
@media(max-width:1100px){.hero-frame{width:min(100% - 32px,1020px)}.home-product-grid{grid-template-columns:repeat(3,1fr)}.review-layout{grid-template-columns:280px 1fr}.review-product-card img{height:190px}}
@media(max-width:900px){.header-inner{width:calc(100% - 24px);height:var(--header-h)}.hero-frame{width:calc(100% - 24px)}.hero-image-bg{min-height:auto;background-position:center right}.hero-image-bg .hero-copy{width:100%;padding:34px;background:linear-gradient(90deg,rgba(255,247,241,.88),rgba(255,247,241,.52))}.hero-image-bg h1{font-size:48px}.home-category-track{grid-template-columns:none;grid-auto-columns:250px}.home-banner,.review-layout{grid-template-columns:1fr}.review-product-card{max-width:360px;margin:auto}.reviews-title-row span{width:80px}.home-product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hero-image-bg .hero-copy{padding:26px 22px}.hero-image-bg h1{font-size:42px}.home-category-track{grid-auto-columns:78vw}.product-carousel{grid-auto-columns:72vw}.review-layout{padding:16px}.review-card{grid-template-columns:62px 1fr;padding:16px;gap:14px}.review-avatar{width:62px;height:62px}.review-name{font-size:24px}.reviews-title-row{gap:14px}.reviews-title-row h2{font-size:24px}.home-banner-copy{padding:24px}.home-banner-copy h2{font-size:30px}}
/* Release responsive fixes: consistent cards and usable mobile catalog. */
@media(max-width:620px){
.home-category-card{flex-basis:68vw;width:68vw;min-width:68vw;max-width:68vw}
.home-category-card img{height:auto;aspect-ratio:16/9;object-fit:cover}
.catalog-products-area .product-grid,.catalog-layout-final .product-grid,.catalog-layout .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.catalog-layout-final .product-title,.catalog-layout .product-title{font-size:15px}
.catalog-layout-final .product-info,.catalog-layout .product-info{padding:10px}
}
@media(max-width:900px){
.header-inner{height:72px}
}
/* KAMIEL 2026 — header, catalog and brands refresh. About page content is untouched. */
:root {
--km-ink: #292522;
--km-paper: #f4f0eb;
--km-card: #fbf9f6;
--km-line: rgba(65, 54, 47, .14);
--km-bronze: #9a7b55;
--km-bronze-dark: #71583c;
}
/* ---------- Stable editorial header ---------- */
.site-header {
height: 84px !important;
background: rgba(36, 30, 26, .12) !important;
border-bottom: 1px solid rgba(255, 255, 255, .18) !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
overflow: visible !important;
transition: background-color .28s ease, border-color .28s ease, box-shadow .28s ease, backdrop-filter .28s ease !important;
}
:root { --header-height: 84px; }
body:not([data-route="home"]) .site-header,
.site-header.is-scrolled {
background: rgba(244, 240, 235, .92) !important;
border-bottom-color: var(--km-line) !important;
box-shadow: 0 10px 34px rgba(40, 31, 25, .08) !important;
-webkit-backdrop-filter: blur(18px) saturate(125%) !important;
backdrop-filter: blur(18px) saturate(125%) !important;
}
body:not([data-route="home"]) .site-header::after { display: none !important; }
.header-inner {
width: min(100% - 64px, 1340px) !important;
height: 84px !important;
grid-template-columns: minmax(0, 1fr) 164px minmax(0, 1fr) !important;
gap: 28px !important;
}
.header-nav {
height: 100%;
gap: clamp(22px, 2.2vw, 40px) !important;
}
.header-nav a,
.catalog-trigger {
position: relative;
height: 100% !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
color: #fffaf4 !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: .14em !important;
text-transform: uppercase;
white-space: nowrap;
transform: none !important;
transition: color .18s ease, opacity .18s ease !important;
}
.header-nav a::after,
.catalog-trigger::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 20px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: center;
transition: transform .18s ease;
}
.header-nav a:hover,
.catalog-trigger:hover {
color: #e2c08d !important;
opacity: 1 !important;
transform: none !important;
}
.header-nav a:hover::after,
.catalog-trigger:hover::after { transform: scaleX(1); }
body:not([data-route="home"]) .header-nav a,
.site-header.is-scrolled .header-nav a,
body:not([data-route="home"]) .catalog-trigger,
.site-header.is-scrolled .catalog-trigger { color: var(--km-ink) !important; }
body:not([data-route="home"]) .header-nav a:hover,
.site-header.is-scrolled .header-nav a:hover,
body:not([data-route="home"]) .catalog-trigger:hover,
.site-header.is-scrolled .catalog-trigger:hover { color: var(--km-bronze) !important; }
.logo {
width: 164px !important;
min-width: 164px !important;
height: 84px !important;
grid-template-rows: 38px 19px 9px !important;
transform: none !important;
}
.logo-mark {
width: 44px !important;
height: 44px !important;
object-fit: contain;
filter: drop-shadow(0 2px 9px rgba(22, 16, 12, .12));
}
.logo-word {
color: #fffaf4;
font-size: 20px !important;
letter-spacing: .36em !important;
transform: translateX(.18em) !important;
}
.logo small { color: #d4b57e !important; }
body:not([data-route="home"]) .logo-word,
.site-header.is-scrolled .logo-word { color: var(--km-ink); }
.header-actions { gap: 10px !important; }
.icon-btn,
.header-icon-btn {
color: #fffaf4 !important;
transform: none !important;
transition: color .18s ease, opacity .18s ease, background-color .18s ease !important;
}
.icon-btn:hover,
.header-icon-btn:hover {
color: #e2c08d !important;
opacity: 1 !important;
transform: none !important;
background: rgba(255, 255, 255, .08) !important;
}
.header-icon {
background-image: none !important;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
.header-icon-search {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 35 35' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='9' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M22 22L30 30' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 35 35' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='15' cy='15' r='9' fill='none' stroke='black' stroke-width='2.4'/%3E%3Cpath d='M22 22L30 30' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}
.header-icon-heart {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 35 35' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 28.5S6.5 21.8 6.5 13.8C6.5 9.9 9.2 7.4 12.6 7.4c2.2 0 3.8 1.2 4.9 2.8 1.1-1.6 2.7-2.8 4.9-2.8 3.4 0 6.1 2.5 6.1 6.4 0 8-11 14.7-11 14.7Z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 35 35' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.5 28.5S6.5 21.8 6.5 13.8C6.5 9.9 9.2 7.4 12.6 7.4c2.2 0 3.8 1.2 4.9 2.8 1.1-1.6 2.7-2.8 4.9-2.8 3.4 0 6.1 2.5 6.1 6.4 0 8-11 14.7-11 14.7Z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.header-icon-bag {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 35 35' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 13h16L27 29H8l1.5-16Z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M13.2 13c0-4.2 1.8-6.5 4.3-6.5s4.3 2.3 4.3 6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 35 35' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 13h16L27 29H8l1.5-16Z' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M13.2 13c0-4.2 1.8-6.5 4.3-6.5s4.3 2.3 4.3 6.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
body:not([data-route="home"]) .header-icon-btn,
.site-header.is-scrolled .header-icon-btn { color: var(--km-ink) !important; }
.counter { background: var(--km-bronze) !important; border: 1px solid rgba(255,255,255,.72); }
.mega-wrap {
top: 84px !important;
border-radius: 0 0 18px 18px;
background: rgba(250, 248, 245, .97) !important;
border-color: var(--km-line) !important;
box-shadow: 0 28px 80px rgba(39, 30, 24, .18) !important;
}
/* ---------- Modern catalog ---------- */
body[data-route="catalog"] .main,
body[data-route="new"] .main,
body[data-route="discounts"] .main,
body[data-route="brands"] .main { background: var(--km-paper) !important; }
body[data-route="catalog"] .catalog-hero,
body[data-route="new"] .catalog-hero,
body[data-route="discounts"] .catalog-hero,
body[data-route="brands"] .brands-hero {
padding: 58px 0 34px !important;
background:
radial-gradient(circle at 84% 14%, rgba(154, 123, 85, .13), transparent 23%),
linear-gradient(135deg, #f7f4ef 0%, #eee8e1 100%) !important;
border-bottom: 1px solid var(--km-line);
}
.catalog-eyebrow {
display: block;
margin-bottom: 13px;
color: var(--km-bronze);
font-size: 10px;
font-weight: 700;
letter-spacing: .24em;
}
body[data-route="catalog"] .page-title,
body[data-route="new"] .page-title,
body[data-route="discounts"] .page-title,
body[data-route="brands"] .page-title {
color: var(--km-ink) !important;
font-size: clamp(52px, 6vw, 82px) !important;
letter-spacing: -.025em;
}
.catalog-section,
.brands-section { background: var(--km-paper) !important; padding-top: 38px !important; }
.catalog-layout-final,
.catalog-layout { grid-template-columns: 258px minmax(0, 1fr) !important; gap: 30px !important; }
.catalog-filter-panel,
.filters {
position: sticky !important;
top: 108px !important;
border: 1px solid var(--km-line) !important;
border-radius: 18px !important;
background: rgba(251, 249, 246, .86) !important;
box-shadow: 0 16px 50px rgba(48, 39, 33, .05) !important;
padding: 24px !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.catalog-filter-head { border-color: var(--km-line) !important; }
.catalog-filter-head h2 { color: var(--km-ink) !important; font-size: 28px !important; }
.catalog-filter-row,
.catalog-category-link,
.catalog-brand-link,
.catalog-category-child,
.catalog-subcategory-link {
border-radius: 10px !important;
transition: background-color .16s ease, color .16s ease, border-color .16s ease !important;
transform: none !important;
}
.catalog-filter-row:hover,
.catalog-category-link:hover,
.catalog-brand-link:hover,
.catalog-category-child:hover,
.catalog-subcategory-link:hover {
background: rgba(154, 123, 85, .10) !important;
transform: none !important;
}
.catalog-filter-row.is-active,
.catalog-category-link.is-active,
.catalog-brand-link.is-active,
.catalog-category-child.is-active,
.catalog-subcategory-link.is-active,
.catalog-chip-list a.is-active {
background: var(--km-ink) !important;
border-color: var(--km-ink) !important;
}
.catalog-sort,
#sort.input {
width: 240px !important;
height: 50px !important;
border: 1px solid var(--km-line) !important;
border-radius: 999px !important;
background-color: rgba(251, 249, 246, .88) !important;
padding-left: 20px !important;
transform: none !important;
}
.catalog-top-actions::after { top: 34px !important; right: 22px !important; width: 9px; height: 9px; }
.catalog-layout-final .product-grid,
.catalog-layout .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; }
.catalog-layout-final .product-card,
.catalog-layout .product-card {
border: 1px solid var(--km-line) !important;
border-radius: 18px !important;
background: var(--km-card) !important;
box-shadow: 0 14px 40px rgba(45, 36, 30, .04);
transition: border-color .2s ease, box-shadow .2s ease !important;
}
.catalog-layout-final .product-card:hover,
.catalog-layout .product-card:hover {
transform: none !important;
border-color: rgba(154, 123, 85, .46) !important;
box-shadow: 0 20px 54px rgba(45, 36, 30, .09) !important;
}
.catalog-layout-final .product-media,
.catalog-layout .product-media {
aspect-ratio: 4 / 5 !important;
border-radius: 17px 17px 0 0;
background: #f8f6f2 !important;
}
.catalog-layout-final .product-info,
.catalog-layout .product-info { padding: 15px 17px !important; }
.catalog-layout-final .brand,
.catalog-layout .brand { color: var(--km-bronze) !important; letter-spacing: .16em; }
.catalog-layout-final .card-actions .btn,
.catalog-layout .card-actions .btn,
.catalog-filter-apply {
border-radius: 999px !important;
background: var(--km-ink) !important;
border-color: var(--km-ink) !important;
transform: none !important;
}
.catalog-layout-final .card-actions .btn:hover,
.catalog-layout .card-actions .btn:hover,
.catalog-filter-apply:hover {
background: var(--km-bronze-dark) !important;
border-color: var(--km-bronze-dark) !important;
transform: none !important;
}
.product-card .wishlist-btn,
.product-card [data-wishlist] {
border: 1px solid var(--km-line) !important;
border-radius: 50% !important;
background: rgba(251, 249, 246, .90) !important;
transform: none !important;
}
/* ---------- Brands ---------- */
.brands-letters-clean {
max-width: none !important;
gap: 7px !important;
padding-top: 22px;
}
.brands-letters-clean a {
min-width: 34px;
height: 34px;
border: 1px solid transparent;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
transform: none !important;
}
.brands-letters-clean a.is-active:hover,
.brands-letters-clean a.is-current {
background: var(--km-ink) !important;
border-color: var(--km-ink) !important;
color: #fff !important;
transform: none !important;
}
.brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; }
.brand-card-clean {
position: relative;
border: 1px solid var(--km-line) !important;
border-radius: 20px !important;
background: var(--km-card) !important;
overflow: hidden;
box-shadow: 0 16px 46px rgba(45, 36, 30, .05);
transform: none !important;
transition: border-color .2s ease, box-shadow .2s ease !important;
}
.brand-card-clean:hover {
transform: none !important;
border-color: rgba(154, 123, 85, .48) !important;
box-shadow: 0 24px 60px rgba(45, 36, 30, .10) !important;
}
.brand-card-image { height: 250px !important; background: #eee9e3 !important; }
.brand-card-image img { filter: saturate(.78) contrast(.96); }
.brand-card-clean:hover .brand-card-image img { transform: scale(1.025) !important; }
.brand-card-body { padding: 22px !important; }
.brand-card-kicker { color: var(--km-bronze) !important; letter-spacing: .18em !important; }
.brand-card-bottom b { color: var(--km-ink) !important; }
@media (max-width: 1100px) {
.header-inner { width: min(100% - 36px, 1200px) !important; }
.header-nav { gap: 20px !important; }
.catalog-layout-final .product-grid,
.catalog-layout .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
:root { --header-height: 68px; }
.site-header { height: 68px !important; }
.header-inner { height: 68px !important; grid-template-columns: 42px 1fr auto !important; }
.logo { height: 68px !important; width: 138px !important; min-width: 138px !important; grid-template-rows: 31px 17px 8px !important; }
.logo-mark { width: 36px !important; height: 36px !important; }
.logo-word { font-size: 17px !important; }
.header-actions .header-icon-btn:nth-child(1) { display: none; }
.burger { color: #fffaf4 !important; transform: none !important; }
body:not([data-route="home"]) .burger,
.site-header.is-scrolled .burger { color: var(--km-ink) !important; }
.mega-wrap { top: 68px !important; }
.catalog-filter-panel,
.filters { position: static !important; }
}
@media (max-width: 720px) {
body[data-route="catalog"] .catalog-hero,
body[data-route="new"] .catalog-hero,
body[data-route="discounts"] .catalog-hero,
body[data-route="brands"] .brands-hero { padding: 38px 0 26px !important; }
.catalog-top,
.catalog-top-final { align-items: stretch !important; }
.catalog-top-actions { padding-top: 0 !important; }
.catalog-top-actions::after { top: 20px !important; }
.catalog-layout-final,
.catalog-layout { grid-template-columns: 1fr !important; }
.catalog-layout-final .product-grid,
.catalog-layout .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.brands-grid { grid-template-columns: 1fr !important; }
.brand-card-image { height: 220px !important; }
}
/* =========================================================
KAMIEL 2026 — remove legacy rose gaps
========================================================= */
/* The old footer margin exposed the original pink body background. */
.site-footer {
margin-top: 0 !important;
}
/* Home keeps its photography, while every plain surface becomes neutral. */
body[data-route="home"] {
--bg: #f4f0eb;
--bg-soft: #eee9e3;
--bg-light: #fbf9f6;
--border: #d8d0c8;
background: #f4f0eb !important;
}
body[data-route="home"] .main,
body[data-route="home"] .home-page-width,
body[data-route="home"] .home-hero,
body[data-route="home"] .home-categories-section,
body[data-route="home"] .home-products-section,
body[data-route="home"] .home-clothes-section,
body[data-route="home"] .home-reviews-section {
background-color: #f4f0eb !important;
}
/* Catalog-family routes use one continuous surface down to the footer. */
body[data-route="catalog"],
body[data-route="new"],
body[data-route="discounts"],
body[data-route="brands"],
body[data-route="catalog"] .app-shell,
body[data-route="new"] .app-shell,
body[data-route="discounts"] .app-shell,
body[data-route="brands"] .app-shell,
body[data-route="catalog"] .main,
body[data-route="new"] .main,
body[data-route="discounts"] .main,
body[data-route="brands"] .main {
background-color: var(--km-paper) !important;
}
@media (max-width: 480px) {
.header-inner { width: calc(100% - 20px) !important; gap: 8px !important; }
.header-actions { gap: 2px !important; }
.icon-btn,
.header-icon-btn { width: 32px !important; min-width: 32px !important; }
.catalog-layout-final .product-media,
.catalog-layout .product-media { aspect-ratio: 1 / 1.18 !important; padding: 14px !important; }
.catalog-layout-final .product-title,
.catalog-layout .product-title { font-size: 14px !important; }
.catalog-layout-final .product-info,
.catalog-layout .product-info { padding: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
.site-header,
.header-nav a,
.catalog-trigger,
.product-card,
.brand-card-clean { transition: none !important; }
}
/* =========================================================
KAMIEL 2026 — compact catalog + unified neutral surfaces
========================================================= */
/* The ornamental mark must never touch the wordmark. */
.logo {
grid-template-rows: 29px 19px 9px !important;
row-gap: 2px !important;
}
.logo-mark {
width: 30px !important;
height: 30px !important;
}
/* One footer palette across catalog, brands, wishlist and cart. */
.site-footer,
body[data-route="catalog"] .site-footer,
body[data-route="new"] .site-footer,
body[data-route="discounts"] .site-footer,
body[data-route="brands"] .site-footer {
background: #e9e4de !important;
color: var(--km-ink) !important;
border-top: 1px solid var(--km-line) !important;
}
.site-footer .footer-grid {
border-color: var(--km-line) !important;
}
.site-footer .footer-col {
border-color: var(--km-line) !important;
}
.site-footer .footer-logo,
.site-footer .footer-col h3,
.site-footer .footer-col a {
color: var(--km-ink) !important;
}
.site-footer .footer-brand p,
.site-footer .footer-col p,
.site-footer .footer-technical-note {
color: #6f655e !important;
}
.site-footer .footer-col a:hover,
.site-footer .footer-dev-link:hover {
color: var(--km-bronze-dark) !important;
}
/* Wishlist and cart drawers inherit the same neutral catalog surface. */
.wishlist-drawer,
.cart-drawer-side,
.wishlist-drawer-head,
.cart-drawer-head,
.wishlist-drawer-body,
.cart-drawer-body,
.cart-drawer-footer {
background: #f5f1ec !important;
color: var(--km-ink) !important;
}
.wishlist-drawer-head,
.cart-drawer-head,
.cart-drawer-footer,
.cart-drawer-item {
border-color: var(--km-line) !important;
}
.wishlist-drawer-head span,
.cart-drawer-head span,
.wishlist-drawer-empty > span,
.cart-drawer-empty > span,
.cart-drawer-brand {
color: var(--km-bronze) !important;
}
.wishlist-drawer-head h2,
.cart-drawer-head h2,
.wishlist-drawer-empty h3,
.cart-drawer-empty h3,
.cart-drawer-title,
.cart-drawer-total strong {
color: var(--km-ink) !important;
}
.wishlist-drawer-empty p,
.cart-drawer-empty p,
.cart-drawer-option-line,
.cart-drawer-total span {
color: #746a63 !important;
}
.wishlist-drawer-empty .btn,
.cart-drawer-empty .btn,
.cart-drawer-summary .btn,
.cart-drawer-footer .btn {
background: var(--km-ink) !important;
border-color: var(--km-ink) !important;
color: #fff !important;
border-radius: 999px !important;
transform: none !important;
}
.wishlist-drawer-empty .btn:hover,
.cart-drawer-empty .btn:hover,
.cart-drawer-summary .btn:hover,
.cart-drawer-footer .btn:hover {
background: var(--km-bronze-dark) !important;
border-color: var(--km-bronze-dark) !important;
transform: none !important;
}
.wishlist-drawer-overlay,
.cart-drawer-overlay {
background: rgba(41, 37, 34, .34) !important;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.wishlist-drawer .product-card,
.cart-drawer-item,
.cart-drawer-img {
background: #fbf9f6 !important;
}
/* Compact shared hero for Catalog, New, Discounts and Brands. */
body[data-route="catalog"] .catalog-hero,
body[data-route="new"] .catalog-hero,
body[data-route="discounts"] .catalog-hero,
body[data-route="brands"] .brands-hero {
padding: 22px 0 18px !important;
min-height: 0 !important;
}
body[data-route="catalog"] .catalog-hero .breadcrumbs,
body[data-route="new"] .catalog-hero .breadcrumbs,
body[data-route="discounts"] .catalog-hero .breadcrumbs,
body[data-route="brands"] .brands-hero .breadcrumbs {
margin-bottom: 10px !important;
font-size: 12px !important;
}
.catalog-eyebrow {
margin-bottom: 7px !important;
font-size: 9px !important;
}
body[data-route="catalog"] .page-title,
body[data-route="new"] .page-title,
body[data-route="discounts"] .page-title,
body[data-route="brands"] .page-title {
font-size: clamp(42px, 4.6vw, 62px) !important;
margin-bottom: 8px !important;
}
.catalog-top,
.catalog-top-final {
align-items: center !important;
margin-bottom: 0 !important;
}
.catalog-top-actions {
padding-top: 0 !important;
}
.catalog-top-actions::after {
top: 19px !important;
}
.catalog-sort,
#sort.input {
height: 42px !important;
line-height: 42px !important;
}
.brands-head-clean {
align-items: center !important;
}
.brands-letters-clean {
padding-top: 12px !important;
gap: 5px !important;
}
.brands-letters-clean a {
min-width: 30px !important;
height: 30px !important;
font-size: 12px !important;
}
/* Compact filter rhythm, especially Collections: New / Discounts / Bestsellers. */
.catalog-filter-panel,
.filters {
padding: 18px !important;
border-radius: 15px !important;
}
.catalog-filter-head {
padding-bottom: 12px !important;
margin-bottom: 14px !important;
}
.catalog-filter-head h2 {
font-size: 25px !important;
}
.catalog-filter-block,
.filters .filter-block {
padding-bottom: 15px !important;
margin-bottom: 15px !important;
}
.catalog-filter-block h3,
.filters .filter-block h3 {
margin-bottom: 9px !important;
font-size: 19px !important;
}
.catalog-category-groups,
.catalog-category-tree,
.catalog-brand-list {
gap: 2px !important;
}
.catalog-filter-row,
.catalog-category-link,
.catalog-brand-link,
.catalog-category-child,
.catalog-subcategory-link {
min-height: 29px !important;
padding-top: 3px !important;
padding-bottom: 3px !important;
font-size: 14px !important;
}
.catalog-price-filter {
gap: 8px !important;
}
.catalog-price-input,
.catalog-filter-apply {
height: 36px !important;
}
.catalog-chip-list {
gap: 6px !important;
}
.catalog-chip-list a,
.catalog-chip-list-vertical a {
min-height: 30px !important;
padding: 5px 10px !important;
border-radius: 9px !important;
font-size: 13px !important;
}
.catalog-section,
.brands-section {
padding-top: 24px !important;
}
@media (max-width: 900px) {
.logo {
grid-template-rows: 25px 17px 8px !important;
row-gap: 1px !important;
}
.logo-mark {
width: 26px !important;
height: 26px !important;
}
}
@media (max-width: 720px) {
body[data-route="catalog"] .catalog-hero,
body[data-route="new"] .catalog-hero,
body[data-route="discounts"] .catalog-hero,
body[data-route="brands"] .brands-hero {
padding: 18px 0 15px !important;
}
.catalog-top-actions::after {
top: 17px !important;
}
.catalog-sort,
#sort.input {
height: 40px !important;
line-height: 40px !important;
}
}
/* =========================================================
KAMIEL 2026 — site-wide neutral surface system
========================================================= */
:root {
--bg: #f4f0eb;
--bg-soft: #eee9e3;
--bg-light: #fbf9f6;
--border: #d8d0c8;
--camel: #9a7b55;
--camel-dark: #71583c;
--camel-soft: #d9cbb9;
}
html,
body,
.app-shell,
.main {
background-color: #f4f0eb !important;
}
.main {
background-image: none !important;
}
/* Every registered route receives the same base canvas. */
body[data-route="home"],
body[data-route="catalog"],
body[data-route="product"],
body[data-route="cart"],
body[data-route="checkout"],
body[data-route="payment"],
body[data-route="payment-result"],
body[data-route="brands"],
body[data-route="discounts"],
body[data-route="new"],
body[data-route="about"],
body[data-route="delivery"],
body[data-route="returns"],
body[data-route="contacts"],
body[data-route="terms"],
body[data-route="privacy"] {
background-color: #f4f0eb !important;
}
.about-page,
.delivery-page,
.returns-page,
.privacy-page,
.offer-page,
.contacts-elegant-page,
.product-page,
.checkout-page,
.payment-page,
.payment-page-clean,
.payment-result-page,
.wishlist-section,
.wishlist-hero,
.page-hero,
.catalog-section,
.brands-section {
background-color: #f4f0eb !important;
background-image: none !important;
}
/* Shared information surfaces use paper white instead of legacy pink. */
.delivery-card,
.delivery-panel,
.delivery-note,
.offer-document,
.offer-side,
.returns-card,
.returns-note,
.privacy-card,
.privacy-note,
.contacts-elegant-card,
.contacts-elegant-main,
.contacts-elegant-side,
.legal,
.legal-seller-card,
.checkout-form,
.checkout-summary,
.checkout-block,
.payment-box,
.payment-box-clean,
.payment-result-card,
.liqpay-checkout-box,
.liqpay-checkout-box-clean,
.pickup-box,
.empty,
.notice {
background-color: #fbf9f6 !important;
border-color: #d8d0c8 !important;
}
.delivery-info,
.returns-info,
.privacy-info,
.contacts-elegant-details,
.checkout-note,
.checkout-legal-note,
.payment-legal-links {
color: #6f655e !important;
}
/* About keeps its exact content and photography; only the canvas changes. */
.about-page,
.about-container,
.about-row,
.about-text {
background-color: transparent !important;
}
.about-page {
background-color: #f4f0eb !important;
}
/* Footer is deliberately one tone darker, without a colored gap above it. */
.site-footer {
margin-top: 0 !important;
background-color: #e9e4de !important;
border-top-color: #d8d0c8 !important;
}
/* ---------- Final contrast and spacing pass ---------- */
/* The home header remains legible over the hero until the later JS threshold. */
body[data-route="home"] .site-header:not(.is-scrolled) {
background: linear-gradient(180deg, rgba(24, 19, 16, .36) 0%, rgba(24, 19, 16, .10) 72%, transparent 100%) !important;
border-bottom-color: rgba(255, 255, 255, .18) !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body[data-route="home"] .site-header:not(.is-scrolled) .header-nav a,
body[data-route="home"] .site-header:not(.is-scrolled) .catalog-trigger,
body[data-route="home"] .site-header:not(.is-scrolled) .logo-word,
body[data-route="home"] .site-header:not(.is-scrolled) .header-icon-btn,
body[data-route="home"] .site-header:not(.is-scrolled) .burger {
color: #fffaf4 !important;
}
body[data-route="home"] .site-header.is-scrolled {
background: rgba(244, 240, 235, .95) !important;
border-bottom-color: var(--km-line) !important;
box-shadow: 0 10px 34px rgba(40, 31, 25, .09) !important;
-webkit-backdrop-filter: blur(18px) saturate(125%) !important;
backdrop-filter: blur(18px) saturate(125%) !important;
}
body[data-route="home"] .site-header.is-scrolled .header-nav a,
body[data-route="home"] .site-header.is-scrolled .catalog-trigger,
body[data-route="home"] .site-header.is-scrolled .logo-word,
body[data-route="home"] .site-header.is-scrolled .header-icon-btn,
body[data-route="home"] .site-header.is-scrolled .burger {
color: var(--km-ink) !important;
}
/* Delivery: restore dark readable copy on the neutral information card. */
.delivery-note {
background: #ece4da !important;
border: 1px solid #d2c4b5 !important;
border-radius: 16px !important;
color: var(--km-ink) !important;
box-shadow: 0 16px 42px rgba(47, 39, 34, .07) !important;
}
.delivery-note h2,
.delivery-note h3 {
color: var(--km-ink) !important;
}
.delivery-note p,
.delivery-note li {
color: #655c55 !important;
}
.delivery-note .btn {
background: var(--km-ink) !important;
border-color: var(--km-ink) !important;
color: #fffaf4 !important;
}
.delivery-note .btn:hover {
background: var(--km-bronze-dark) !important;
border-color: var(--km-bronze-dark) !important;
}
/* Privacy: a calmer side card and clearly separated actions. */
.privacy-note {
background: #eee7df !important;
border: 1px solid #d3c7bc !important;
border-radius: 16px !important;
padding: 30px !important;
box-shadow: 0 16px 42px rgba(47, 39, 34, .07) !important;
}
.privacy-note h3 {
color: var(--km-ink) !important;
}
.privacy-note p,
.privacy-note .privacy-email {
color: #655c55 !important;
}
.privacy-note-links {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px !important;
margin-top: 22px !important;
}
.privacy-note-links .btn {
width: auto !important;
min-height: 44px !important;
margin: 0 !important;
padding: 11px 20px !important;
border-radius: 999px !important;
}
@media (max-width: 560px) {
.privacy-note {
padding: 24px !important;
}
.privacy-note-links {
align-items: stretch !important;
flex-direction: column !important;
}
.privacy-note-links .btn {
width: 100% !important;
}
}
/* ---------- Payment, privacy and catalog-filter refinement ---------- */
.returns-info-main,
.privacy-info-main {
background: linear-gradient(145deg, #f8f5f1 0%, #eee7df 100%) !important;
border: 1px solid #d3c7bc !important;
border-radius: 18px !important;
padding: clamp(28px, 3vw, 40px) !important;
box-shadow: 0 18px 48px rgba(47, 39, 34, .065) !important;
}
.returns-info-main > h2,
.privacy-info-main > h2 {
color: var(--km-ink) !important;
letter-spacing: -.015em;
}
.returns-block,
.privacy-block {
border-top-color: rgba(154, 123, 85, .24) !important;
}
.returns-block h3,
.privacy-block h3 {
color: var(--km-ink) !important;
}
.returns-block p,
.privacy-block p {
color: #655c55 !important;
}
/* Keep the filter visually light and remove an empty category section. */
.catalog-filter-panel,
.filters {
background: rgba(248, 245, 241, .94) !important;
border-color: #d8d0c8 !important;
border-radius: 16px !important;
padding: 16px !important;
box-shadow: 0 14px 38px rgba(47, 39, 34, .055) !important;
}
.catalog-filter-head {
padding-bottom: 10px !important;
margin-bottom: 12px !important;
}
.catalog-filter-head h2 {
font-size: 23px !important;
}
.catalog-filter-head a {
font-size: 12px !important;
}
.catalog-filter-block,
.filters .filter-block {
padding-bottom: 13px !important;
margin-bottom: 13px !important;
}
.catalog-filter-block:has(.catalog-limited-list:not(:has(*))) {
display: none !important;
}
.catalog-price-input {
height: 36px !important;
border-color: #d3c7bc !important;
border-radius: 10px !important;
background: #fbf9f6 !important;
}
.catalog-filter-apply {
height: 36px !important;
font-size: 13px !important;
}
.catalog-chip-list a,
.catalog-chip-list-vertical a {
border-color: #d3c7bc !important;
background: rgba(251, 249, 246, .78) !important;
}
@media (min-width: 901px) {
.catalog-layout-final,
.catalog-layout {
grid-template-columns: 238px minmax(0, 1fr) !important;
gap: 24px !important;
}
}
@media (max-width: 700px) {
.returns-info-main,
.privacy-info-main {
border-radius: 14px !important;
padding: 24px 20px !important;
}
}
/* ---------- Balanced contact information panel ---------- */
.contacts-elegant-side {
grid-template-columns: minmax(180px, .72fr) minmax(300px, 1.35fr) minmax(270px, 1fr) !important;
grid-template-areas:
"brand copy details"
"brand copy route" !important;
align-items: center !important;
min-height: 210px;
padding: 28px 32px !important;
column-gap: clamp(26px, 3vw, 48px) !important;
row-gap: 12px !important;
}
.contacts-elegant-brand {
grid-area: brand;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: clamp(24px, 3vw, 42px);
border-right: 1px solid rgba(154, 123, 85, .24);
}
.contacts-elegant-brand .contacts-elegant-side-label {
margin: 0 0 12px !important;
}
.contacts-elegant-brand h2 {
margin: 0 !important;
font-size: clamp(34px, 3.2vw, 46px) !important;
}
.contacts-elegant-side > p {
grid-area: copy;
align-self: center !important;
max-width: 520px !important;
margin: 0 !important;
color: #5f5650 !important;
font-size: 15px !important;
line-height: 1.58 !important;
}
.contacts-elegant-details {
align-self: center;
gap: 11px !important;
padding-left: 26px !important;
}
.contacts-elegant-route {
min-height: 44px !important;
margin-top: 2px !important;
background: var(--km-ink) !important;
border-color: var(--km-ink) !important;
color: #fffaf4 !important;
}
.contacts-elegant-route:hover {
background: var(--km-bronze-dark) !important;
border-color: var(--km-bronze-dark) !important;
}
@media (max-width: 920px) {
.contacts-elegant-side {
grid-template-columns: minmax(160px, .7fr) minmax(0, 1.3fr) !important;
grid-template-areas:
"brand copy"
"details details"
"route route" !important;
}
.contacts-elegant-details {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 12px !important;
padding: 18px 0 0 !important;
border-top: 1px solid rgba(154, 123, 85, .24) !important;
border-left: 0 !important;
}
}
@media (max-width: 620px) {
.contacts-elegant-side {
grid-template-columns: 1fr !important;
grid-template-areas: "brand" "copy" "details" "route" !important;
min-height: 0;
}
.contacts-elegant-brand {
padding: 0 0 18px;
border-right: 0;
border-bottom: 1px solid rgba(154, 123, 85, .24);
}
.contacts-elegant-details {
grid-template-columns: 1fr;
}
}
/* ---------- Stable pointer path from Catalog to mega-menu ---------- */
@media (min-width: 901px) {
.mega-wrap {
top: calc(var(--header-height) - 6px) !important;
padding-top: 48px !important;
}
}
/* ---------- Readable premium mobile menu ---------- */
@media (max-width: 900px) {
.drawer-overlay[data-menu-overlay] {
z-index: 1090 !important;
background: rgba(35, 29, 25, .46) !important;
-webkit-backdrop-filter: blur(6px) !important;
backdrop-filter: blur(6px) !important;
}
.menu-drawer {
z-index: 1100 !important;
width: min(360px, 88vw) !important;
height: 100dvh !important;
max-height: 100dvh !important;
background:
radial-gradient(circle at 8% 4%, rgba(202, 168, 116, .18), transparent 34%),
linear-gradient(160deg, #554b44 0%, #433b36 48%, #342f2b 100%) !important;
border-right: 1px solid rgba(224, 199, 158, .34) !important;
box-shadow: 22px 0 58px rgba(28, 22, 19, .24) !important;
color: #fffaf4 !important;
}
.menu-drawer .drawer-head {
min-height: 82px !important;
padding: 20px 20px 17px !important;
border-bottom: 1px solid rgba(255, 250, 244, .18) !important;
background: rgba(255, 250, 244, .025) !important;
}
.menu-drawer .drawer-head strong {
color: #fffaf4 !important;
font-size: 24px !important;
font-weight: 400 !important;
letter-spacing: .24em !important;
transform: translateX(.12em);
}
.menu-close {
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
color: #fffaf4 !important;
font-size: 27px !important;
transition: background-color .16s ease, color .16s ease !important;
}
.menu-close:hover,
.menu-close:active {
background: rgba(255, 250, 244, .10) !important;
color: #d4b57e !important;
}
.menu-drawer .drawer-body {
padding: 22px 18px max(28px, env(safe-area-inset-bottom)) !important;
background: transparent !important;
overflow-y: auto !important;
}
.mobile-menu {
gap: 8px !important;
}
.mobile-menu a {
position: relative;
min-height: 54px !important;
padding: 14px 42px 14px 16px !important;
border: 1px solid rgba(255, 250, 244, .24) !important;
border-radius: 12px !important;
background: linear-gradient(110deg, rgba(255, 250, 244, .085), rgba(255, 250, 244, .035)) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
color: #fffaf4 !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
text-decoration: none !important;
transition: background-color .16s ease, border-color .16s ease, color .16s ease !important;
}
.mobile-menu a::after {
content: "→";
position: absolute;
right: 16px;
top: 50%;
color: #ddbd87;
font-family: var(--serif);
font-size: 19px;
line-height: 1;
transform: translateY(-50%);
}
.mobile-menu a:hover,
.mobile-menu a:active {
background: rgba(212, 181, 126, .18) !important;
border-color: rgba(226, 199, 154, .62) !important;
color: #fffaf4 !important;
}
}
/* ---------- Stable mobile wordmark ---------- */
@media (max-width: 900px) {
.header-inner {
width: calc(100% - 24px) !important;
height: 68px !important;
grid-template-columns: 112px minmax(0, 1fr) !important;
gap: 8px !important;
}
.header-nav {
display: none !important;
}
.logo {
grid-column: 1 !important;
justify-self: start !important;
width: 108px !important;
min-width: 108px !important;
height: 64px !important;
grid-template-rows: 25px 17px !important;
row-gap: 2px !important;
overflow: visible !important;
}
.logo-mark {
width: 25px !important;
height: 25px !important;
}
.logo-word {
font-size: 15px !important;
letter-spacing: .25em !important;
transform: none !important;
}
.logo small {
display: none !important;
}
.header-actions {
grid-column: 2 !important;
justify-self: end !important;
min-width: 0 !important;
}
}
@media (max-width: 380px) {
.header-inner {
width: calc(100% - 16px) !important;
grid-template-columns: 96px minmax(0, 1fr) !important;
gap: 4px !important;
}
.logo {
width: 94px !important;
min-width: 94px !important;
}
.logo-word {
font-size: 14px !important;
letter-spacing: .20em !important;
}
}
/* ---------- Compact adaptive catalog mega-menu ---------- */
@media (min-width: 901px) {
.mega-wrap {
width: min(340px, calc(100vw - 48px)) !important;
min-width: 0 !important;
padding-top: 42px;
border: 1px solid #d3c7bc !important;
border-radius: 0 0 16px 16px !important;
background: rgba(248, 245, 241, .98) !important;
box-shadow: 0 24px 64px rgba(38, 31, 27, .16) !important;
overflow: hidden !important;
transition: width .18s ease, box-shadow .18s ease !important;
}
.mega-wrap:has(.mega-col:nth-child(2)) {
width: min(640px, calc(100vw - 48px)) !important;
}
.mega-wrap:has(.mega-col:nth-child(3)) {
width: min(940px, calc(100vw - 48px)) !important;
}
.mega-wrap::before {
content: "Каталог";
position: absolute;
top: 0;
left: 18px;
height: 42px;
display: inline-flex;
align-items: center;
color: var(--km-bronze-dark);
font-size: 10px;
font-weight: 700;
letter-spacing: .20em;
text-transform: uppercase;
}
.mega-body {
width: 100% !important;
min-height: 0 !important;
height: auto !important;
max-height: min(430px, calc(100vh - 150px)) !important;
border-top: 1px solid rgba(154, 123, 85, .18);
background: transparent !important;
overflow: hidden !important;
}
.mega-col {
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
min-height: 0 !important;
max-height: min(430px, calc(100vh - 150px)) !important;
padding: 8px !important;
background: transparent !important;
border-right: 1px solid rgba(154, 123, 85, .18) !important;
overflow-y: auto !important;
scrollbar-width: thin;
scrollbar-color: rgba(154, 123, 85, .35) transparent;
}
.mega-col:last-child {
border-right: 0 !important;
}
.mega-item {
min-height: 40px !important;
padding: 9px 12px !important;
border-radius: 9px !important;
font-size: 16px !important;
color: var(--km-ink) !important;
transition: background-color .15s ease, color .15s ease !important;
}
.mega-item:hover {
background: rgba(154, 123, 85, .11) !important;
color: var(--km-bronze-dark) !important;
}
.mega-item.active {
background: var(--km-ink) !important;
color: #fffaf4 !important;
}
.mega-arrow {
font-family: var(--sans) !important;
font-size: 17px !important;
opacity: .68;
}
.mega-close {
top: 7px !important;
right: 9px !important;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
color: #766b63 !important;
font-size: 20px !important;
transition: background-color .15s ease, color .15s ease !important;
}
.mega-close:hover {
background: rgba(154, 123, 85, .12) !important;
color: var(--km-ink) !important;
}
}
/* ---------- Contacts map and home carousel controls ---------- */
.contacts-elegant-main {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 18px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
.contacts-elegant-map {
width: 100% !important;
height: clamp(420px, 42vw, 560px) !important;
border: 1px solid #d3c7bc !important;
border-radius: 18px !important;
box-shadow: 0 18px 48px rgba(47, 39, 34, .07) !important;
}
.contacts-elegant-side {
position: relative;
display: grid !important;
grid-template-columns: minmax(150px, .75fr) minmax(260px, 1.35fr) minmax(260px, 1fr);
grid-template-areas:
"label copy details"
"title copy details"
"title copy route";
align-items: start;
column-gap: clamp(28px, 4vw, 64px);
row-gap: 8px;
padding: 30px 34px !important;
background: linear-gradient(135deg, #f8f5f1 0%, #eee7df 100%) !important;
border: 1px solid #d3c7bc !important;
border-radius: 18px !important;
box-shadow: 0 14px 38px rgba(47, 39, 34, .05) !important;
}
.contacts-elegant-side-label {
grid-area: label;
margin-bottom: 2px !important;
}
.contacts-elegant-side h2 {
grid-area: title;
margin: 0 !important;
}
.contacts-elegant-side > p {
grid-area: copy;
align-self: center;
max-width: 440px;
}
.contacts-elegant-details {
grid-area: details;
margin: 0 !important;
padding: 0 0 0 28px !important;
border-top: 0 !important;
border-left: 1px solid rgba(154, 123, 85, .26) !important;
}
.contacts-elegant-route {
grid-area: route;
width: 100%;
margin: 8px 0 0 !important;
border-radius: 999px !important;
}
.home-head-actions,
.home-arrows {
min-height: 40px !important;
height: 40px !important;
align-items: center !important;
gap: 16px !important;
}
.home-head-actions a,
.home-section-head > a {
position: relative;
height: 40px !important;
align-items: center !important;
border-bottom: 0 !important;
line-height: 1 !important;
}
.home-head-actions a::after,
.home-section-head > a::after {
content: "";
position: absolute;
right: 0;
bottom: 5px;
left: 0;
height: 1px;
background: currentColor;
}
.home-arrow {
position: relative;
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
font-size: 0 !important;
line-height: 1 !important;
transform: none !important;
}
.home-arrow::before {
content: "";
width: 12px;
height: 12px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.home-arrow[data-dir="-1"]::before {
transform: rotate(-135deg) translate(-1px, 1px);
}
.home-arrow[data-dir="1"]::before {
transform: rotate(45deg) translate(-1px, 1px);
}
@media (max-width: 820px) {
.contacts-elegant-side {
grid-template-columns: 1fr 1fr;
grid-template-areas:
"label details"
"title details"
"copy details"
"route route";
}
}
@media (max-width: 620px) {
.contacts-elegant-map {
height: 360px !important;
border-radius: 14px !important;
}
.contacts-elegant-side {
grid-template-columns: 1fr;
grid-template-areas: "label" "title" "copy" "details" "route";
padding: 24px 20px !important;
border-radius: 14px !important;
}
.contacts-elegant-details {
margin-top: 12px !important;
padding: 18px 0 0 !important;
border-top: 1px solid rgba(154, 123, 85, .26) !important;
border-left: 0 !important;
}
.home-head-actions,
.home-arrows {
gap: 8px !important;
}
.home-arrow {
width: 34px !important;
height: 40px !important;
min-width: 34px !important;
}
}
/* ---------- Delivery steps and privacy contact card ---------- */
.delivery-info-main {
background: linear-gradient(145deg, #f8f5f1 0%, #e9e1d7 100%) !important;
border: 1px solid #d1c3b5 !important;
border-radius: 18px !important;
padding: clamp(26px, 3vw, 38px) !important;
box-shadow: 0 18px 48px rgba(47, 39, 34, .065) !important;
}
.delivery-info-main h2 {
margin-bottom: 24px !important;
color: var(--km-ink) !important;
font-size: clamp(30px, 3vw, 40px) !important;
}
.delivery-steps {
gap: 0 !important;
}
.delivery-step {
position: relative;
grid-template-columns: 30px minmax(0, 1fr) !important;
gap: 14px !important;
align-items: start !important;
padding: 15px 0 !important;
border-top: 1px solid rgba(154, 123, 85, .22);
}
.delivery-step:first-child {
padding-top: 0 !important;
border-top: 0;
}
.delivery-step:last-child {
padding-bottom: 0 !important;
}
.delivery-step span {
width: 30px !important;
height: 30px !important;
border-radius: 50% !important;
background: transparent !important;
border: 1px solid var(--km-bronze) !important;
color: var(--km-bronze-dark) !important;
font-family: var(--sans) !important;
font-size: 12px !important;
font-weight: 600 !important;
line-height: 1 !important;
}
.delivery-step p {
margin: 3px 0 0 !important;
color: #514a45 !important;
font-size: 15px !important;
line-height: 1.52 !important;
}
.privacy-note {
background: linear-gradient(155deg, #38322e 0%, #292522 100%) !important;
border-color: rgba(154, 123, 85, .50) !important;
box-shadow: 0 20px 52px rgba(35, 29, 25, .16) !important;
}
.privacy-note h3 {
color: #fffaf4 !important;
}
.privacy-note p,
.privacy-note p b,
.privacy-note .privacy-email {
color: rgba(255, 250, 244, .78) !important;
}
.privacy-note .privacy-email {
text-decoration-color: rgba(212, 181, 126, .72) !important;
}
.privacy-note-links .btn,
.privacy-note-links .btn.btn-primary {
background: var(--km-bronze) !important;
border-color: var(--km-bronze) !important;
color: #fffaf4 !important;
}
.privacy-note-links .btn:not(.btn-primary) {
background: transparent !important;
border-color: rgba(255, 250, 244, .48) !important;
}
.privacy-note-links .btn:hover {
background: #fffaf4 !important;
border-color: #fffaf4 !important;
color: var(--km-ink) !important;
}
@media (max-width: 700px) {
.delivery-info-main {
border-radius: 14px !important;
padding: 24px 20px !important;
}
.delivery-step {
grid-template-columns: 28px minmax(0, 1fr) !important;
gap: 12px !important;
}
.delivery-step span {
width: 28px !important;
height: 28px !important;
}
}
/* Final contact-panel layout (kept last to override legacy responsive rules). */
.contacts-elegant-side {
grid-template-columns: minmax(180px, .72fr) minmax(300px, 1.35fr) minmax(270px, 1fr) !important;
grid-template-areas: "brand copy details" "brand copy route" !important;
align-items: center !important;
min-height: 210px !important;
padding: 28px 32px !important;
column-gap: clamp(26px, 3vw, 48px) !important;
row-gap: 12px !important;
}
.contacts-elegant-brand {
grid-area: brand;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: clamp(24px, 3vw, 42px);
border-right: 1px solid rgba(154, 123, 85, .24);
}
.contacts-elegant-brand .contacts-elegant-side-label { margin: 0 0 12px !important; }
.contacts-elegant-brand h2 { margin: 0 !important; font-size: clamp(34px, 3.2vw, 46px) !important; }
.contacts-elegant-side > p {
grid-area: copy;
align-self: center !important;
max-width: 520px !important;
margin: 0 !important;
color: #5f5650 !important;
font-size: 15px !important;
line-height: 1.58 !important;
}
.contacts-elegant-details {
grid-area: details;
align-self: center;
gap: 11px !important;
margin: 0 !important;
padding: 0 0 0 26px !important;
border-top: 0 !important;
border-left: 1px solid rgba(154, 123, 85, .24) !important;
}
.contacts-elegant-route {
grid-area: route;
width: 100%;
min-height: 44px !important;
margin: 2px 0 0 !important;
background: var(--km-ink) !important;
border-color: var(--km-ink) !important;
color: #fffaf4 !important;
}
.contacts-elegant-route:hover {
background: var(--km-bronze-dark) !important;
border-color: var(--km-bronze-dark) !important;
}
@media (max-width: 920px) {
.contacts-elegant-side {
grid-template-columns: minmax(160px, .7fr) minmax(0, 1.3fr) !important;
grid-template-areas: "brand copy" "details details" "route route" !important;
}
.contacts-elegant-details {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 12px !important;
padding: 18px 0 0 !important;
border-top: 1px solid rgba(154, 123, 85, .24) !important;
border-left: 0 !important;
}
}
@media (max-width: 620px) {
.contacts-elegant-side {
grid-template-columns: 1fr !important;
grid-template-areas: "brand" "copy" "details" "route" !important;
min-height: 0 !important;
padding: 24px 20px !important;
}
.contacts-elegant-brand {
padding: 0 0 18px;
border-right: 0;
border-bottom: 1px solid rgba(154, 123, 85, .24);
}
.contacts-elegant-details { grid-template-columns: 1fr; }
}
/* ---------- Working mobile catalog filters and visible burger ---------- */
.mobile-filter-overlay,
.mobile-filter-close {
display: none;
}
@media (max-width: 900px) {
body:not([data-route="home"]) .burger span,
body[data-route="home"] .site-header.is-scrolled .burger span {
background: var(--km-ink) !important;
}
body[data-route="home"] .site-header:not(.is-scrolled) .burger span {
background: #fffaf4 !important;
}
.mobile-filter-overlay {
display: block !important;
position: fixed;
inset: 0;
z-index: 1180;
background: rgba(24, 19, 16, .52);
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
transition: opacity .22s ease, visibility .22s ease;
}
.mobile-filter-overlay.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.filters.catalog-filter-panel[data-filter-panel] {
display: block !important;
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 1190 !important;
width: min(360px, 88vw) !important;
max-width: 88vw !important;
height: 100dvh !important;
max-height: 100dvh !important;
margin: 0 !important;
padding: 24px 18px max(28px, env(safe-area-inset-bottom)) !important;
border: 0 !important;
border-right: 1px solid #d3c7bc !important;
border-radius: 0 18px 18px 0 !important;
background: #f8f5f1 !important;
box-shadow: 22px 0 60px rgba(31, 25, 22, .22) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
transform: translate3d(-104%, 0, 0) !important;
visibility: hidden;
pointer-events: none;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
transition: transform .25s ease, visibility .25s ease !important;
}
.filters.catalog-filter-panel[data-filter-panel].is-mobile-open {
transform: translate3d(0, 0, 0) !important;
visibility: visible;
pointer-events: auto;
}
.mobile-filter-close {
display: inline-flex !important;
position: absolute;
top: 13px;
right: 12px;
z-index: 2;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 50%;
align-items: center;
justify-content: center;
background: rgba(154, 123, 85, .10);
color: var(--km-ink);
font-size: 25px;
line-height: 1;
}
.filters.catalog-filter-panel .catalog-filter-head {
padding-right: 42px !important;
}
body.catalog-filter-open {
overflow: hidden !important;
touch-action: none;
}
}
/* ---------- Mobile filter polish + stable contacts layout ---------- */
.catalog-filter-head-actions {
display: flex;
align-items: center;
gap: 10px;
}
@media (min-width: 901px) {
[data-detached-filter] {
display: none !important;
}
}
@media (max-width: 900px) {
.filters.catalog-filter-panel[data-filter-panel] {
width: min(360px, calc(100vw - 28px)) !important;
max-width: calc(100vw - 28px) !important;
padding: 0 18px max(24px, env(safe-area-inset-bottom)) !important;
border-radius: 0 16px 16px 0 !important;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.filters.catalog-filter-panel .catalog-filter-head {
position: sticky;
top: 0;
z-index: 4;
min-height: 68px;
margin: 0 -18px 10px !important;
padding: max(10px, env(safe-area-inset-top)) 18px 10px !important;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(248, 245, 241, .97) !important;
border-bottom: 1px solid rgba(154, 123, 85, .22) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.filters.catalog-filter-panel .catalog-filter-head h2 {
margin: 0 !important;
font-size: 25px !important;
line-height: 1 !important;
}
.filters.catalog-filter-panel .catalog-filter-head a {
font-size: 13px !important;
text-underline-offset: 4px;
}
.mobile-filter-close {
position: static !important;
width: 34px !important;
height: 34px !important;
flex: 0 0 34px;
background: #eee7df !important;
border: 1px solid rgba(154, 123, 85, .16) !important;
font-size: 22px !important;
}
.filters.catalog-filter-panel .catalog-filter-block {
margin-bottom: 10px !important;
padding: 13px 0 !important;
}
.filters.catalog-filter-panel .catalog-filter-block h3 {
margin-bottom: 8px !important;
font-size: 18px !important;
}
.filters.catalog-filter-panel .catalog-filter-row,
.filters.catalog-filter-panel .catalog-category-link,
.filters.catalog-filter-panel .catalog-brand-link,
.filters.catalog-filter-panel .catalog-subcategory-link {
min-height: 34px !important;
font-size: 14px !important;
}
.filters.catalog-filter-panel .catalog-price-input,
.filters.catalog-filter-panel .catalog-filter-apply {
height: 42px !important;
}
.filters.catalog-filter-panel .catalog-chip-list-vertical a {
min-height: 40px !important;
padding: 8px 12px !important;
display: flex;
align-items: center;
}
}
@media (min-width: 921px) {
.contacts-elegant-side {
display: grid !important;
grid-template-columns: minmax(190px, .72fr) minmax(300px, 1.35fr) minmax(270px, 1fr) !important;
grid-template-rows: auto auto !important;
grid-template-areas: none !important;
}
.contacts-elegant-brand {
position: static !important;
grid-column: 1 !important;
grid-row: 1 / 3 !important;
align-self: stretch !important;
transform: none !important;
}
.contacts-elegant-brand .contacts-elegant-side-label,
.contacts-elegant-brand h2 {
position: static !important;
transform: none !important;
}
.contacts-elegant-brand h2 {
white-space: nowrap;
letter-spacing: .12em !important;
}
.contacts-elegant-side > p {
grid-column: 2 !important;
grid-row: 1 / 3 !important;
}
.contacts-elegant-details {
grid-column: 3 !important;
grid-row: 1 !important;
}
.contacts-elegant-route {
grid-column: 3 !important;
grid-row: 2 !important;
}
}
/* Preserve the original cover crop without a late CSS-background request. */
.home-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home-hero-bg::before { z-index: 1; }
.home-hero-copy { z-index: 2; }
@media (max-width: 820px) { .home-hero-image { object-position: 58% center; } }
@media (max-width: 620px) { .home-hero-image { object-position: 57% center; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}