/* Вердиан: modern catalogue, stone and charcoal. Manrope. */
:root {
	--d-bg: #faf9f7;
	--d-surface: #ffffff;
	--d-alt: #f1eee9;
	--d-soft: #ece7df;
	--d-dark: #2a2826;
	--d-heading: #1f1d1b;
	--d-text: #383532;
	--d-muted: #686259;
	--d-line: #e4dfd7;
	--d-line-strong: #cdc6bb;
	--d-accent: #2a2826;
	--d-accent-hover: #000000;
	--d-accent-ink: #ffffff;
	--d-accent-text: #7a5f3f;
	--d-dark-accent: #d6bf9c;
	--d-font-head: "Manrope", system-ui, sans-serif;
	--d-font-body: "Manrope", system-ui, sans-serif;
	--d-head-weight: 600;
	--d-head-tracking: -0.03em;
	--d-radius: 10px;
	--d-radius-lg: 18px;
	--d-radius-btn: 999px;
	--d-header-bg: rgb(250 249 247 / 0.95);
	--d-phone-bg: #ece7df;
	--d-phone-ink: #1f1d1b;
	--d-footer: #2a2826;
}

h1 { font-size: clamp(2.25rem, 1.4rem + 3.2vw, 4rem); line-height: 1.05; }
.logo__name { font-weight: 700; letter-spacing: -0.02em; }
.hdr__cart { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border: 1px solid var(--d-line); border-radius: 999px; color: var(--d-heading); font-size: 0.875rem; font-weight: 600; text-decoration: none; }
.hdr__cart b { display: grid; place-items: center; min-width: 1.375rem; height: 1.375rem; border-radius: 999px; background: var(--d-heading); color: #fff; font-size: 0.75rem; }

.hero { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); }
.hero__grid { display: grid; gap: 1.25rem; }
@media (min-width: 60em) { .hero__grid { grid-template-columns: 1.3fr 1fr; } }
.hero__main { display: flex; flex-direction: column; justify-content: flex-end; min-height: 30rem; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); border-radius: var(--d-radius-lg); background: radial-gradient(60% 70% at 85% 25%, #e9dcc6, transparent), linear-gradient(160deg, #f1ebe2, #ddd2c2); }
.hero__main > * + * { margin-top: 1.25rem; }
.hero__main .lead { max-width: 30rem; color: #5a5148; }
.hero__side { display: grid; gap: 1.25rem; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 14rem; padding: 1.5rem; overflow: hidden; border-radius: var(--d-radius-lg); background: var(--d-alt); color: var(--d-heading); text-decoration: none; }
.tile--dark { background: var(--d-dark); color: #fff; }
.tile h2 { position: relative; z-index: 1; color: inherit; font-size: 1.5rem; }
.tile p { position: relative; z-index: 1; font-size: 0.9375rem; opacity: 0.8; }
.tile svg.art { position: absolute; right: -1rem; bottom: -1rem; width: 11rem; height: 11rem; }

.cats { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .cats { grid-template-columns: repeat(5, 1fr); } }
.cat { display: grid; gap: 0.75rem; padding: 1.25rem; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface); color: var(--d-heading); font-weight: 600; text-decoration: none; }
.cat svg.art { width: 100%; height: 6.5rem; }
.cat small { color: var(--d-muted); font-weight: 500; }

.products { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.product { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--d-line); border-radius: var(--d-radius-lg); background: var(--d-surface); }
.product__img { display: grid; place-items: center; aspect-ratio: 1; background: var(--d-alt); }
.product__img svg { width: 70%; height: 70%; }
.product__body { display: flex; flex-direction: column; gap: 0.375rem; flex: 1; padding: 1.25rem; }
.product__cat { color: var(--d-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.product h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }
.product__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.75rem; }
.product__price { color: var(--d-heading); font-size: 1.125rem; font-weight: 700; }
.product__price small { color: var(--d-muted); font-size: 0.75rem; font-weight: 500; }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; }

.how { display: grid; gap: 1.25rem; counter-reset: how; }
@media (min-width: 48em) { .how { grid-template-columns: repeat(4, 1fr); } }
.how li { counter-increment: how; padding: 1.5rem; border-radius: var(--d-radius-lg); background: rgb(255 255 255 / 0.06); }
.how li::before { content: counter(how); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-bottom: 1rem; border-radius: 999px; background: var(--d-dark-accent); color: var(--d-dark); font-weight: 700; }
.how h3 { margin-bottom: 0.5rem; font-size: 1.125rem; }
.how p { font-size: 0.9375rem; color: #cfc9c0; }

/* Catalogue page */
.shop { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 60em) { .shop { grid-template-columns: 15rem 1fr; } }
.filters { display: grid; gap: 1.75rem; }
@media (min-width: 60em) { .filters { position: sticky; top: 6.5rem; } }
.filters h2 { margin-bottom: 0.75rem; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; }
.filters label { display: flex; align-items: center; gap: 0.625rem; padding-block: 0.3rem; font-size: 0.9375rem; }
.filters input { width: 1.125rem; height: 1.125rem; accent-color: var(--d-heading); }
.filters label span { margin-left: auto; color: var(--d-muted); font-size: 0.8125rem; }
.shop__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; color: var(--d-muted); font-size: 0.9375rem; }
.shop__bar select { min-height: 2.75rem; padding: 0.5rem 0.875rem; border: 1px solid var(--d-line-strong); border-radius: 999px; background: var(--d-surface); }
.help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; margin-top: 2.5rem; padding: 1.75rem; border-radius: var(--d-radius-lg); background: var(--d-alt); }
.help h2 { font-size: 1.375rem; }
.ftr .logo__mark { color: #d6bf9c; }
@media (max-width: 64em) { .hdr__cart { display: none; } }
@media (max-width: 40em) { .hdr__inner { gap: 0.75rem; } }