/* ==========================================================================
   Home page (page 143) — variant A «Друкарня». Source: Main.dc.html / MobileHome.dc.html
   Every section is a WPBakery row: [vc_row wrap_container="yes" el_class="mk-home-sec mk-home-<name>"]
   Rendered as .vc_row.mk-home-sec > .porto-wrap-container.container > .row > .vc_column_container
   ========================================================================== */

/* Section frame: 1280px content, 24px gutters, own CSS grid instead of Bootstrap columns */
/* Porto wraps the page in .container-fluid (20px side padding) > .row (−10px) > .main-content (10px):
   zero all three so the white bands run edge to edge without a horizontal scroll */
.container-fluid:has(> .main-content-wrap .mk-home-sec) { padding-left: 0; padding-right: 0; }
.main-content-wrap:has(.mk-home-sec) { margin-left: 0; margin-right: 0; }
.main-content-wrap > .main-content:has(.mk-home-sec) { padding-left: 0; padding-right: 0; }
.mk-home-sec { margin-left: 0 !important; margin-right: 0 !important; }
.mk-home-sec > .porto-wrap-container.container { max-width: 1328px; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* 1280 content + 2×24 */
.mk-home-sec > .porto-wrap-container > .row { display: grid; grid-template-columns: minmax(0, 1fr); margin-left: 0; margin-right: 0; }
.mk-home-sec > .porto-wrap-container > .row::before,
.mk-home-sec > .porto-wrap-container > .row::after { display: none; }
.mk-home-sec .vc_column_container { flex: none; width: auto; max-width: none; min-width: 0; padding-left: 0; padding-right: 0; }
.mk-home-sec .vc_column-inner { padding: 0; }
.mk-home-sec .wpb_content_element { margin-bottom: 0; }
.mk-home-sec .wpb_text_column > .wpb_wrapper > :last-child { margin-bottom: 0; }
@media (max-width: 575px) {
	.mk-home-sec > .porto-wrap-container.container { padding-left: 16px; padding-right: 16px; }
}

/* Section header (shortcodes) */
.mk-sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.mk-sec-head__titles { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.mk-sec-head__title { margin: 0; font-weight: 700; color: var(--mk-ink); letter-spacing: 0; }
h2.mk-sec-head__title { font-size: 32px; line-height: 1.15; }
h3.mk-sec-head__title { font-size: 24px; line-height: 1.2; }
.mk-sec-head__meta { font-size: 14px; color: var(--mk-ink-2); }
.mk-sec-head__link { font-weight: 500; color: var(--mk-ink); text-decoration: none; }
.mk-sec-head__link:hover, .mk-sec-head__link:focus-visible { color: var(--mk-red); }
.mk-sec-head--line { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--mk-line); }
@media (max-width: 767px) {
	h2.mk-sec-head__title { font-size: 24px; }
	h3.mk-sec-head__title { font-size: 20px; }
	.mk-sec-head__link { display: inline-flex; align-items: center; min-height: 44px; } /* touch target */
}

/* Focus (keyboard) for all home links */
.mk-home-sec a:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 2px; }

/* Catalog cards — [mk_categories] (CategoryVariants.dc.html, variant A) */
.mk-home-cats > .porto-wrap-container > .row { padding: 72px 0 24px; }
.mk-cats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 16px; }
.mk-cat-card { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); color: var(--mk-ink); text-decoration: none; transition: border-color .15s; }
.mk-cat-card:hover, .mk-cat-card:focus-visible { border-color: var(--mk-ink); color: var(--mk-ink); }
.mk-cat-card:hover .mk-cat-card__name { color: var(--mk-red); }
.mk-cat-card__art { display: flex; align-items: center; justify-content: center; height: 170px; margin: 8px; background: var(--mk-paper); border-radius: var(--mk-radius-sm); }
.mk-cat-card__art .mk-format-icon { width: 150px; height: 150px; }
.mk-cat-card__body { display: block; padding: 8px 16px 16px; }
.mk-cat-card__name { display: block; font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--mk-ink); }
.mk-cat-card__format { display: block; min-height: 36px; font-size: 13px; line-height: 1.4; color: var(--mk-ink-2); }
.mk-cat-card__count { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--mk-ink); }
@media (max-width: 760px) {
	.mk-home-cats > .porto-wrap-container > .row { padding: 48px 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.mk-cat-card { transition: none; }
}

/* «Новинки 2027» — [mk_new_products] */
.mk-home-new > .porto-wrap-container > .row { padding: 56px 0 8px; }
.mk-home-new .mk-h2 { margin: 0 0 6px; }
.mk-home-new .mk-home-sub { margin: 0; color: var(--mk-ink-2); }
.mk-np { padding: 28px 0 8px; }
.mk-np__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--mk-np-min, 200px), 100%), 1fr)); gap: 16px; }
.mk-home-pairs > .porto-wrap-container > .row { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 32px; padding: 0; } /* the .mk-np blocks carry the 28/8 padding */
.mk-np--compact .mk-np__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.mk-pcard { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); }
.mk-pcard__img { display: flex; align-items: center; justify-content: center; aspect-ratio: var(--mk-np-ratio, 2 / 3); margin: 8px; padding: 12px; background: var(--mk-paper); border-radius: var(--mk-radius-sm); box-sizing: border-box; overflow: hidden; }
.mk-pcard__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Second photo on hover, as on catalog cards: both images share one grid cell, the gallery image fades in (mouse only). */
.mk-pcard__img:has(.mk-pcard__alt) { display: grid; grid-template: 100% / 100%; place-items: center; }
.mk-pcard__img:has(.mk-pcard__alt) img { grid-area: 1 / 1; min-width: 0; min-height: 0; transition: opacity .3s; }
.mk-pcard__alt { opacity: 0; }
@media (hover: hover) {
	.mk-pcard:hover .mk-pcard__alt { opacity: 1; }
	.mk-pcard:hover .mk-pcard__img:has(.mk-pcard__alt) img:not(.mk-pcard__alt) { opacity: 0; }
}
.mk-pcard__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 4px 16px 16px; }
.mk-pcard__title { font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--mk-ink); text-decoration: none; }
.mk-pcard__title:hover { color: var(--mk-red); }
.mk-pcard__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.mk-pcard__price { font-weight: 700; font-size: 18px; color: var(--mk-ink); }
.mk-pcard__price del { font-weight: 400; font-size: 14px; color: var(--mk-ink-2); }
.mk-pcard__price ins { text-decoration: none; color: var(--mk-red); }
.mk-pcard .add_to_cart_button.loading { opacity: .6; pointer-events: none; }
.mk-pcard .add_to_cart_button.added::after { content: " ✓"; }
.mk-pcard .added_to_cart { display: none; }

.mk-np--compact .mk-pcard__img { margin: 6px; padding: 10px; }
.mk-np--compact .mk-pcard__body { gap: 4px; padding: 2px 12px 12px; }
.mk-np--compact .mk-pcard__title { font-size: 14px; line-height: 1.3; }
.mk-np--compact .mk-pcard__price { margin-top: auto; font-size: 17px; }

/* Mobile: rows become a horizontal snap carousel (Main.dc.html @container ≤760px) */
@media (max-width: 760px) {
	.mk-home-new > .porto-wrap-container > .row { padding: 40px 0 8px; }
	.mk-np--row .mk-np__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 44%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
	.mk-np--row .mk-pcard { scroll-snap-align: start; }
	.mk-np--row .mk-pcard__title { font-size: 13px; }
	.mk-np--row .mk-pcard__foot .mk-btn { height: 44px; padding: 0 10px; }
	.mk-np--compact .mk-np__grid { gap: 8px; }
	.mk-np--compact .mk-pcard__body { padding: 2px 8px 10px; }
	.mk-np--compact .mk-pcard__title { font-size: 13px; }
}

/* Trust items — [mk_trust] */
.mk-trust { display: flex; gap: 14px; align-items: flex-start; }
.mk-trust__icon { flex: none; width: 32px; height: 32px; }
.mk-trust__icon rect { rx: 2px; } /* board: payment card rx=2 */
.mk-trust__title { font-weight: 500; font-size: 16px; line-height: 1.6; color: var(--mk-ink); }
.mk-trust__text { font-size: 14px; line-height: 1.6; color: var(--mk-ink-2); }

/* Hero art — [mk_hero_art] */
.mk-hero-art { position: relative; min-height: 460px; }
.mk-hero-art__photo { position: absolute; display: block; padding: 10px; background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); box-sizing: border-box; }
.mk-hero-art__photo picture,
.mk-hero-art__photo img { display: block; width: 100%; height: auto; }
.mk-hero-art__photo--1 { left: 4%; top: 30px; width: 40%; transform: rotate(-3deg); }
.mk-hero-art__photo--2 { left: 32%; top: 0; width: 38%; z-index: 2; }
.mk-hero-art__photo--3 { right: 0; top: 150px; width: 34%; transform: rotate(3deg); }
.mk-hero-art .mk-mini-cal { position: absolute; left: 0; bottom: 0; z-index: 3; width: 236px; }

/* Month grid with the circled date — kalendar_mini_month() */
.mk-mini-cal { padding: 14px 16px; background: #fff; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); box-sizing: border-box; }
.mk-mini-cal__head { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.mk-mini-cal__head span + span { font-weight: 500; color: var(--mk-ink-2); }
.mk-mini-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; font-size: 12px; line-height: 24px; text-align: center; }
.mk-mini-cal__wd { font-weight: 500; color: var(--mk-ink-2); }
.mk-mini-cal .is-weekend { color: var(--mk-red); }
.mk-mini-cal .is-mark { border: 2px solid var(--mk-red); border-radius: var(--mk-radius-sm); line-height: 20px; font-weight: 700; color: var(--mk-red); }

/* About photos — [mk_product_photos] */
.mk-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-photos a { display: block; overflow: hidden; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); }
.mk-photos img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }

/* Hero */
.mk-home-hero > .porto-wrap-container > .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; padding: 72px 0 64px; }
.mk-home-sec .mk-home-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; font-size: 14px; font-weight: 500; line-height: 1.6; color: var(--mk-ink-2); }
.mk-home-eyebrow::before { content: ""; flex: none; width: 18px; height: 18px; border: 2px solid var(--mk-red); border-radius: var(--mk-radius-sm); box-sizing: border-box; }
.mk-home-sec .mk-home-hero__title { margin: 0 0 22px; font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; color: var(--mk-ink); }
.mk-home-sec .mk-home-hero__lead { margin: 0 0 28px; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--mk-ink-2); }
.mk-home-sec .mk-home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.mk-home-actions .mk-btn { height: 52px; padding: 0 28px; font-size: 16px; }
@media (max-width: 760px) {
	.mk-home-hero > .porto-wrap-container.container { padding-left: 16px; padding-right: 16px; } /* board: .hero padding 40px 16px */
	.mk-home-hero > .porto-wrap-container > .row { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 40px 0; }
	.mk-home-hero__art { display: none; }
	.mk-home-sec .mk-home-hero__title { font-size: 36px; }
}

/* Trust strip */
.mk-home-trust { background: #fff; border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-home-trust > .porto-wrap-container > .row { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 24px; padding: 28px 0; }

/* Wholesale band (keys and texts come from [mk_wholesale part=…], WooCommerce → «Оптові умови») */
.mk-home-wholesale > .porto-wrap-container { padding-top: 72px; padding-bottom: 72px; }
.mk-home-wholesale > .porto-wrap-container > .row { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; align-items: center; padding: 56px 48px; background: var(--mk-ink); border-radius: 6px; color: #fff; } /* board: 6px on the dark band */
.mk-home-wholesale h2 { margin: 0 0 18px; font-size: 34px; line-height: 1.15; font-weight: 700; color: #fff; }
.mk-home-wholesale p { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--mk-line); }
.mk-home-sec.mk-home-wholesale .mk-home-actions { margin: 0; }
.mk-home-tel { background: transparent; border-color: #fff; color: #fff; }
.mk-home-tel:hover, .mk-home-tel:focus-visible { background: #fff; border-color: #fff; color: var(--mk-ink); }
.mk-home-wholesale a:focus-visible { outline-color: #fff; }
.mk-home-terms { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mk-home-terms li { display: flex; gap: 16px; align-items: center; margin: 0; padding: 18px 20px; border: 1px solid var(--mk-ink-2); border-radius: var(--mk-radius); color: var(--mk-line); }
.mk-home-terms b { flex: none; min-width: 92px; padding: 6px 8px; border: 2px solid var(--mk-red); border-radius: var(--mk-radius-sm); box-sizing: border-box; text-align: center; font-weight: 700; color: #fff; }
.mk-home-terms li:has(> b:empty) { display: none; } /* terms switched off in «Оптові умови» */
@media (max-width: 575px) {
	.mk-home-wholesale > .porto-wrap-container { padding-top: 48px; padding-bottom: 48px; }
	.mk-home-wholesale > .porto-wrap-container > .row { gap: 28px; padding: 32px 20px; }
	.mk-home-wholesale h2 { font-size: 28px; }
	.mk-home-terms li { padding: 14px; gap: 12px; }
}

/* About */
.mk-home-about { background: #fff; border-top: 1px solid var(--mk-line); }
.mk-home-about > .porto-wrap-container > .row { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 48px; align-items: center; padding: 64px 0; }
.mk-home-about .mk-h2 { margin: 0 0 14px; }
.mk-home-about p { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--mk-ink-2); }
.mk-home-more { font-weight: 500; color: var(--mk-ink); text-decoration: underline; }
.mk-home-more:hover { color: var(--mk-red); }
@media (max-width: 760px) {
	.mk-home-about > .porto-wrap-container > .row { gap: 28px; padding: 48px 0; }
	.mk-home-more { display: inline-flex; align-items: center; min-height: 44px; } /* touch target */
}