/* ==========================================================================
   Kalendar design system — tokens and base components (variant A «Друкарня»)
   ========================================================================== */
:root {
	--mk-red: #d20a11;
	--mk-red-700: #a8080e;
	--mk-ink: #302a28;
	--mk-ink-2: #5e5551;
	--mk-paper: #f7f3f0;
	--mk-paper-2: #efe9e4;
	--mk-line: #e6dfda;
	--mk-footer: #ebe4de;
	--mk-band: #e3dbd4;
	--mk-band-line: #d9d0c9;
	--mk-green: #1f6f5c;
	--mk-radius: 4px;    /* page boards: buttons, fields, cards, panels (owner, 24.10 — over DesignSystem's square corners) */
	--mk-radius-sm: 3px; /* page boards: small squares — pagination, step numbers, image wells inside cards */
}

body { color: var(--mk-ink); background: var(--mk-paper); }

.mk-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
@media (max-width: 575px) { .mk-container { padding: 0 16px; } }

.mk-h1 { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 700; color: var(--mk-ink); letter-spacing: -0.01em; }
.mk-h2 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 700; color: var(--mk-ink); }
.mk-lead { font-size: 17px; line-height: 1.6; color: var(--mk-ink-2); }
.mk-eyebrow { font-size: 13px; color: var(--mk-ink-2); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 767px) { .mk-h1 { font-size: 30px; } .mk-h2 { font-size: 24px; } }

/* Buttons */
.mk-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: var(--mk-radius);
	font: inherit; font-weight: 500; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.mk-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
/* :focus/:active keep the button's text colour: Porto's a:focus, a:active { color: primary-dark } (0,1,1) beats .mk-btn--*,
   and a link focused by a click stays focused when the page comes back from the back/forward cache (red text on red). */
.mk-btn--primary, .mk-btn--primary:focus, .mk-btn--primary:active { background: var(--mk-red); border-color: var(--mk-red); color: #fff; }
.mk-btn--primary:hover, .mk-btn--primary:focus-visible { background: var(--mk-red-700); border-color: var(--mk-red-700); color: #fff; }
.mk-btn--dark, .mk-btn--dark:focus, .mk-btn--dark:active { background: var(--mk-ink); border-color: var(--mk-ink); color: #fff; }
.mk-btn--dark:hover, .mk-btn--dark:focus-visible { background: #000; border-color: #000; color: #fff; }
.mk-btn--outline, .mk-btn--outline:focus, .mk-btn--outline:active { background: #fff; border-color: var(--mk-ink); color: var(--mk-ink); }
.mk-btn--outline:hover, .mk-btn--outline:focus-visible { background: var(--mk-ink); color: #fff; }

/* Cards, badges, steps */
.mk-card { background: #fff; border: 1px solid var(--mk-line); padding: 24px; }
.mk-card--accent { border-top: 3px solid var(--mk-red); }
.mk-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; font-size: 13px; font-weight: 500; background: var(--mk-paper-2); color: var(--mk-ink); }
.mk-badge--processing { background: #fff4d6; color: #7a5a00; }
.mk-badge--completed { background: #e3efe9; color: var(--mk-green); }
.mk-badge--pending { background: var(--mk-paper-2); color: var(--mk-ink); }
.mk-badge--cancelled { background: #f6e1e1; color: var(--mk-red-700); }
.mk-step { flex: 0 0 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; background: #f1ece8; font-weight: 700; font-size: 13px; color: var(--mk-ink); }

/* Woo / Porto buttons get the same look */
.woocommerce .button, .woocommerce button.button, .woocommerce a.button, .woocommerce input.button,
.btn, .single_add_to_cart_button, .checkout-button, #place_order {
	border-radius: var(--mk-radius) !important; font-weight: 500; text-transform: none; letter-spacing: 0;
}
.woocommerce .button.alt, .single_add_to_cart_button, .checkout-button, #place_order, .btn-primary {
	background: var(--mk-red) !important; border-color: var(--mk-red) !important; color: #fff !important;
}
.woocommerce .button.alt:hover, .single_add_to_cart_button:hover, .checkout-button:hover, #place_order:hover, .btn-primary:hover {
	background: var(--mk-red-700) !important; border-color: var(--mk-red-700) !important;
}

/* Form fields */
.woocommerce form .input-text, .woocommerce form select, .woocommerce-page form .input-text,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="number"], select, textarea {
	border: 1.5px solid #cfc5be; border-radius: var(--mk-radius); background: #fff; color: var(--mk-ink); box-shadow: none;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], select { min-height: 48px; }
input:focus, select:focus, textarea:focus { border-color: var(--mk-ink); }

/*************** ADD YOUR CUSTOM CSS HERE  ***************/


/* ---------- Accessibility ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.button:focus-visible {
	outline: 3px solid var(--mk-ink) !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 5px #fff;
}
/* closed dropdowns must not take keyboard focus */
#header .main-menu li:not(:hover):not(:focus-within) > .popup {
	visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* sentence case: mobile menu and breadcrumbs (theme forces capitalize / uppercase) */
.mobile-menu.accordion-menu li > a,
.breadcrumbs-wrap,
.breadcrumbs-wrap .breadcrumb,
.breadcrumbs-wrap .breadcrumb a,
.breadcrumbs-wrap .breadcrumb li > span {
	text-transform: none !important;
}
.breadcrumbs-wrap .breadcrumb {
	font-size: 13px;
	letter-spacing: 0;
}

/* Porto breadcrumbs on every page, as on the boards: 13px, «›», links #5e5551, current page graphite. */
.page-top .breadcrumbs-wrap { font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--mk-ink-2); }
.page-top ul.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; background: none; font-size: 13px; }
.page-top ul.breadcrumb > li { color: var(--mk-ink); text-transform: none; font-size: 13px; line-height: 1.6; }
.page-top ul.breadcrumb > li a { color: var(--mk-ink-2); text-decoration: none; }
.page-top ul.breadcrumb > li a:hover,
.page-top ul.breadcrumb > li a:focus-visible { color: var(--mk-red); text-decoration: underline; }
.page-top ul.breadcrumb > li a:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 2px; }
/* Porto draws the separator with ::before in its icon font and floats it right */
.page-top ul.breadcrumb > li .delimiter,
.page-top ul.breadcrumb > li .delimiter.delimiter-2 { display: inline-block; float: none; width: auto; margin: 0 8px; font-family: inherit; font-style: normal; font-size: 13px; color: var(--mk-ink-2); }
.page-top ul.breadcrumb > li .delimiter.delimiter-2::before { content: "›"; position: static; right: auto; font-family: inherit; }

/* Gutenberg text alignment (Публічний договір): Porto's speed wizard dequeues the block library CSS (dequeue_wp_block_css). */
.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }

.mk-format-icon {
	display: block;
	width: 100%;
	height: 100%;
}

/* --------------------------------------------------------------------------
   Shared Woo UI (plan 06): kalendar_breadcrumbs() for pages whose Porto page
   header is hidden (cart, checkout…). Same look as plan 04's Porto breadcrumbs
   (base.css, .page-top). Chips reuse .mk-chips from shop.css.
   -------------------------------------------------------------------------- */
.mk-crumbs { font-size: 13px; font-weight: 400; line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--mk-ink-2); }
.mk-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; }
.mk-crumbs li { display: inline-flex; align-items: center; color: var(--mk-ink); font-size: 13px; line-height: 1.6; }
.mk-crumbs li + li::before { content: "›"; display: inline-block; margin: 0 8px; font-style: normal; color: var(--mk-ink-2); }
.mk-crumbs a { color: var(--mk-ink-2); text-decoration: none; }
.mk-crumbs a:hover,
.mk-crumbs a:focus-visible { color: var(--mk-red); text-decoration: underline; }
.mk-crumbs a:focus-visible { outline: 2px solid var(--mk-ink); outline-offset: 2px; }
.mk-crumbs [aria-current="page"] { color: var(--mk-ink); }

/* Own category icons from the media library (plan 12): same box as the built-in schemes */
img.mk-cat-icon { display: block; width: 100%; height: 100%; object-fit: contain; }
img.mk-cat-icon--chip { width: 36px; height: 44px; }