/* ==========================================================================
   Maiker — design system
   Tokens extracted from the source site's compiled CSS (Shopify Dawn, t/7).
   Do not "improve" these values by eye — they are measured, not guessed.
   ========================================================================== */

/* --- Inter, self-hosted so the theme works with no external requests -----
   These are the source's OWN two faces (Shopify's inter_n4 / inter_n7), not a
   Google-Fonts rebuild. That matters: Shopify's build is metrically narrower —
   "Premium Off-Road Accessories" at 56px/700 measures 811.7px in Shopify's
   file but 858.9px in the Google-Fonts build, a 5.8% drift that shifts every
   line break on the page. Both cover full Latin-1 plus Latin Extended-A
   (464 codepoints), so the separate latin-ext files are not needed.

   The source ships exactly two weights: 400 and 700. Anything declaring
   font-weight 500 or 600 therefore resolves to 400 / 700 respectively — that
   is what makes the source's weight-600 headings render as bold. Shipping the
   same two faces reproduces that behaviour instead of approximating it.
   ------------------------------------------------------------------------ */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-700-normal.woff2") format("woff2");
}

:root {
	/* --- Palette ------------------------------------------------------- */
	--mk-red: #d8232f;            /* --color-button / --color-link          */
	--mk-red-dark: #6a1117;       /* --color-background-contrast on red     */
	--mk-black: #0e0e0d;          /* --color-foreground (near-black)        */
	--mk-charcoal: #1f1f21;       /* secondary dark surface                 */
	--mk-gray-100: #f5f5f5;       /* light section background               */
	--mk-gray-200: #e8e8e8;
	--mk-gray-300: #b5b5b5;
	--mk-gray-400: #919189;
	--mk-white: #fff;

	/* --- Typography ---------------------------------------------------- */
	--mk-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mk-body-size: 16px;         /* source: body { font-size: 1.6rem }     */
	--mk-body-tracking: 0.6px;    /* source: letter-spacing: .06rem         */
	--mk-heading-tracking: 0.84px;/* source: calc(1.4 * .06rem)             */
	--mk-heading-weight: 400;     /* headings are regular weight, not bold  */
	--mk-heading-scale: 1.4;

	/* --- Layout --------------------------------------------------------
	   ONE content width for the whole site.

	   The source's own layout is ragged: most sections cap their content at
	   1600px minus 50px of side padding (a 1500px column), but a handful of
	   sections carry their own ad-hoc widths — the contact form section is
	   1000px (848px of content), the about-page stats strip 1420px, the
	   contact page's help block 1100px, the collection FAQ 1200px. That is
	   exactly the inconsistency this theme deliberately does NOT reproduce.

	   Everything section-level resolves to `--mk-content`. Narrower measures
	   are reserved for text blocks, where a long line is a genuine
	   readability problem rather than a layout decision.
	   -------------------------------------------------------------------- */
	--mk-page-width: 1600px;      /* outer cap, incl. padding               */
	--mk-gutter: 50px;            /* source: .page-width padding 0 5rem     */
	--mk-gutter-mobile: 15px;     /* source: .page-width padding 0 1.5rem   */
	--mk-content: 1500px;         /* = 1600 - 2 * 50 — the content column   */
	--mk-measure: 800px;          /* long-form prose measure                */
	--mk-gap: 40px;               /* grid-desktop spacing                   */
	--mk-gap-mobile: 20px;        /* grid-mobile spacing                    */

	/* --- Shape --------------------------------------------------------- */
	--mk-radius-pill: 40px;       /* buttons — signature detail             */
	--mk-radius-media: 0px;       /* images are square-cornered             */
	--mk-radius-card: 8px;        /* product card                           */
	--mk-radius-blog: 10px;       /* blog card                              */
	--mk-radius-input: 4px;

	--mk-transition: 0.2s ease;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.mk {
	margin: 0;
	font-family: var(--mk-font);
	font-size: var(--mk-body-size);
	font-weight: 400;
	letter-spacing: var(--mk-body-tracking);
	line-height: 1.6;
	color: var(--mk-white);
	background: var(--mk-black);
	overflow-x: hidden;
}

.mk img { max-width: 100%; height: auto; display: block; }

.mk a { color: var(--mk-red); text-decoration: none; transition: opacity var(--mk-transition); }
.mk a:hover { opacity: 0.85; }

.mk button,
.mk input,
.mk select,
.mk textarea { font-family: inherit; font-size: inherit; }

.mk :focus-visible { outline: 2px solid var(--mk-red); outline-offset: 3px; }

.mk .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mk-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--mk-red);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--mk-radius-input) 0;
}
.mk .mk-skip-link:focus { left: 0; color: #fff; }

/* ==========================================================================
   Typography — scale mirrors Dawn's calc(--font-heading-scale * Nrem)
   ========================================================================== */

.mk h1, .mk h2, .mk h3, .mk h4, .mk h5, .mk h6,
.mk .h0, .mk .h1, .mk .h2, .mk .h3, .mk .h4, .mk .h5 {
	font-family: var(--mk-font);
	font-weight: var(--mk-heading-weight);
	line-height: 1.2;
	margin: 0 0 0.5em;
	color: inherit;
	letter-spacing: var(--mk-heading-tracking);
}

.mk h1, .mk .h1 { font-size: 42px; }         /* 1.4 × 3rem  */
.mk h2, .mk .h2 { font-size: 28px; }         /* 1.4 × 2rem  */
.mk h3, .mk .h3 { font-size: 23.8px; }       /* 1.4 × 1.7rem */
.mk h4, .mk .h4 { font-size: 21px; }         /* 1.4 × 1.5rem */
.mk h5, .mk .h5 { font-size: 16.8px; }       /* 1.4 × 1.2rem */
.mk h6, .mk .h6 { font-size: 14px; }

.mk .h0 { font-size: 56px; }                 /* 1.4 × 4rem  */

@media screen and (min-width: 750px) {
	.mk h1, .mk .h1 { font-size: 56px; }       /* 1.4 × 4rem   */
	.mk h3, .mk .h3 { font-size: 25.2px; }     /* 1.4 × 1.8rem */
	.mk h5, .mk .h5 { font-size: 18.2px; }     /* 1.4 × 1.3rem */
	.mk .h0 { font-size: 72.8px; }             /* 1.4 × 5.2rem */
}

/* --- Bold run inside h1 / h2 --------------------------------------------
   The source marks exactly three headings with <strong>: the hero H1, the
   featured-products H2 and the inquiry H2. Its stylesheet ships no `strong`
   rule at all, so the UA default `font-weight: bolder` applies and, measured
   against the 400 heading weight, resolves to the 700 cut of Inter.
   Scoped to h1/h2 so it cannot disturb the other <strong> runs the theme
   uses elsewhere (footer labels, capability steps), which the source does
   not bold.
   ---------------------------------------------------------------------- */

.mk h1 strong,
.mk h2 strong {
	font-weight: 700;
}

/* --- Section heading variants ------------------------------------------
   The source defines these as bespoke classes inside per-section <style>
   blocks. Sizes and weights below are the source's own values.
   Selectors are `.mk .mk-h--*` so they outrank the base `.mk h2` rule.
   ---------------------------------------------------------------------- */

/* .complexity-title / .maiker-title-title — 48px, weight 600 */
.mk .mk-h--display {
	font-size: 34px;
	font-weight: 600;
	line-height: 1.2;
}

/* .b2b-agent-intro__title — 42px, weight 600 */
.mk .mk-h--partner {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
}

/* .maike-insight__title — 34px desktop / 28 tablet / 22 mobile, weight 600 */
.mk .mk-h--insight {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}

/* .canvas-title — 22px, weight 600 */
.mk .mk-h--sub {
	font-size: 22px;
	font-weight: 600;
	line-height: 1.25;
}

/* Dawn's `.h1` — used by the products and blog section titles */
.mk .mk-h--xl {
	font-size: 42px;
	font-weight: 400;
	line-height: 1.2;
}

@media screen and (min-width: 750px) {
	.mk .mk-h--display { font-size: 40px; }
	.mk .mk-h--partner { font-size: 38px; }
	.mk .mk-h--insight { font-size: 28px; }
	.mk .mk-h--xl { font-size: 56px; }
}

@media screen and (min-width: 990px) {
	.mk .mk-h--display { font-size: 48px; line-height: 1.15; }
	.mk .mk-h--partner { font-size: 42px; }
	.mk .mk-h--insight { font-size: 34px; }
}

.mk p { margin: 0 0 1em; }
.mk p:last-child { margin-bottom: 0; }

.mk .mk-rte ul, .mk .mk-rte ol { padding-left: 1.4em; margin: 0 0 1em; }
.mk .mk-rte li { margin-bottom: 0.4em; }

.mk .mk-text-center { text-align: center; }
.mk .mk-muted { color: var(--mk-gray-400); }

/* ==========================================================================
   Layout
   ========================================================================== */

.mk-container {
	width: 100%;
	max-width: var(--mk-page-width);
	margin: 0 auto;
	padding: 0 var(--mk-gutter);
}

/* --- Width unification --------------------------------------------------
   These are section-level containers that each used to carry its own
   max-width, which is what made the source's pages look ragged — the home
   page's bottom form sat at 1000px while everything above it ran at 1600px,
   so the page visibly narrowed at the end. They now all resolve to the same
   content column.

   `.mk-inquiry__card`, `.mk-collection__intro` and `.mk-alert` are NOT listed
   here: they already live inside a `.mk-container`, so they simply fill it
   (`max-width: none`) rather than nesting a second width constraint.
   ---------------------------------------------------------------------- */

.mk-contact-help__container,
.mk-contact-info__container,
.mk-faq,
.mk-order-received,
.mk-account,
.mk-policy__container {
	width: 100%;
	max-width: var(--mk-page-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--mk-gutter);
	padding-right: var(--mk-gutter);
}

/* The site is dark by default. The source's `:root` carries
   `--color-background: 14,14,13` / `--color-foreground: 255,255,255`, and its
   <body> wears the `gradient` class which paints that background. Only a
   handful of sections opt into a light scheme (`color-scheme-3` = #ffffff,
   the custom `…b54afbf03a78` = #f5f5f5). So `.mk-section` is dark and
   `--light` / `--gray` are the exceptions, not the other way round. */

.mk-section { padding: 72px 0; }
.mk-section--tight { padding: 48px 0; }

.mk-section--light { background: var(--mk-white); color: var(--mk-black); }

.mk-section--dark { background: var(--mk-black); color: var(--mk-white); }

.mk-section__head { max-width: 900px; margin: 0 auto 40px; text-align: center; }
.mk-section__head h2 { margin-bottom: 14px; }
.mk-section__head h1 { margin-bottom: 14px; }
.mk-section__head p { color: var(--mk-gray-400); font-size: 14px; margin: 0; }
.mk-section--light .mk-section__head p { color: var(--mk-gray-400); }
.mk-section--dark .mk-section__head p { color: var(--mk-gray-300); }

/* ==========================================================================
   Buttons — pill shaped, flat, no shadow

   Note on specificity: the base `.mk a` rule is (0,1,1), so every component
   rule here is written as `.mk .mk-btn` (0,2,0) to win over it. Writing plain
   `.mk-btn` makes the label inherit the red link colour — red on red.
   ========================================================================== */

.mk .mk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 47px;
	padding: 0 30px;
	border: 1px solid transparent;
	border-radius: var(--mk-radius-pill);
	background: var(--mk-red);
	color: var(--mk-white);
	font-size: 15px;              /* source: .button font-size 1.5rem       */
	font-weight: 400;
	line-height: 1;
	letter-spacing: 1px;          /* source: .button letter-spacing .1rem   */
	text-align: center;
	cursor: pointer;
	transition: background var(--mk-transition), color var(--mk-transition), border-color var(--mk-transition);
}

.mk .mk-btn:hover { background: var(--mk-red-dark); color: var(--mk-white); opacity: 1; }

.mk .mk-btn--dark { background: var(--mk-black); color: var(--mk-white); }
.mk .mk-btn--dark:hover { background: var(--mk-charcoal); color: var(--mk-white); }

/* Secondary button, exactly as the source renders it on the hero:
   transparent fill, 1px red border, red label. */
.mk .mk-btn--outline {
	background: transparent;
	color: var(--mk-red);
	border-color: var(--mk-red);
}
.mk .mk-btn--outline:hover { background: var(--mk-red); color: var(--mk-white); }

.mk .mk-btn--ghost {
	background: transparent;
	color: var(--mk-black);
	border-color: rgba(14, 14, 13, 0.2);
}
.mk .mk-btn--ghost:hover { background: var(--mk-black); color: var(--mk-white); border-color: var(--mk-black); }

.mk .mk-btn--sm { min-height: 38px; padding: 0 20px; font-size: 13px; }
.mk .mk-btn--block { width: 100%; }

/* ==========================================================================
   Announcement bar
   ========================================================================== */

.mk-announce {
	background: var(--mk-white);
	border-bottom: 1px solid var(--mk-gray-200);
	font-size: 14px;
}

.mk-announce__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 34px;
	padding-top: 3px;
	padding-bottom: 3px;
}

.mk-announce__msg { margin: 0; text-align: center; flex: 1; }

.mk-lang {
	position: relative;
	font-size: 13px;
}

.mk-lang__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 4px 0;
	cursor: pointer;
	color: var(--mk-black);
}

.mk-lang__chev { width: 9px; height: 9px; transition: transform var(--mk-transition); }
.mk-lang[data-open="true"] .mk-lang__chev { transform: rotate(180deg); }

.mk-lang__list {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 150px;
	margin: 0;
	padding: 8px;
	list-style: none;
	background: var(--mk-white);
	border: 1px solid var(--mk-gray-200);
	border-radius: var(--mk-radius-input);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	display: none;
	z-index: 60;
}
.mk-lang[data-open="true"] .mk-lang__list { display: block; }
.mk-lang__list a { display: block; padding: 7px 10px; border-radius: 4px; color: var(--mk-black); font-size: 13px; }
.mk-lang__list a:hover { background: var(--mk-gray-100); opacity: 1; }

/* ==========================================================================
   Header
   ========================================================================== */

.mk-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--mk-black);
	color: var(--mk-white);
}

.mk-header__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 89px;             /* measured: source header is 89px tall   */
}

.mk-header__logo { flex: 0 0 auto; }
/* Source ships logo2.png at width="160" height="50.526" — the visible ink is
   155x31 because the PNG carries transparent padding. Match the box, not the ink. */
.mk-header__logo img { width: 160px; height: auto; }

/* --- Primary nav ---------------------------------------------------- */

.mk-nav { flex: 1 1 auto; }

.mk-nav__list {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk-nav__item { position: relative; }

.mk .mk-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 12px;               /* source: .header__menu-item padding 1.2rem */
	color: rgba(255, 255, 255, 0.75);   /* source: rgba(--color-foreground,.75) */
	font-size: 13.5px;           /* solved from the source's label ink widths */
	font-weight: 400;            /* source ships only 400/700 — 500 falls to 400 */
	text-transform: uppercase;
	white-space: nowrap;
}
.mk .mk-nav__link:hover { color: var(--mk-white); opacity: 1; }

/* The chevron is a `<span>` wrapping the icon's `<svg>`. Sizing the span does
   nothing — an inline SVG carries its own width/height attributes — so the size
   has to be applied to the SVG itself. */
.mk-nav__chev { display: inline-flex; align-items: center; }
.mk-nav__chev svg { width: 8px; height: 8px; opacity: 0.8; transition: transform 0.2s ease; }

/* Below 990px the nav collapses into a drawer and the mega panel is no longer
   revealed by `:hover` — `assets/js/main.js` toggles `data-expanded` on the
   item instead. Without this the chevron keeps pointing down while the panel
   below it is open, so the control reads as "closed".

   The `--has-mega` class is what the script binds to (it is the marker for
   "this item owns a panel"), so the rotation is scoped to it rather than to
   every nav item. */
.mk-nav__item--has-mega[data-expanded="true"] > .mk-nav__link .mk-nav__chev svg {
	transform: rotate(180deg);
}

/* The current item is full-strength white and underlined — not red. The source
   colours it rgb(--color-foreground) and underlines with a .3rem offset.

   Both naming schemes are listed. `mk-nav__item--current` is what the theme's
   walker emits; WordPress's own `current-menu-item` and friends are kept as a
   fallback so the highlight survives a child theme swapping the walker back out
   for the default one. */
.mk .mk-nav__item--current > .mk-nav__link,
.mk .current-menu-item > .mk-nav__link,
.mk .current_page_item > .mk-nav__link,
.mk .current-menu-ancestor > .mk-nav__link,
.mk .current-menu-parent > .mk-nav__link,
.mk .current_page_ancestor > .mk-nav__link,
.mk .current_page_parent > .mk-nav__link {
	color: var(--mk-white);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

/* --- Mega menu ------------------------------------------------------ */

.mk-mega {
	position: absolute;
	left: 0;
	top: 100%;
	display: none;
	min-width: 620px;
	padding: 28px 32px;
	background: var(--mk-white);
	color: var(--mk-black);
	border-top: 2px solid var(--mk-red);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.14);
	z-index: 55;
}

.mk-nav__item:hover > .mk-mega,
.mk-nav__item:focus-within > .mk-mega { display: block; }

.mk-mega--cols-4 { min-width: 900px; }

.mk-mega__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 40px;
}
.mk-mega--cols-4 .mk-mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mk-mega__col h3 {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 12px;
	color: var(--mk-black);
}

.mk-mega__col ul { margin: 0; padding: 0; list-style: none; }
.mk-mega__col li { margin-bottom: 3px; }

/* A submenu's children can themselves have children — `wp_nav_menu` runs to
   depth 3 here, and the walker renders anything below the first level as a
   nested list inside the same column. `.mk-mega__item` is on every link row the
   walker emits; `.mk-mega__item--parent` marks a row that has its own sublist. */
.mk-mega__item { margin-bottom: 3px; }
.mk-mega__sublist { margin: 4px 0 8px 12px; }
.mk-mega__sublist .mk-mega__item { margin-bottom: 2px; }
.mk-mega__item--parent > a { color: var(--mk-black); font-weight: 600; }

.mk-mega__col a {
	display: block;
	padding: 5px 0;
	font-size: 13.5px;
	color: var(--mk-gray-400);
	line-height: 1.45;
}
.mk-mega__col a:hover { color: var(--mk-red); opacity: 1; }

/* --- Header icons --------------------------------------------------- */

.mk-header__actions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.mk-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--mk-white);
	cursor: pointer;
	position: relative;
}
.mk .mk-icon-btn,
.mk .mk-icon-btn:hover { color: var(--mk-white); }
.mk .mk-icon-btn:hover { color: var(--mk-red); }
.mk-icon-btn svg { width: 19px; height: 19px; }

.mk-cart-count {
	position: absolute;
	top: 4px;
	right: 4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--mk-red);
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}

/* The counter element always exists so WooCommerce's AJAX fragment has
   something to replace; an empty cart hides it instead of omitting it. */
.mk-cart-count--empty { display: none; }

/* --- Search drawer -------------------------------------------------- */

.mk-search-drawer {
	display: none;
	background: var(--mk-charcoal);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 18px 0;
}
.mk-search-drawer[data-open="true"] { display: block; }
.mk-search-drawer form { display: flex; gap: 10px; max-width: 720px; margin: 0 auto; }

.mk-search-drawer input[type="search"] {
	flex: 1;
	min-height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: var(--mk-radius-pill);
	background: var(--mk-white);
	color: var(--mk-black);
}

/* --- Mobile nav toggle ---------------------------------------------- */

.mk-burger {
	display: none;
	width: 40px;
	height: 40px;
	background: none;
	border: 0;
	color: var(--mk-white);
	cursor: pointer;
	align-items: center;
	justify-content: center;
}
.mk-burger svg { width: 22px; height: 22px; }

/* ==========================================================================
   Hero banner
   ========================================================================== */

.mk-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50vw;             /* source: banner media padding-bottom 50% */
	overflow: hidden;
	background: var(--mk-black);  /* source banner sits on color-scheme-1 */
	color: var(--mk-white);
	text-align: center;
}

.mk-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.mk-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.mk-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.34) 55%, rgba(0, 0, 0, 0.5) 100%);
}

.mk-hero__body {
	position: relative;
	z-index: 1;
	/* Source: .banner--desktop-transparent .banner__box { padding: 4rem 0;
	   max-width: 89rem } → an 890px text column. That figure is what makes the
	   H1 break after "Accessories" and the paragraph break after "SUV, and".
	   The horizontal padding here is only a small-screen guard, so it sits on
	   top of the 890px rather than eating into it. */
	max-width: calc(890px + 2 * var(--mk-gutter));
	padding: 90px var(--mk-gutter);
}

/* Source gap is 10px: .banner__heading{margin-bottom:0} plus the higher
   specificity rule .banner__box .banner__heading+*{margin-top:1rem}, which
   beats .banner__box>*+.banner__text{margin-top:2rem}.
   NOTE the `.mk ` prefix: the heading carries class="h1", so the base rule
   `.mk .h1` is (0,2,0) and would otherwise outrank a bare `.mk-hero__body h1`
   (0,1,1) and force the 0.5em default margin back in. */
.mk .mk-hero__body h1 { margin: 0 0 10px; color: var(--mk-white); }

/* The source renders the body copy and the trust sentence as one <p> inside
   .banner__text, so the trust line is simply the paragraph's last line. */
.mk-hero__text {
	font-size: var(--mk-body-size);
	line-height: 1.8;             /* source: calc(1 + .8 / --font-body-scale) */
	margin: 0 auto;
	color: rgba(255, 255, 255, 0.92);
}

.mk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: 20px;             /* source: .banner__buttons margin-top 2rem */
}

/* ==========================================================================
   Brand grid — circular imagery
   ========================================================================== */

.mk-brands { padding: 44px 0 54px; }

.mk-brands__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 24px;
}

.mk .mk-brand {
	display: block;
	text-align: center;
	color: var(--mk-white);
}
.mk .mk-brand:hover { color: var(--mk-white); opacity: 1; }

.mk-brand__media {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	background: var(--mk-charcoal);
	margin-bottom: 14px;
}

.mk-brand__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mk-brand:hover .mk-brand__media img { transform: scale(1.06); }

.mk-brand__name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.mk-brand:hover .mk-brand__name { color: var(--mk-red); }
.mk-brand__arrow { width: 12px; height: 12px; }

/* ==========================================================================
   Product grid
   ========================================================================== */

.mk-products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mk-gap);
}

/* --- Product card -------------------------------------------------------
   Measured on the live collection page at a 1600px viewport:
     li / card      341 x 580
     card__inner    341 x 426   → 125% ratio, i.e. a 4:5 portrait box
     inner bg       #ffffff, radius 8px, border 0
     information    padding 17px 0   (text sits flush with the image edge)
     heading        18.2px / 400 / line-height 22.1px / tracking 0.84px
     price          16px / tracking 1px
   The outer .card is transparent and the heading inherits its colour, which is
   why the same card reads white-on-black in the dark collection grid and
   black-on-white inside the home page's one light section.
   ---------------------------------------------------------------------- */

.mk-card {
	display: flex;
	flex-direction: column;
	background: transparent;
}

.mk-card__media {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--mk-white);
	border-radius: var(--mk-radius-card);
}
.mk-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--mk-transition);
}

/* The source stacks a second image in the same box and cross-fades on hover. */
.mk-card__media img.mk-card__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
}
.mk-card__media { position: relative; }
.mk-card__media:hover img.mk-card__img--hover { opacity: 1; }
.mk-card__media:hover img.mk-card__img--main { opacity: 0; }

.mk-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 6px;
	padding: 17px 0;
}

.mk-card__title {
	font-size: 18.2px;
	font-weight: 400;
	line-height: 22.1px;
	letter-spacing: var(--mk-heading-tracking);
	margin: 0;
	color: inherit;
}
.mk-card__title a { color: inherit; }
.mk-card__title a:hover { color: var(--mk-red); opacity: 1; }
.mk-section--dark .mk-card__title a:hover { color: var(--mk-red); }

.mk-card__price {
	margin-top: 0;
	font-size: 16px;
	letter-spacing: 1px;
	color: inherit;
	opacity: 0.85;
}
.mk-card__price del { color: var(--mk-gray-400); margin-right: 6px; }
.mk-card__price ins { text-decoration: none; color: var(--mk-red); }

.mk-card__badge {
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding: 3px 10px;
	border-radius: var(--mk-radius-pill);
	background: var(--mk-red);
	color: #fff;
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mk-card__media-wrap { position: relative; }

/* ==========================================================================
   Feature columns (multicolumn)
   ========================================================================== */

.mk-cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mk-gap);
}

.mk-col { text-align: left; }

.mk-col__icon {
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	color: var(--mk-red);
}

.mk-col h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; line-height: 1.25; }
.mk-col p { font-size: 14px; color: var(--mk-gray-400); margin: 0; }
.mk-section--dark .mk-col p { color: var(--mk-gray-300); }

/* ==========================================================================
   Media + text
   ========================================================================== */

.mk-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 60px;
	align-items: center;
}

.mk-split--reverse .mk-split__media { order: 2; }

.mk-split__media img { width: 100%; border-radius: var(--mk-radius-media); }

.mk-split__body h2 { margin-bottom: 16px; }
.mk-split__body p { font-size: 14.5px; color: var(--mk-gray-400); }
.mk-section--dark .mk-split__body p { color: var(--mk-gray-300); }

.mk-split__list { margin: 24px 0 0; padding: 0; list-style: none; }
.mk-split__list li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 10px;
	font-size: 14px;
}
.mk-split__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--mk-red);
}

/* ==========================================================================
   Blog cards
   ========================================================================== */

.mk-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mk-gap);
}

.mk-post {
	display: flex;
	flex-direction: column;
	background: var(--mk-white);
	border-radius: var(--mk-radius-blog);
	overflow: hidden;
	border: 1px solid var(--mk-gray-200);
}

.mk-post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--mk-gray-100); }
.mk-post__media img { width: 100%; height: 100%; object-fit: cover; }

.mk-post__body { padding: 20px 20px 24px; display: flex; flex-direction: column; flex: 1; }

.mk-post__meta {
	display: flex;
	gap: 10px;
	font-size: 12px;
	color: var(--mk-gray-400);
	margin-bottom: 10px;
}

.mk-post__title { font-size: 18.2px; font-weight: 400; line-height: 1.4; margin: 0 0 10px; }
.mk-post__title a { color: var(--mk-black); }
.mk-post__title a:hover { color: var(--mk-red); opacity: 1; }

.mk-post__excerpt { font-size: 13.5px; color: var(--mk-gray-400); margin: 0 0 16px; }
.mk-post__more { margin-top: auto; font-size: 13px; font-weight: 500; }

/* ==========================================================================
   Trust bar
   ========================================================================== */

.mk-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	padding: 34px 0;
}

.mk-trust__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 14px;
	text-align: center;
}

.mk-trust__check { width: 18px; height: 18px; flex: 0 0 auto; color: var(--mk-red); }

/* ==========================================================================
   Forms
   ========================================================================== */

.mk-form { max-width: 720px; margin: 0 auto; }

.mk-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.mk-field { display: flex; flex-direction: column; gap: 7px; }
.mk-field--full { grid-column: 1 / -1; }

.mk-field label { font-size: 13px; font-weight: 500; }
.mk-field .req { color: var(--mk-red); }

.mk-field input,
.mk-field textarea,
.mk-field select {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid var(--mk-gray-200);
	border-radius: var(--mk-radius-input);
	background: var(--mk-white);
	color: var(--mk-black);
	transition: border-color var(--mk-transition);
}

.mk-field textarea { min-height: 130px; resize: vertical; }

.mk-field input:focus,
.mk-field textarea:focus,
.mk-field select:focus { outline: 0; border-color: var(--mk-red); }

.mk-alert {
	padding: 14px 18px;
	border-radius: var(--mk-radius-input);
	margin-bottom: 20px;
	font-size: 14px;
}
.mk-alert--ok { background: #eaf3de; color: #27500a; }
.mk-alert--err { background: #fcebeb; color: #791f1f; }

/* ==========================================================================
   Footer
   ========================================================================== */

.mk-footer {
	background: var(--mk-black);
	color: var(--mk-white);
	padding: 64px 0 0;
	font-size: 14px;
}

.mk-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr) 1.4fr;
	gap: 40px;
	padding-bottom: 48px;
}

.mk-footer h3 {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 16px;
	color: var(--mk-white);
}

.mk-footer ul { margin: 0; padding: 0; list-style: none; }
.mk-footer li { margin-bottom: 8px; }
.mk-footer a { color: var(--mk-gray-300); font-size: 13.5px; }
.mk-footer a:hover { color: var(--mk-red); opacity: 1; }

.mk-footer__about p { color: var(--mk-gray-300); font-size: 13.5px; }

.mk-footer__contact p { color: var(--mk-gray-300); font-size: 13.5px; margin: 0 0 10px; }
.mk-footer__contact strong { color: var(--mk-white); font-weight: 500; }

.mk-social { display: flex; gap: 10px; margin-top: 18px; }
.mk-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 50%;
	color: var(--mk-white);
}
.mk-social a:hover { background: var(--mk-red); border-color: var(--mk-red); opacity: 1; }
.mk-social svg { width: 17px; height: 17px; }

.mk-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 12.5px;
	color: var(--mk-gray-400);
}

/* Policies in the bottom bar.
   The source hangs these off the copyright line itself
   (`.footer__copyright .policies`); here they sit immediately after it and
   push the payment marks to the far edge. The right auto margin does that
   inside the bar's `space-between`. */
.mk-footer__policies {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0 auto 0 4px;
	padding: 0;
	list-style: none;
}
.mk-footer__policies a { color: inherit; }
.mk-footer__policies a:hover { color: var(--mk-white); }

.mk-footer__pay { display: flex; gap: 8px; align-items: center; }
.mk-footer__pay span {
	padding: 3px 9px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 3px;
	font-size: 11px;
	letter-spacing: 0.04em;
}

/* ==========================================================================
   Entry content (single / page)
   ========================================================================== */

.mk-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 60px;
	align-items: start;
}
.mk-layout--full { grid-template-columns: minmax(0, 1fr); }

.mk-entry__header { margin-bottom: 28px; }
/* `.mk-entry__meta` used to live here. No template has ever emitted it — the
   article template prints `.mk-article__meta`, which is defined in the second
   pass block near the end of this file. Keeping both would have meant two
   identical rules and one of them permanently unreachable. */

.mk-entry__thumb { margin-bottom: 28px; }
.mk-entry__thumb img { width: 100%; }

.mk-entry__content { font-size: 15.5px; line-height: 1.75; }
.mk-entry__content h2 { margin-top: 1.6em; }
.mk-entry__content h3 { margin-top: 1.4em; }
.mk-entry__content img { margin: 1.4em 0; }
.mk-entry__content blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--mk-red);
	font-size: 17px;
	color: var(--mk-gray-400);
}

.mk-widget { margin-bottom: 36px; }
.mk-widget__title { font-size: 15px; margin-bottom: 14px; }
.mk-widget ul { margin: 0; padding: 0; list-style: none; }
.mk-widget li { padding: 7px 0; border-bottom: 1px solid var(--mk-gray-200); font-size: 14px; }

/* --- Pagination ----------------------------------------------------- */

.mk-pagination { margin-top: 48px; }
.mk-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	margin-right: 6px;
	border: 1px solid var(--mk-gray-200);
	border-radius: var(--mk-radius-pill);
	font-size: 13px;
	color: var(--mk-black);
}
.mk-pagination .page-numbers.current,
.mk-pagination .page-numbers:hover { background: var(--mk-black); color: #fff; border-color: var(--mk-black); opacity: 1; }

/* --- 404 ------------------------------------------------------------ */

.mk-404 { text-align: center; padding: 110px 0; }
.mk-404__code { font-size: 96px; font-weight: 700; line-height: 1; color: var(--mk-red); margin-bottom: 16px; }

/* --- Archive list --------------------------------------------------- */

.mk-archive-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mk-gap);
}

/* ==========================================================================
   WooCommerce
   ========================================================================== */

.mk .woocommerce-breadcrumb { font-size: 13px; color: var(--mk-gray-400); margin-bottom: 20px; }
.mk .woocommerce-breadcrumb a { color: var(--mk-gray-400); }
.mk .woocommerce-breadcrumb a:hover { color: var(--mk-red); }

.mk .woocommerce-result-count,
.mk .woocommerce-ordering { font-size: 13.5px; margin-bottom: 24px; }

.mk .woocommerce-ordering select {
	min-height: 42px;
	padding: 0 14px;
	border: 1px solid var(--mk-gray-200);
	border-radius: var(--mk-radius-input);
	background: var(--mk-white);
}

.mk .products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mk-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mk .products::before,
.mk .products::after { display: none; }

.mk .products .product {
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
}

.mk .woocommerce-pagination ul { display: flex; gap: 6px; justify-content: center; margin: 40px 0 0; padding: 0; list-style: none; }
.mk .woocommerce-pagination ul li { border: 0; }
.mk .woocommerce-pagination ul li a,
.mk .woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border: 1px solid var(--mk-gray-200);
	border-radius: var(--mk-radius-pill);
	color: var(--mk-black);
	font-size: 13px;
}
.mk .woocommerce-pagination ul li span.current,
.mk .woocommerce-pagination ul li a:hover { background: var(--mk-black); color: #fff; border-color: var(--mk-black); }

/* --- Single product ------------------------------------------------- */

/* Every rule in this block used to be scoped to `.mk-product-single`, a class
   no template has ever emitted: `content-single-product.php` builds the page
   with `wc_product_class( 'mk-product', $product )`. The whole block was inert,
   which is why the gallery wrapper kept WooCommerce's default margin, the
   summary h1 was never resized, and the short description never picked up its
   muted colour. The price rule was additionally wrong for the page it was
   meant for — it painted `var(--mk-black)` on a stage that is `body.mk`, i.e.
   black on black. The rules are re-scoped to the class that actually renders
   and the price colours are flipped for the dark stage.

   The two-column grid itself is deliberately not repeated here; it lives
   further down beside the comment that records the measurements it came from.

   `.quantity` is also dropped from this block: the live control carries the
   theme's `.mk-qty` class and is styled by the global `.mk .quantity` rule in
   the cart section, which already wins on specificity. */

.mk-product .woocommerce-product-gallery__wrapper { margin: 0; }
.mk-product .flex-control-thumbs { display: flex; gap: 12px; margin-top: 14px; padding: 0; list-style: none; }
.mk-product .flex-control-thumbs li { width: 88px; }

.mk-product .summary h1 { font-size: 32px; line-height: 1.25; margin-bottom: 16px; }
.mk-product .price {
	display: block;
	font-size: 26px;
	margin: 0 0 22px;
	color: var(--mk-white);
}
.mk-product .price del { color: var(--mk-gray-400); font-size: 19px; margin-right: 8px; }
.mk-product .price ins { text-decoration: none; color: var(--mk-red); }

.mk .single_add_to_cart_button,
.mk .button.alt {
	min-height: 46px;
	padding: 0 30px;
	border-radius: var(--mk-radius-pill);
	background: var(--mk-red);
	color: #fff;
	border: 0;
	font-weight: 500;
	line-height: 46px;
}
.mk .single_add_to_cart_button:hover,
.mk .button.alt:hover { background: var(--mk-red-dark); color: #fff; }

.mk-product-meta {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--mk-gray-200);
	font-size: 13.5px;
	color: var(--mk-gray-400);
}
.mk-product-meta span { display: block; margin-bottom: 6px; }

/* --- Tabs ----------------------------------------------------------- */

.mk .woocommerce-tabs { margin-top: 64px; }
.mk .woocommerce-tabs ul.tabs { display: flex; gap: 28px; margin: 0 0 26px; padding: 0 0 14px; border-bottom: 1px solid var(--mk-gray-200); list-style: none; }
.mk .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
.mk .woocommerce-tabs ul.tabs li::before,
.mk .woocommerce-tabs ul.tabs li::after { display: none; }
.mk .woocommerce-tabs ul.tabs li a {
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--mk-gray-400);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.mk .woocommerce-tabs ul.tabs li.active a { color: var(--mk-black); }
.mk .woocommerce-tabs .panel { font-size: 15px; line-height: 1.75; }

/* --- Cart ----------------------------------------------------------- */

.mk .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.mk .shop_table th {
	padding: 12px 10px;
	border-bottom: 1px solid var(--mk-gray-200);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: left;
}
.mk .shop_table td {
	padding: 18px 10px;
	border-bottom: 1px solid var(--mk-gray-200);
	vertical-align: middle;
}
.mk .shop_table .product-thumbnail img { width: 72px; border-radius: var(--mk-radius-card); }

.mk .cart-collaterals { margin-top: 36px; }
.mk .cart_totals { max-width: 420px; margin-left: auto; }
.mk .cart_totals h2 { font-size: 20px; }
.mk .cart_totals table { width: 100%; font-size: 14px; }
.mk .cart_totals table th,
.mk .cart_totals table td { padding: 10px 0; border-bottom: 1px solid var(--mk-gray-200); text-align: left; }
.mk .cart_totals .order-total td { font-size: 18px; }

.mk .woocommerce-message,
.mk .woocommerce-info,
.mk .woocommerce-error {
	padding: 16px 20px;
	border-radius: var(--mk-radius-input);
	font-size: 14px;
	margin-bottom: 24px;
	border-top: 0;
}
.mk .woocommerce-message { background: #eaf3de; color: #27500a; }
.mk .woocommerce-info { background: var(--mk-gray-100); color: var(--mk-black); }
.mk .woocommerce-error { background: #fcebeb; color: #791f1f; }
.mk .woocommerce-message::before,
.mk .woocommerce-info::before,
.mk .woocommerce-error::before { display: none; }

.mk .woocommerce .star-rating span::before { color: var(--mk-red); }

/* ==========================================================================
   Comments
   ========================================================================== */

.mk-comments { margin-top: 56px; }

.mk-comments__title {
	font-size: 20px;
	margin: 0 0 24px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--mk-gray-200);
}

.mk-comment-list { margin: 0 0 40px; padding: 0; list-style: none; }
.mk-comment-list .children { margin: 0; padding-left: 34px; list-style: none; }

.mk-comment { margin-bottom: 26px; }
.mk-comment > article {
	padding: 20px 22px;
	background: var(--mk-gray-100);
	border-radius: var(--mk-radius-card);
}

.mk-comment__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mk-comment__avatar { border-radius: 50%; }
.mk-comment__author { display: block; font-style: normal; font-size: 14px; font-weight: 500; }
.mk-comment__date { display: block; font-size: 12px; color: var(--mk-gray-400); }
.mk-comment__body { font-size: 14.5px; }
.mk-comment__reply { margin-top: 10px; font-size: 13px; }

.mk-comment-form { max-width: 100%; }
.mk-comment-form .form-submit { margin: 22px 0 0; }
.mk-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 13px;
	margin-top: 14px;
}
.mk-comment-form .comment-form-cookies-consent input { width: auto; min-height: 0; margin-top: 3px; }
.mk-comment-form .comment-form-cookies-consent label { font-size: 13px; font-weight: 400; }
.mk-comment-form .comment-notes { font-size: 13px; color: var(--mk-gray-400); margin-bottom: 18px; }
.mk-comment-form .comment-form-author,
.mk-comment-form .comment-form-email,
.mk-comment-form .comment-form-url { margin-bottom: 16px; }

/* ==========================================================================
   Collection / archive — the source's dark catalogue
   ========================================================================== */

.mk-collection-hero__title {
	/* source: .collection-hero__title { margin: 2.5rem 0 } at 56px/0.84px */
	margin: 25px 0;
	font-size: 56px;
	font-weight: var(--mk-heading-weight);
	line-height: 1.2;
	letter-spacing: var(--mk-heading-tracking);
	color: inherit;
}

.mk-collection__intro {
	/* The source's own collection__description is a full-width 1500px column. */
	max-width: none;
	margin: 0 0 8px;
	font-size: var(--mk-body-size);
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.82);
}

/* --- Toolbar: sort on the left, count on the right --------------------- */

.mk-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 30px;
	padding-top: 10px;
	margin-bottom: 24px;
}

.mk-toolbar__group { display: flex; align-items: center; gap: 30px; }

.mk-toolbar__filter {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	letter-spacing: var(--mk-body-tracking);
	cursor: pointer;
}
.mk-toolbar__filter:hover { color: var(--mk-white); }
.mk-toolbar__filter svg { width: 20px; height: 20px; }

.mk-ordering { display: flex; align-items: center; margin: 0; }
.mk-ordering__label {
	margin: 0 20px 0 0;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.85);
	white-space: nowrap;
}
.mk-select { position: relative; display: inline-flex; align-items: center; }
.mk-ordering__select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font-size: 14px;
	letter-spacing: var(--mk-body-tracking);
	padding: 0 26px 0 0;
	margin: 0;
	height: auto;
	min-height: 0;
	cursor: pointer;
}
.mk-ordering__select:focus { outline: 0; }
.mk-select__caret {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	display: inline-flex;
}
.mk-select__caret svg { width: 10px; height: 6px; }

.mk-product-count {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
	white-space: nowrap;
}

/* --- Grid ------------------------------------------------------------- */

.mk .mk-product-grid,
.mk .products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--mk-gap);
	row-gap: 50px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mk .products::before,
.mk .products::after { content: none; }
.mk .mk-product-grid > li { margin: 0; }

/* ==========================================================================
   Collection FAQ — a plain <details> accordion
   ========================================================================== */

.mk-faq { margin: 40px auto; }
.mk-faq__title { margin: 0 0 20px; font-size: 32px; }
.mk-faq__item {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mk-faq__q {
	font-weight: 700;
	cursor: pointer;
	font-size: 1.1em;
	outline: none;
	list-style: none;
}
.mk-faq__q::-webkit-details-marker { display: none; }
.mk-faq__q::after {
	content: "+";
	float: right;
	font-weight: 400;
	transition: transform var(--mk-transition);
}
.mk-faq__item[open] .mk-faq__q::after { content: "\2212"; }
.mk-faq__a { margin-top: 10px; color: rgba(255, 255, 255, 0.7); line-height: 1.5; }

/* ==========================================================================
   Pagination — source: 44px squares, 20px underline bar on the current item
   ========================================================================== */

.mk .pagination-wrapper { margin-top: 40px; }
.mk .pagination__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.mk .pagination__list > li {
	flex: 1 0 44px;
	max-width: 44px;
	margin: 0 10px 0 0;
}
.mk .pagination__list > li:last-child { margin-right: 0; }

.mk .pagination__item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
	padding: 0;
	color: inherit;
	text-decoration: none;
	font-size: var(--mk-body-size);
}
.mk .pagination__item--current::after,
.mk .pagination__item:hover::after {
	content: "";
	display: block;
	width: 20px;
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	background-color: currentColor;
	height: 1px;
}
.mk .pagination__item--arrow:hover::after { display: none; }
.mk .pagination__item .icon-caret { height: 6px; width: 10px; }
/* Class names are the source storefront's, and they are inverted on purpose:
   the "next" arrow carries `--prev` and points right, the "previous" arrow
   carries `--next` and points left. See woocommerce/loop/pagination.php. */
.mk .pagination__item--next .icon-caret { transform: rotate(90deg); }
.mk .pagination__item--prev .icon-caret { transform: rotate(-90deg); }

/* ==========================================================================
   Product single
   ========================================================================== */

/* Measured on the live product page at 1600px: media column 816px, info
   column 668px, info content inset 50px from the column edge. */
.mk-product {
	display: grid;
	grid-template-columns: 55% 45%;
	align-items: start;
}

/* The product data tabs, up-sells and related grid are fired by
   `woocommerce_after_single_product_summary`, which renders them as further
   children of this two-column grid. They are page-wide sections, so they opt
   out of the column split and take the full row. */
.mk-product > .woocommerce-tabs,
.mk-product > .wc-tabs-wrapper,
.mk-product > .upsells,
.mk-product > .related,
.mk-product > .products,
.mk-product > .mk-related {
	grid-column: 1 / -1;
	min-width: 0;
}

/* A `.mk-container` nested inside another one would re-apply the 50px gutter and
   resolve to 1400px instead of the 1500px the whole theme uses — which is
   exactly what the related-products and up-sells sections do, since they are
   designed as standalone page-width blocks and now render inside the product
   container. Neutralise the inner copy rather than dropping the gutter from the
   templates, so both usages stay correct. */
.mk-container .mk-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.mk-product__media { min-width: 0; }
.mk-product__gallery { position: relative; }
.mk-product__stage {
	position: relative;
	background: var(--mk-white);
	border-radius: var(--mk-radius-media);
	overflow: hidden;
}
.mk-product__stage img { width: 100%; height: auto; display: block; }

.mk-product__thumbs {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}
.mk-product__thumb {
	position: relative;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 4px;
	background: none;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 1 / 1;
}
.mk-product__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mk-product__thumb[aria-current="true"] { border-color: rgba(255, 255, 255, 0.7); }

.mk-product__info { padding: 20px 18px 0 50px; }

.mk-product__vendor {
	margin: 0 0 6px;
	font-size: 10px;
	line-height: 1.5;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.mk-product__title {
	margin: 0 0 10px;
	font-size: 56px;
	font-weight: var(--mk-heading-weight);
	line-height: 1.2;
	letter-spacing: var(--mk-heading-tracking);
	color: inherit;
}
.mk-product__title a { color: inherit; }

.mk-product__sku {
	margin: 0 0 12px;
	font-size: 18px;
	letter-spacing: var(--mk-body-tracking);
	color: rgba(255, 255, 255, 0.7);
}
.mk-product__sku .mk-sku-label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
}

.mk-product__price {
	margin: 0 0 10px;
	font-size: 18px;
	letter-spacing: 1.3px;
	color: inherit;
}
.mk-product__price del { color: rgba(255, 255, 255, 0.5); margin-right: 8px; }
.mk-product__price ins { text-decoration: none; color: var(--mk-red); }

/* --- Quote-only block -------------------------------------------------
   Ported from the source's own .mkr-inquiry rules, which ship inline in the
   product template. Values are the source's, converted from rem to px at the
   site's 1rem = 10px root.
   ---------------------------------------------------------------------- */

.mk-inquiry-cta { display: flex; flex-direction: column; gap: 10px; margin: 0; }

.mk-inquiry-cta__badge {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	opacity: 0.78;
}
.mk-inquiry-cta__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
	flex: 0 0 auto;
}
.mk-inquiry-cta__btn { margin: 0; width: 100%; }
.mk-inquiry-cta__note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	opacity: 0.66;
}

.mk-product__description {
	margin: 28px 0 0;
	font-size: var(--mk-body-size);
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.85);
}
.mk-product__description strong { font-weight: 700; color: var(--mk-white); }

.mk-product__share {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.75);
}
.mk-product__share:hover { color: var(--mk-white); }
.mk-product__share svg { width: 13px; height: 12px; }

/* ==========================================================================
   Blog — index uses the source's collage rhythm: full-width lead cards,
   then a two-up grid.
   ========================================================================== */

.mk-blog-articles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: var(--mk-gap);
	row-gap: var(--mk-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}
.mk-blog-articles > li { margin: 0; }
/* The source's collage rhythm: every third card from the top (and a trailing
   odd card) spans both columns and is centred, and it is text-only — those
   cards carry `card--text` while the rest carry `card--media`. */
.mk-blog-articles > li:nth-child(3n + 1),
.mk-blog-articles > li:nth-child(3n + 2):last-child {
	grid-column: span 2;
	text-align: center;
}
.mk-blog-articles > li:nth-child(3n + 1) .mk-article-card__media,
.mk-blog-articles > li:nth-child(3n + 2):last-child .mk-article-card__media { display: none; }

.mk-article-card { display: block; color: inherit; }
.mk-article-card__media {
	display: block;
	height: 220px;                 /* source: .article-card__image--medium 22rem */
	overflow: hidden;
	background: var(--mk-white);
	border-radius: var(--mk-radius-blog);
}
@media screen and (min-width: 750px) {
	.mk-article-card__media { height: 219px; }
}
@media screen and (min-width: 990px) {
	.mk-article-card__media { height: 307px; }
}
.mk-article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mk-article-card__body { padding: 17px 20px; }
.mk-blog-articles > li:nth-child(3n + 1) .mk-article-card__body,
.mk-blog-articles > li:nth-child(3n + 2):last-child .mk-article-card__body { padding: 20px 0; }
.mk-article-card__title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: var(--mk-heading-tracking);
	color: inherit;
}
.mk-article-card__title a { color: inherit; }
.mk-article-card__title a:hover { color: var(--mk-red); opacity: 1; }
.mk-article-card__info {
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	padding-top: 4px;
}
.mk-article-card__excerpt {
	width: 100%;
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

/* --- Article ----------------------------------------------------------- */

.mk-article__title {
	margin: 0 0 10px;
	font-size: 56px;
	font-weight: var(--mk-heading-weight);
	line-height: 1.2;
	letter-spacing: var(--mk-heading-tracking);
}
.mk-article__meta {
	margin: 0 0 30px;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
}
.mk-article__content { font-size: var(--mk-body-size); line-height: 1.8; }
.mk-article__content h2 { margin-top: 1.6em; }
.mk-article__content h3 { margin-top: 1.4em; }
.mk-article__content img { margin: 1.4em 0; }
.mk-article__content blockquote {
	margin: 1.6em 0;
	padding-left: 20px;
	border-left: 3px solid var(--mk-red);
	color: rgba(255, 255, 255, 0.85);
}
.mk-article__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 40px;
	font-size: 14px;
}

/* ==========================================================================
   Account — the source's /account route is disallowed in robots.txt and
   answers 406 to non-browser clients, so this screen is designed from the
   site's own language: a near-black stage, a white 20px card, pill buttons.
   ========================================================================== */

.mk-account { padding-bottom: 40px; }

.mk-account__head { margin-bottom: 40px; }
.mk-account__title {
	margin: 0 0 14px;
	font-size: 48px;
	font-weight: var(--mk-heading-weight);
	line-height: 1.15;
	letter-spacing: var(--mk-heading-tracking);
}
.mk-account__intro {
	max-width: 640px;
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.72);
}

.mk-account__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	align-items: start;
}
.mk-account__cols--single { grid-template-columns: minmax(0, 1fr); }
.mk-account--narrow .mk-account__cols { max-width: 620px; }

.mk-account__col {
	background: var(--mk-white);
	border-radius: 20px;
	padding: 44px;
	color: #1a1a1a;
}
.mk-account__col-title {
	margin: 0 0 26px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: var(--mk-heading-tracking);
	color: #1a1a1a;
}

/* The white card flips every field back to a light surface. */
.mk-account__col .mk-field label,
.mk-account__panel .mk-field label { color: #1a1a1a; }
.mk-account__col .mk-field input,
.mk-account__col .mk-field textarea,
.mk-account__col .mk-field select,
.mk-account__panel .mk-field input,
.mk-account__panel .mk-field textarea,
.mk-account__panel .mk-field select {
	background: #fff;
	border-color: #e2e2e2;
	color: #1a1a1a;
}
.mk-account__col .mk-field input:focus,
.mk-account__col .mk-field textarea:focus,
.mk-account__col .mk-field select:focus,
.mk-account__panel .mk-field input:focus,
.mk-account__panel .mk-field textarea:focus,
.mk-account__panel .mk-field select:focus { border-color: #1a1a1a; }

.mk-account__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 22px 0 0;
}
.mk-account__row--end { justify-content: flex-end; }

.mk-check {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	cursor: pointer;
}
.mk-check input { width: auto; min-height: 0; margin: 0; }

.mk-account__meta {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
}
.mk-account__col .mk-account__meta,
.mk-account__panel .mk-account__meta { color: #555; }
.mk-account__meta a { color: var(--mk-red); }

.mk-account__fieldset {
	margin: 26px 0 0;
	padding: 0;
	border: 0;
}
.mk-account__legend {
	padding: 0;
	margin-bottom: 14px;
	font-size: 20px;
	font-weight: 700;
	color: #1a1a1a;
}

/* --- Account shell: nav rail + content -------------------------------- */

.mk-account__nav {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid #333;
	border-radius: 20px;
	padding: 18px 0;
}
.mk-account__nav ul { list-style: none; margin: 0; padding: 0; }
.mk-account__nav li { margin: 0; }
.mk-account__nav a {
	display: block;
	padding: 12px 26px;
	font-size: 14px;
	letter-spacing: var(--mk-body-tracking);
	color: rgba(255, 255, 255, 0.75);
}
.mk-account__nav a:hover { color: var(--mk-white); background: rgba(255, 255, 255, 0.05); }
.mk-account__nav .is-active a {
	color: var(--mk-white);
	background: rgba(255, 255, 255, 0.07);
	box-shadow: inset 3px 0 0 var(--mk-red);
}

.mk-account__content {
	background: var(--mk-white);
	border-radius: 20px;
	padding: 44px;
	color: #1a1a1a;
}
.mk-account__content a { color: var(--mk-red); }
.mk-account__content h2,
.mk-account__content h3 { color: #1a1a1a; }

.mk-account__panel-title {
	margin: 0 0 12px;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: var(--mk-heading-tracking);
	color: #1a1a1a;
}
.mk-account__panel-title strong { font-weight: 700; }

.mk-account__tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 26px;
}
.mk-account__tile {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px;
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	color: #1a1a1a;
	transition: border-color var(--mk-transition);
}
.mk-account__tile:hover { border-color: #1a1a1a; opacity: 1; }
.mk-account__tile-label { font-size: 16px; font-weight: 700; }
.mk-account__tile-desc { font-size: 13.5px; color: #666; line-height: 1.5; }

.mk-account__addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 24px;
}
.mk-account__address {
	border: 1px solid #e6e6e6;
	border-radius: 14px;
	padding: 24px;
}
.mk-account__address-title { margin: 0 0 10px; font-size: 17px; font-weight: 700; }
.mk-account__address address { font-style: normal; font-size: 14px; line-height: 1.7; color: #444; margin-bottom: 14px; }

/* --- Tables shared by orders / downloads ------------------------------- */

.mk-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.mk-table th,
.mk-table td {
	padding: 14px 12px;
	text-align: left;
	border-bottom: 1px solid #e6e6e6;
}
.mk-table th { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; }
.mk-table tr:last-child td { border-bottom: 0; }

.mk-btn--sm { min-height: 36px; padding: 0 18px; font-size: 13px; }
.mk-btn--ghost {
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
}
.mk-btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   Inline login (checkout gate)
   ========================================================================== */

.mk-inline-login {
	max-width: 520px;
	margin: 0 auto;
	padding: 30px;
	border: 1px solid #333;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.03);
}
.mk-inline-login .mk-account__row { justify-content: flex-start; }

/* ==========================================================================
   Shared form fields — floating labels, matching the source's .field pattern
   (label sits in the box and shrinks to the top on focus / when filled).
   ========================================================================== */

.mk-field { position: relative; display: flex; flex-direction: column; gap: 7px; }

.mk .mk-float {
	position: relative;
	display: flex;
	width: 100%;
}
.mk .mk-float__input {
	width: 100%;
	flex-grow: 1;
	margin: 0;
	padding: 22px 15px 8px 20px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.4px;
	color: inherit;
	background: rgba(255, 255, 255, 0.03);
	border: 0;
	border-radius: var(--mk-radius-input);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55);
	appearance: none;
	-webkit-appearance: none;
}
.mk .mk-float__input:focus {
	outline: 0;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95);
}
.mk .mk-float__input::placeholder { opacity: 0; }
.mk .mk-float__label {
	position: absolute;
	left: 20px;
	top: 15px;
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.75);
	pointer-events: none;
	transition: top var(--mk-transition), font-size var(--mk-transition);
}
.mk .mk-float__input:focus ~ .mk-float__label,
.mk .mk-float__input:not(:placeholder-shown) ~ .mk-float__label {
	top: 5px;
	font-size: 10px;
}
.mk .mk-float--area { min-height: 100px; }
.mk .mk-float--area .mk-float__input { resize: vertical; }
.mk .mk-float--area .mk-float__label { top: 18px; }
.mk .mk-float--area .mk-float__input:focus ~ .mk-float__label,
.mk .mk-float--area .mk-float__input:not(:placeholder-shown) ~ .mk-float__label { top: 6px; }

.mk-float-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 20px;
}
.mk-float-row + .mk-float-row { margin-top: 20px; }
.mk-float-stack > * + * { margin-top: 20px; }

/* ==========================================================================
   B2B qualification block used by the inquiry form and the contact page
   ========================================================================== */

.mk-b2b { margin: 20px 0 0; }
.mk-b2b__title { margin: 0 0 12px; font-size: 15px; letter-spacing: 0.2px; opacity: 0.92; }
.mk-b2b__hint { opacity: 0.6; font-size: 13px; }
.mk-b2b__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 16px;
}
.mk-b2b__f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mk-b2b__l {
	font-size: 11.5px;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	opacity: 0.7;
	line-height: 1.3;
}
.mk-b2b__i,
.mk-b2b__s {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 13px;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.4;
	color: inherit;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 8px;
	appearance: none;
	-webkit-appearance: none;
}
.mk-b2b__s {
	padding-right: 36px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
.mk-b2b__i::placeholder { color: currentColor; opacity: 0.4; }
.mk-b2b__i:focus,
.mk-b2b__s:focus {
	outline: none;
	border-color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.1);
}
.mk-b2b__s option { color: #1a1a1a; background: #fff; }

/* The inquiry card itself — the source inlines these on the section.
   The source caps this section at 1000px (848px of content) while every
   other section on the page runs at 1500px, which is the ragged edge this
   theme removes: the card fills the container instead. */
.mk-inquiry__card {
	max-width: none;
	margin: 0 auto;
	padding: 4vw;
	border: 1px solid #333;
	border-radius: 20px;
	background-color: rgba(255, 255, 255, 0.031);
}
.mk-inquiry__card .mk-section__head { margin-bottom: 30px; }
.mk-inquiry__card .mk-form { max-width: none; }
.mk-inquiry__actions { margin-top: 30px; }

/* ==========================================================================
   Contact page — the source ships two bespoke sections
   ========================================================================== */

.mk-contact-help {
	background-color: #0e0e0d;
	padding: 100px 0;
	color: #fff;
}
.mk-contact-help__head { text-align: center; margin-bottom: 60px; }
.mk-contact-help__title {
	font-size: 64px;
	font-weight: 700;
	line-height: 1.1;
	margin: 0 0 20px;
}
.mk-contact-help__sub {
	font-size: 18px;
	color: #ccc;
	max-width: 600px;
	margin: 0 auto;
	line-height: 1.6;
}

.mk-contact-cards { display: flex; gap: 20px; margin-bottom: 40px; }
.mk-contact-card {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	color: #1a1a1a;
}
.mk-contact-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.mk-contact-card__icon svg { width: 22px; height: 22px; stroke: #fff; }
.mk-contact-card__body { display: flex; flex-direction: column; }
.mk-contact-card__label { font-size: 14px; color: #111; font-weight: 600; }
.mk-contact-card__value { font-size: 15px; color: #333; line-height: 1.5; }

.mk-contact-form-card {
	background: #fff;
	border-radius: 20px;
	padding: 60px;
	color: #1a1a1a;
}
.mk-contact-form-card__title { font-size: 32px; font-weight: 700; margin: 0 0 40px; color: #1a1a1a; }
.mk-contact-form-card .mk-float__input {
	background: transparent;
	border: 1px solid #eee;
	border-radius: 12px;
	box-shadow: none;
	padding: 14px 20px 14px 50px;
	font-size: 15px;
	color: #333;
}
.mk-contact-form-card .mk-float__input:focus { border-color: #bbb; box-shadow: none; }
.mk-contact-form-card .mk-float__label { left: 50px; top: 15px; font-size: 15px; color: #999; }
.mk-contact-form-card .mk-float__input:focus ~ .mk-float__label,
.mk-contact-form-card .mk-float__input:not(:placeholder-shown) ~ .mk-float__label { top: 5px; font-size: 10px; }
.mk-contact-form-card .mk-float__icon {
	position: absolute;
	left: 20px;
	top: 16px;
	display: flex;
	pointer-events: none;
}
.mk-contact-form-card .mk-float__icon svg { width: 18px; height: 18px; stroke: #999; fill: none; stroke-width: 2; }
.mk-contact-form-card .mk-float--area .mk-float__icon { top: 18px; }
.mk-contact-form-card .mk-b2b__l { color: #333; opacity: 0.75; }
.mk-contact-form-card .mk-b2b__i,
.mk-contact-form-card .mk-b2b__s {
	background: #fff;
	border-color: #ddd;
	color: #1a1a1a;
}
.mk-contact-form-card .mk-b2b__i:focus,
.mk-contact-form-card .mk-b2b__s:focus { border-color: #1a1a1a; background: #fff; }
.mk-contact-form-card .mk-b2b__s option { color: #1a1a1a; background: #fff; }

.mk-contact-form-card__bottom { display: flex; justify-content: flex-end; margin-top: 30px; }
.mk-contact-form-card .mk-submit {
	background-color: #1a1a1a;
	color: #fff;
	padding: 14px 40px;
	border-radius: 50px;
	border: 0;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: background var(--mk-transition);
}
.mk-contact-form-card .mk-submit:hover { background-color: #333; }

.mk-contact-info { padding: 100px 0; background-color: #f5f5f5; color: #111; }
.mk-contact-info__head { margin-bottom: 80px; }
.mk-contact-info__title {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1;
	max-width: 60%;
	margin: 0;
	color: #111;
}
.mk-contact-info__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}
.mk-contact-info__item { padding: 60px 80px; border-bottom: 1px solid #eee; }
.mk-contact-info__item:nth-child(odd) { border-right: 1px solid #eee; }
.mk-contact-info__item:nth-last-child(-n + 2) { border-bottom: 0; }
.mk-contact-info__icon { margin-bottom: 30px; height: 32px; display: flex; align-items: center; color: #000; }
.mk-contact-info__icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2; }
.mk-contact-info__title-sm { font-size: 20px; font-weight: 700; margin: 0 0 12px; color: #111; }
.mk-contact-info__value { margin: 0 0 6px; font-size: 15px; color: #222; }
.mk-contact-info__desc p { margin: 0; font-size: 15px; color: #444; line-height: 1.7; }

/* ==========================================================================
   About page — bespoke sections ported from the source template
   ========================================================================== */

.mk-about-intro__eyebrow {
	font-size: 12px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 14px;
}

.mk-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--mk-gap);
}
.mk-stat { text-align: center; }
.mk-stat__num {
	font-size: 64px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--mk-heading-tracking);
	color: var(--mk-white);
}
.mk-stat__num sup { font-size: 32px; vertical-align: super; line-height: 0; }
.mk-stat__label {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);
}

.mk-about-3up {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mk-gap);
}
.mk-about-3up__item h3 { font-size: 20px; margin: 0 0 10px; }
.mk-about-3up__item p { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }

.mk-about-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mk-gap);
	align-items: center;
}
.mk-about-split__body h2 { margin: 0 0 18px; }
.mk-about-split__body p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.78); }
.mk-about-split__media img { width: 100%; border-radius: var(--mk-radius-card); }
.mk-about-split__list { list-style: none; margin: 0 0 24px; padding: 0; }
.mk-about-split__list li {
	position: relative;
	padding-left: 22px;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.82);
}
.mk-about-split__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--mk-red);
}

.mk-timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.mk-timeline::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(255, 255, 255, 0.18);
}
.mk-timeline__item {
	position: relative;
	width: 50%;
	padding: 0 40px 40px 0;
}
.mk-timeline__item:nth-child(even) { margin-left: 50%; padding: 0 0 40px 40px; }
.mk-timeline__year {
	font-size: 32px;
	line-height: 1;
	margin: 0 0 8px;
	color: var(--mk-red);
}
.mk-timeline__title { margin: 0 0 8px; font-size: 19px; }
.mk-timeline__body { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.mk-timeline__item::after {
	content: "";
	position: absolute;
	top: 6px;
	right: -5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--mk-red);
}
.mk-timeline__item:nth-child(even)::after { right: auto; left: -4px; }

.mk-team { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-gap); }
.mk-team__card {
	padding: 30px;
	border: 1px solid #333;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.03);
}
.mk-team__mark { font-size: 13px; letter-spacing: 1px; opacity: 0.6; margin: 0 0 12px; }
.mk-team__card h3 { margin: 0 0 12px; font-size: 22px; }
.mk-team__card p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.mk-team__link { font-size: 14px; color: var(--mk-red); }

/* ==========================================================================
   Cart & checkout
   ========================================================================== */

.mk-cart__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 30px;
}
.mk-cart__title { margin: 0; font-size: 40px; font-weight: 400; letter-spacing: var(--mk-heading-tracking); }
.mk-cart__continue { font-size: 14px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.mk .woocommerce-cart-form { margin: 0 0 40px; }
.mk .cart_item td { vertical-align: middle; }
.mk .cart_item .product-thumbnail img { width: 90px; border-radius: var(--mk-radius-card); }
.mk .cart_item .product-name a { color: inherit; font-size: 15px; }
.mk .cart_item .product-remove a {
	display: inline-flex;
	width: 26px; height: 26px;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: inherit;
	font-size: 16px;
	line-height: 1;
}
.mk .cart_item .product-remove a:hover { background: var(--mk-red); color: #fff; opacity: 1; }

.mk .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--mk-radius-input);
	overflow: hidden;
}
.mk .quantity .qty {
	width: 54px;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: center;
	padding: 8px 4px;
	-moz-appearance: textfield;
}
.mk .quantity .qty::-webkit-outer-spin-button,
.mk .quantity .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mk .cart-collaterals { max-width: 520px; margin-left: auto; }
.mk .cart_totals h2 { font-size: 24px; margin: 0 0 18px; }
.mk .cart_totals table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mk .cart_totals th,
.mk .cart_totals td { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); text-align: left; }
.mk .cart_totals .order-total th,
.mk .cart_totals .order-total td { font-size: 18px; border-bottom: 0; }
.mk .wc-proceed-to-checkout { padding: 20px 0 0; }
.mk .wc-proceed-to-checkout .checkout-button { width: 100%; }

.mk .coupon { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 0 0 20px; }
.mk .coupon input[type="text"] {
	flex: 1 1 220px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--mk-radius-input);
	color: inherit;
}
.mk .coupon button { flex: 0 0 auto; }

.mk .woocommerce-message,
.mk .woocommerce-info,
.mk .woocommerce-error {
	list-style: none;
	margin: 0 0 24px;
	padding: 16px 22px;
	border: 1px solid #333;
	border-left: 3px solid var(--mk-red);
	border-radius: var(--mk-radius-input);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
	font-size: 14.5px;
}
.mk .woocommerce-message .button,
.mk .woocommerce-info .button { margin-left: 12px; }

.mk-cart-empty { text-align: center; padding: 40px 0 20px; }
.mk-cart-empty__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* The "Your cart is empty" heading is printed by `wc_empty_cart_message` on the
   `woocommerce_cart_is_empty` hook, as a WooCommerce notice — the template does
   not print its own copy. What the template adds is the optional sign-in prompt
   for guests, and these are the classes it emits. They used to be spelled
   `__title` / `__text` here, which matched nothing in the markup. */
.mk-cart-empty__login-title {
	margin: 30px 0 8px;
	font-size: 22px;
	font-weight: 400;
	color: var(--mk-white);
}
.mk-cart-empty__login-text {
	margin: 0;
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.72);
}
.mk-cart-empty__login-text a { text-decoration: underline; text-underline-offset: 3px; }

.mk-checkout__head { margin-bottom: 30px; }
.mk-checkout__title { margin: 0; font-size: 40px; font-weight: 400; letter-spacing: var(--mk-heading-tracking); }
.mk .woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 40px; }
.mk .woocommerce-checkout .col2-set .col-1,
.mk .woocommerce-checkout .col2-set .col-2 { width: auto; float: none; }
.mk .woocommerce-checkout h3 { font-size: 22px; margin: 0 0 16px; }
.mk .woocommerce-checkout .form-row { margin-bottom: 16px; }
.mk #order_review_heading { font-size: 26px; margin: 0 0 18px; }
.mk .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.mk .woocommerce-checkout-review-order-table th,
.mk .woocommerce-checkout-review-order-table td { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); text-align: left; }
.mk .woocommerce-checkout #payment { background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 24px; }
.mk .woocommerce-checkout #place_order { width: 100%; }

.mk-order-received { margin: 0 auto; }

.mk-order-received ul.order_details {
	list-style: none;
	margin: 0 0 30px;
	padding: 24px;
	border: 1px solid #333;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.03);
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
.mk-order-received ul.order_details li { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.6); }
.mk-order-received ul.order_details li strong { display: block; margin-top: 5px; font-size: 16px; text-transform: none; letter-spacing: 0; color: var(--mk-white); }

/* ==========================================================================
   Generic empty state / notices
   ========================================================================== */

.mk-empty {
	max-width: 640px;
	margin: 40px auto;
	padding: 40px;
	text-align: center;
	border: 1px solid #333;
	border-radius: 20px;
	background: rgba(255, 255, 255, 0.03);
}
.mk-empty__text { margin: 0 0 20px; color: rgba(255, 255, 255, 0.75); }
.mk-empty__actions { margin: 0; }

/* Empty states and 404s. These carried their widths as inline styles before
   (560px in one place, 520px in another); they are reading/utility blocks, so
   they share one measure rather than each picking its own. */
.mk-empty__note { max-width: 560px; margin: 14px auto 30px; }
.mk-empty__form { max-width: 560px; margin: 22px auto 0; }
.mk-empty__cta { margin-top: 30px; }

.mk-alert {
	margin: 0 auto 20px;
	padding: 14px 20px;
	border-radius: var(--mk-radius-input);
	font-size: 14.5px;
}
.mk-alert--ok { background: rgba(40, 167, 69, 0.14); border: 1px solid rgba(40, 167, 69, 0.5); }
.mk-alert--err { background: rgba(216, 35, 47, 0.14); border: 1px solid rgba(216, 35, 47, 0.5); }

@media screen and (min-width: 750px) {
	.mk-comment-form .comment-form-author,
	.mk-comment-form .comment-form-email,
	.mk-comment-form .comment-form-url { display: inline-block; width: calc(33.333% - 11px); margin-right: 16px; }
	.mk-comment-form .comment-form-url { margin-right: 0; }
}

/* ==========================================================================
   Policy pages (refund / shipping / privacy / terms / warranty)
   ========================================================================== */

/*
 * The source renders policies in Shopify's `shopify-policy__container`, which
 * caps at 65ch — about 560px — and centres it, so the page's own header and
 * footer run far wider than the policy body sitting between them. That is the
 * same ragged edge the rest of the site has.
 *
 * Here the chrome uses the site's 1500px column (see `.mk-policy__container`
 * in the width-unification block above). Only the running prose is held to a
 * measure, because ~150-character lines are unreadable. Change
 * `--mk-policy-measure` to `var(--mk-content)` if you want the prose to span
 * the full column instead.
 */

.mk-policy {
	--mk-policy-measure: 820px;
	padding-bottom: 96px;
}

.mk-policy__head {
	max-width: var(--mk-policy-measure);
	margin: 0 auto 44px;
	padding-bottom: 26px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.mk-policy__eyebrow {
	margin: 0 0 12px;
	font-size: 12px;
	letter-spacing: 1.3px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.mk-policy__title {
	margin: 0;
	font-size: 48px;
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: var(--mk-heading-tracking);
	color: var(--mk-white);
}

.mk-policy__updated {
	margin: 14px 0 0;
	font-size: 13.5px;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.55);
}

.mk-policy__body {
	max-width: var(--mk-policy-measure);
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.75;
	color: rgba(255, 255, 255, 0.82);
}

.mk-policy__body > *:first-child { margin-top: 0; }
.mk-policy__body > *:last-child { margin-bottom: 0; }

.mk-policy__body h2 {
	margin: 44px 0 14px;
	font-size: 26px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: var(--mk-heading-tracking);
	color: var(--mk-white);
}

.mk-policy__body h3 {
	margin: 32px 0 12px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: var(--mk-heading-tracking);
	color: var(--mk-white);
}

.mk-policy__body h4 {
	margin: 26px 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--mk-white);
}

.mk-policy__body p { margin: 0 0 18px; }

.mk-policy__body ul,
.mk-policy__body ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.mk-policy__body li { margin-bottom: 8px; }
.mk-policy__body li::marker { color: var(--mk-red); }

.mk-policy__body a {
	color: var(--mk-white);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.mk-policy__body a:hover { color: var(--mk-red); }

.mk-policy__body strong { color: var(--mk-white); font-weight: 700; }

.mk-policy__body hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mk-policy__body blockquote {
	margin: 0 0 18px;
	padding: 16px 22px;
	border-left: 2px solid var(--mk-red);
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.9);
}

.mk-policy__body code {
	padding: 2px 6px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.08);
	font-size: 14px;
}

/* Tables are the one thing inside a policy that should use the full column —
   pricing tiers, warranty periods, shipping lead times. */
.mk-policy__body table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 15px;
}

.mk-policy__body th,
.mk-policy__body td {
	padding: 12px 14px;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	vertical-align: top;
}

.mk-policy__body th {
	font-weight: 700;
	color: var(--mk-white);
	background: rgba(255, 255, 255, 0.04);
}

/* A table that is wider than the reading measure is allowed to break out of
   it, so the numbers stay legible instead of being squeezed. */
.mk-policy__body table {
	max-width: var(--mk-content);
	margin-left: auto;
	margin-right: auto;
}

.mk-policy__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	max-width: var(--mk-policy-measure);
	margin: 48px auto 0;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Light contexts (if a policy is ever placed inside a light section). */
.mk-section--light .mk-policy__title,.mk-section--light .mk-policy__body h2,.mk-section--light .mk-policy__body h3,.mk-section--light .mk-policy__body h4,.mk-section--light .mk-policy__body strong { color: var(--mk-black); }

.mk-section--light .mk-policy__head,.mk-section--light .mk-policy__foot { border-color: rgba(0, 0, 0, 0.12); }

.mk-section--light .mk-policy__body { color: rgba(0, 0, 0, 0.78); }

.mk-section--light .mk-policy__eyebrow,.mk-section--light .mk-policy__updated { color: rgba(0, 0, 0, 0.55); }

.mk-section--light .mk-policy__body a { color: var(--mk-black); }

/* ==========================================================================
   Second pass — storefront, account, archive and page templates

   The blocks below were added when the WooCommerce template tree was completed:
   every page type now has a theme template, and these are the classes those
   templates emit. They are collected here rather than folded into the sections
   above so the addition stays reviewable as one set.

   Every block names the surface it lands on. That matters because this theme is
   dark by default — `body.mk` paints `--mk-black` and `--mk-white` text — while
   a handful of surfaces are white cards (`.mk-account__content`,
   `.mk-contact-form-card`, `.mk-section--light`). Writing a light-surface rule
   without scoping it to its card, or a dark rule without realising it lands on
   a white card, produces invisible text.
   ========================================================================== */

/* --- Notices and banners ------------------------------------------------
   Two notice renderers coexist and both are styled, because which one a store
   sees is a store setting rather than a theme decision: the classic cart and
   checkout go through WooCommerce's `notices/*.php`, while the block cart and
   checkout — the default since WooCommerce 8 — render
   `wc-block-components-notice-banner` from `block-notices/*.php` and never
   touch `notices/*.php` at all. Dark stage.
   ---------------------------------------------------------------------- */

.mk-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 24px;
	padding: 16px 22px;
	border: 1px solid #333;
	border-left: 3px solid var(--mk-red);
	border-radius: var(--mk-radius-input);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
	font-size: 14.5px;
	line-height: 1.6;
}

/* `notices/*.php` renders the notice as a `<ul>` whose rows are the `<li>`s, so
   the list has to stack. The block banner is a single `<div>`, where the icon
   and the text sit side by side and the row direction is what we want. The
   element selector outranks the class so both get the right axis. */
ul.mk-notice { flex-direction: column; gap: 8px; }
.mk-notice__item { display: flex; align-items: flex-start; gap: 10px; margin: 0; }

.mk-notice__text { flex: 1 1 auto; min-width: 0; }
.mk-notice__text p { margin: 0 0 6px; }
.mk-notice__text p:last-child { margin-bottom: 0; }
.mk-notice__text ul { margin: 6px 0 0; padding-left: 1.2em; }

.mk-notice__icon { flex: 0 0 auto; margin-top: 3px; }
.mk-notice__icon svg { display: block; width: 16px; height: 16px; }

.mk-notice a { text-decoration: underline; text-underline-offset: 3px; }
.mk-notice .button { margin-left: 12px; }

.mk-notice--success { border-left-color: #2e7d32; }
.mk-notice--success .mk-notice__icon { color: #2e7d32; }
.mk-notice--info { border-left-color: #0277bd; }
.mk-notice--info .mk-notice__icon { color: #0277bd; }
.mk-notice--error { border-left-color: var(--mk-red); }
.mk-notice--error .mk-notice__icon { color: var(--mk-red); }

.mk-checkout-errors { max-width: var(--mk-measure); }
.mk-checkout-errors .mk-btn { margin-top: 6px; }

/* --- Product card: the parts the loop templates add ---------------------
   `.mk-card`, `.mk-card__media` and `.mk-card__price` are defined with the
   card itself, further up. These are the wrappers and extras that only appear
   once the loop templates render. Dark stage — the card is transparent and
   inherits, which is what lets the same markup work in the home page's light
   section.
   ---------------------------------------------------------------------- */

.mk-card-wrapper { min-width: 0; }
.mk-card__information { min-width: 0; }
.mk-card__media-wrap { position: relative; }

.mk-card__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--mk-gray-400);
}
.mk-card__rating .star-rating { margin: 0; font-size: 13px; }
.mk-card__rating-count { font-size: 12.5px; letter-spacing: 0.4px; }

/* Loop add-to-cart. The card deliberately hides it so the grid matches the
   source, which is image + title + price; the rule exists so a store that
   re-enables the button through `woocommerce_loop_add_to_cart_link` gets a
   styled one instead of a bare link. */
.mk-card__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 38px;
	margin-top: 10px;
	padding: 0 22px;
	border-radius: var(--mk-radius-pill);
	background: var(--mk-red);
	color: var(--mk-white);
	font-size: 13px;
	font-weight: 500;
}
.mk-card__cta:hover { background: var(--mk-red-dark); color: var(--mk-white); opacity: 1; }

/* Quote-only catalogue: most items carry no price, so the card prints this
   instead of an empty row. Muted, because it is a statement rather than a
   number. */
.mk-price-on-request {
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--mk-gray-300);
}

/* --- Single product: parts added with the full template set -------------
   The gallery, price and summary rules for this page are with the two-column
   grid further up. These are the badges, rating, stock line and tab bodies.
   Dark stage.
   ---------------------------------------------------------------------- */

.mk-product__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
}

.mk-product__title-wrap { margin: 0 0 14px; }

.mk-product__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 13.5px;
	color: var(--mk-gray-400);
}
.mk-product__rating .star-rating { margin: 0; font-size: 14px; }
.mk-product__review-link { color: var(--mk-gray-400); }
.mk-product__review-link:hover { color: var(--mk-red); }

.mk-product__excerpt {
	margin: 0 0 26px;
	font-size: 14.5px;
	line-height: 1.7;
	color: var(--mk-gray-400);
}
.mk-product__excerpt p:last-child { margin-bottom: 0; }

.mk-product__stock {
	margin: 0 0 16px;
	font-size: 13.5px;
	letter-spacing: 0.4px;
}
.mk-product__stock.in-stock { color: #6fbf73; }
.mk-product__stock.out-of-stock { color: var(--mk-red); }
.mk-product__stock.available-on-backorder { color: var(--mk-gray-300); }

/* The external/affiliate add-to-cart form. WooCommerce's own `.cart` styling is
   untouched; this only gives the button its pill shape when the theme's button
   class is present, and keeps the form from stretching. */
.mk-add-to-cart { margin: 0 0 22px; }
.mk-add-to-cart .mk-btn { min-height: 46px; }

/* Data tabs. The nav and panel chrome is styled with the tabs themselves
   further up — these are the pieces the theme's own tab bodies add. */
.mk-tabs__heading {
	/* The tab label is already visible in the nav above the panel and the panel
	   carries `aria-labelledby` pointing at it, so a second visible copy would
	   be noise. Kept in the outline, hidden on screen. */
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mk-prose {
	max-width: var(--mk-measure);
	font-size: 15px;
	line-height: 1.75;
}
.mk-prose > *:first-child { margin-top: 0; }
.mk-prose > *:last-child { margin-bottom: 0; }
.mk-prose h2, .mk-prose h3, .mk-prose h4 { margin-top: 1.5em; }
.mk-prose img { margin: 1.4em 0; }
.mk-prose ul, .mk-prose ol { padding-left: 1.4em; }
.mk-prose blockquote {
	margin: 1.5em 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--mk-red);
	font-size: 16px;
	color: var(--mk-gray-400);
}

/* Specification table. `.mk-table` supplies the shared table chrome; this adds
   the label/value weighting the attribute list needs. */
.mk-spec-table { max-width: var(--mk-measure); }
.mk-spec-table th { width: 34%; color: var(--mk-gray-300); }
.mk-spec-table td { color: inherit; }

/* Up-sells. Same shape as the related-products block, which the theme already
   styles — the section itself is a `.mk-section--tight`, so this only has to
   make sure the grid inside it behaves. */
.mk-upsells { min-width: 0; }
.mk-upsells .products { margin: 0; }

/* --- Reviews ------------------------------------------------------------
   Reached through `WC_Template_Loader::comments_template_loader()`, which looks
   for the theme's `woocommerce/single-product-reviews.php` before falling back
   to the theme's own `comments.php` — so this is the only correct hook for the
   product review area. Dark stage.
   ---------------------------------------------------------------------- */

.mk-reviews { margin-top: 8px; }

.mk-reviews__title {
	margin: 0 0 26px;
	font-size: 26px;
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
}

.mk-reviews__none {
	margin: 0 0 26px;
	font-size: 15px;
	color: var(--mk-gray-400);
}

.mk-review-list {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
}
.mk-review-list .comment + .comment { margin-top: 30px; }

.mk-review__container { display: flex; gap: 20px; align-items: flex-start; }

.mk-review__body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 24px 26px;
	border: 1px solid #333;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.03);
}
.mk-review__body > *:first-child { margin-top: 0; }
.mk-review__body > *:last-child { margin-bottom: 0; }

.mk-review__meta {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--mk-gray-400);
}
.mk-review__meta strong { color: var(--mk-white); font-weight: 500; }
.mk-review__meta time { color: var(--mk-gray-400); }
.mk-review__meta .woocommerce-review__awaiting-approval {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: var(--mk-radius-pill);
	background: rgba(255, 255, 255, 0.1);
	font-size: 11.5px;
	font-style: normal;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.mk-review-form__wrap { margin-top: 8px; }
.mk-review-form { max-width: var(--mk-measure); }
.mk-review-form__title {
	margin: 0 0 22px;
	font-size: 22px;
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
}

/* Shown instead of the form when the store requires a verified purchase. */
.mk-reviews__gate {
	margin: 0;
	padding: 16px 22px;
	border: 1px solid #333;
	border-radius: var(--mk-radius-input);
	background: rgba(255, 255, 255, 0.04);
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.75);
}

/* --- Cart and checkout: the totals, shipping and payment chrome ---------
   All dark. `.mk-totals`, `.mk-shipping-methods` and `.mk-shipcalc` are the
   theme's names for WooCommerce's `cart_totals`, `woocommerce-shipping-methods`
   and `woocommerce-shipping-calculator` blocks — both sets of classes are on the
   elements, so WooCommerce's scripts and any gateway CSS keep working.
   ---------------------------------------------------------------------- */

.mk-cart-wrap { width: 100%; }

.mk-totals { width: 100%; }
.mk-totals__title {
	margin: 0 0 18px;
	font-size: 24px;
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
}
.mk-totals__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.mk-totals__table th,
.mk-totals__table td {
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	text-align: left;
	vertical-align: top;
}
.mk-totals__table td { text-align: right; }
.mk-totals__row--total th,
.mk-totals__row--total td {
	padding-top: 18px;
	font-size: 18px;
	border-bottom: 0;
}
.mk-totals__row--shipping td { text-align: right; }
.mk-totals__actions { padding: 20px 0 0; }
.mk-totals__actions .checkout-button,
.mk-totals__actions .mk-btn { width: 100%; }

/* Shipping option list inside the totals row. `wc_cart_totals_shipping_html()`
   owns the radio inputs and their `shipping_method` names — only the list
   chrome is styled here. */
.mk-shipping-methods {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.mk-shipping-methods__item { margin: 0 0 8px; font-size: 14.5px; }
.mk-shipping-methods__item:last-child { margin-bottom: 0; }
.mk-shipping-methods__item label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.mk-shipping-methods__item input[type="radio"] { width: auto; min-height: 0; margin: 0; }
.mk-shipping-methods__item .woocommerce-Price-amount { margin-left: 4px; }

.mk .woocommerce-shipping-destination {
	margin: 10px 0 0;
	font-size: 13.5px;
	color: var(--mk-gray-400);
	text-align: left;
}

.mk-shipcalc { margin: 18px 0 0; }
.mk-shipcalc__toggle {
	display: inline-block;
	margin: 0;
	font-size: 14px;
	color: var(--mk-white);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.mk-shipcalc__form { margin-top: 16px; }
.mk-shipcalc__form .mk-field { margin-bottom: 12px; }
.mk-shipcalc__submit { margin: 4px 0 0; }
.mk-shipcalc__submit .mk-btn { min-height: 40px; }

.mk-cross-sells { margin-top: 56px; }
.mk-cross-sells__title {
	margin: 0 0 26px;
	font-size: 24px;
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
}

/* Cart item variation data — the `<dl class="variation">` under a product name. */
.mk-variation {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--mk-gray-400);
}
.mk-variation dt,
.mk-variation dd { display: inline; margin: 0; }
.mk-variation dt { font-weight: 500; }
.mk-variation dd + dt::before { content: " · "; }
.mk-variation dd { margin-right: 8px; }
.mk-variation p { margin: 0; }

/* Mini cart — the widget list inside the header drawer. Dark, like the drawer. */
.mk-mini-cart {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 60vh;
	overflow-y: auto;
}
.mk-mini-cart__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 14px;
}
.mk-mini-cart__item a { color: inherit; }
.mk-mini-cart__item img {
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: var(--mk-radius-card);
	background: var(--mk-white);
}
.mk-mini-cart__link { display: block; font-size: 14px; }
.mk-mini-cart__total {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-size: 15px;
}
.mk-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 16px 0 0;
}
.mk-mini-cart__buttons .button,
.mk-mini-cart__buttons .mk-btn { width: 100%; text-align: center; }
.mk-mini-cart__empty {
	margin: 0;
	padding: 20px 0;
	font-size: 14.5px;
	color: rgba(255, 255, 255, 0.72);
}

/* Checkout form sections. The fields inside are WooCommerce's own
   `woocommerce_form_field()` output and keep its markup; these rules only
   supply the two-column grid and the section heading. */
.mk-form-section { margin: 0 0 40px; }
.mk-form-section__title {
	margin: 0 0 20px;
	font-size: 22px;
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
}
.mk-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
}
.mk-form-grid .form-row-wide,
.mk-form-grid .form-row-full,
.mk-form-grid .create-account,
.mk-form-grid .clear { grid-column: 1 / -1; }
.mk-form-section--account { margin-bottom: 32px; }

/* The order review table on checkout. WooCommerce's AJAX recalculation finds
   its rows by the `.cart-subtotal`, `.cart-discount`, `.fee` and `.order-total`
   classes, which the template keeps — these rules only style them. */
.mk-review-order {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.mk-review-order th,
.mk-review-order td {
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	text-align: left;
	vertical-align: top;
}
.mk-review-order td { text-align: right; }
.mk-review-order tr.order-total th,
.mk-review-order tr.order-total td {
	padding-top: 18px;
	font-size: 18px;
	border-bottom: 0;
}
.mk-review-order .product-name { padding-right: 16px; }
.mk-review-order .product-quantity { white-space: nowrap; }

/* Payment box, shared by checkout and the "pay for order" page. The method
   list is WooCommerce's `wc_payment_methods` — the radios and the
   `payment_method` names are untouched. */
.mk-payment {
	padding: 24px;
	border: 1px solid #333;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.04);
}
.mk-payment__methods {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mk-payment__methods li { margin: 0 0 14px; }
.mk-payment__methods li:last-child { margin-bottom: 0; }
.mk-payment__methods label { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; font-size: 14.5px; }
.mk-payment__methods input[type="radio"] { width: auto; min-height: 0; margin: 0; }
.mk-payment__methods .payment_box {
	margin: 10px 0 0;
	padding: 14px 18px;
	border-radius: var(--mk-radius-input);
	background: rgba(255, 255, 255, 0.04);
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.75);
}
.mk-payment__methods .payment_box p:last-child { margin-bottom: 0; }
.mk-payment__actions { margin: 22px 0 0; }
.mk-payment__actions .mk-btn,
.mk-payment__actions #place_order { width: 100%; }

/* The spinner WooCommerce swaps in while the order is being placed. It is
   positioned over the button rather than laid out beside it. */
.mk-payment__spinner {
	display: none;
	float: right;
	width: 20px;
	height: 20px;
	margin-top: -34px;
	margin-right: 16px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: var(--mk-white);
	border-radius: 50%;
	animation: mk-spin 0.8s linear infinite;
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

/* "Pay for order" page: the order table plus the payment box. */
.mk-pay-order { margin: 0; }
.mk-pay-order__table {
	width: 100%;
	margin: 0 0 34px;
	border-collapse: collapse;
	font-size: 15px;
}
.mk-pay-order__table th,
.mk-pay-order__table td {
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	text-align: left;
	vertical-align: top;
}
.mk-pay-order__table td:last-child,
.mk-pay-order__table th:last-child { text-align: right; }
.mk-pay-order__table tfoot tr:last-child th,
.mk-pay-order__table tfoot tr:last-child td { font-size: 18px; border-bottom: 0; }

/* Order receipt — the `ul.order_details` list on the pay page and the
   thank-you page's overview. The thankyou markup already carries
   `.mk-order-received`; the pay page's copy carries `.mk-order-receipt`, so
   both are listed. */
.mk-order-receipt,
.mk-order-received__overview {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 0 0 30px;
	padding: 24px;
	list-style: none;
	border: 1px solid #333;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.03);
}
.mk-order-receipt__row,
.mk-order-received__overview li {
	margin: 0;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: rgba(255, 255, 255, 0.6);
}
.mk-order-receipt__row strong,
.mk-order-received__overview li strong {
	display: block;
	margin-top: 5px;
	font-size: 16px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--mk-white);
}

/* Quantity control. `.mk .quantity` in the cart section already supplies the
   dark chrome; the theme's own class only has to exist as a hook, and the
   read-only variant — used when an order is being re-paid — has to stop
   looking editable. */
.mk-qty { min-width: 0; }
.mk-qty--readonly { opacity: 0.7; }
.mk-qty--readonly .qty { pointer-events: none; }

/* --- Account and order screens ------------------------------------------
   These land on the white `.mk-account__content` card, so they use the light
   palette — the opposite of the cart and checkout rules above.
   ---------------------------------------------------------------------- */

/* The per-view wrapper inside the white card. It deliberately has no surface
   and no padding of its own: the card is the shell's job, and giving this one a
   background or inset would double up on the card and indent the views
   relative to the dashboard. It exists so every view has a stable hook. */
.mk-account__panel { min-width: 0; }

.mk-account__form { margin: 0; }
.mk-account__col--login,
.mk-account__col--register { min-width: 0; }

/* Helper text under a field. Light card. */
.mk-field__hint {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #666;
}

/* The shipping calculator's selects are WooCommerce form fields rendered inside
   a dark section, so they need the dark input treatment rather than the light
   one the account card uses. */
.mk-shipcalc .mk-field__input {
	width: 100%;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--mk-radius-input);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
}

.mk-order-details,
.mk-order-downloads { margin: 0 0 40px; }
.mk-order-details__title {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 700;
	color: #1a1a1a;
}
.mk-order-downloads h2 {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 700;
	color: #1a1a1a;
}
.mk-order-details .mk-table,
.mk-order-downloads .mk-table { color: #1a1a1a; }
.mk-order-downloads .mk-btn { white-space: nowrap; }

.mk-order-customer { margin: 0; }
.mk-order-customer__details { margin: 0 0 30px; }
.mk-order-customer .woocommerce-column__title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
}
.mk-order-customer address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: #444;
}
.mk-order-customer .woocommerce-customer-details--phone,
.mk-order-customer .woocommerce-customer-details--email {
	margin: 10px 0 0;
	font-size: 14px;
	color: #444;
}

/* Order-action buttons inside the order table (pay, cancel, confirm receipt).
   `.woocommerce-button` is what WooCommerce's own emails and templates use, so
   it is left alone; the theme class only rides alongside. */
.mk-order-details .button,
.mk-order-details .woocommerce-button { white-space: nowrap; }

/* --- Search forms -------------------------------------------------------
   Two of them: the theme's generic `searchform.php`, and WooCommerce's product
   search, which must keep its `post_type=product` hidden field or it stops
   searching products. Both are dark — the drawer and the shop header.
   ---------------------------------------------------------------------- */

.mk-searchform,
.mk-product-search {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
	max-width: 520px;
	margin: 0;
}
.mk-searchform__input,
.mk-product-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-right: 0;
	border-radius: var(--mk-radius-pill) 0 0 var(--mk-radius-pill);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
}
.mk-searchform__input::placeholder,
.mk-product-search input[type="search"]::placeholder { color: var(--mk-gray-400); }
.mk-searchform__submit,
.mk-product-search .mk-btn {
	flex: 0 0 auto;
	min-height: 46px;
	border-radius: 0 var(--mk-radius-pill) var(--mk-radius-pill) 0;
}

/* --- Storefront wrappers and shop header --------------------------------
   `.mk-wc-main` wraps every WooCommerce page; `.mk-cart-wrap` wraps the cart.
   `.mk-collection-hero` is the shop/archive header block, which is the one
   place the shop title is printed — the theme no longer filters
   `woocommerce_page_title`, so the title here is the real one.
   ---------------------------------------------------------------------- */

.mk-wc-main { min-width: 0; }
.mk-collection-hero { min-width: 0; }

.mk-product-count__text { white-space: nowrap; }

/* --- Blog, archive, attachment and article ------------------------------
   Dark stage, like the rest of the site.
   ---------------------------------------------------------------------- */

/* `<main>` is a semantic hook; it needs no layout of its own, but it is listed
   so the class is not mistaken for a dead name. */
.mk-main { display: block; }

.mk-sidebar {
	min-width: 0;
	padding-left: 40px;
	border-left: 1px solid var(--mk-gray-200);
	border-left-color: rgba(255, 255, 255, 0.12);
}

.mk-layout__main { min-width: 0; }

.mk-eyebrow {
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mk-red);
}

/* The source's large display heading, used above section copy. */
.mk-h--lg {
	margin: 0 0 18px;
	font-size: 40px;
	font-weight: var(--mk-heading-weight);
	line-height: 1.2;
	letter-spacing: var(--mk-heading-tracking);
}

.mk-archive, .mk-blog { min-width: 0; }

.mk-author-box {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 26px 0 0;
	padding: 24px;
	border: 1px solid #333;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.03);
}
.mk-author-box__avatar {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
}
.mk-author-box__bio {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.75);
}
.mk-author-box__bio p:last-child { margin-bottom: 0; }

.mk-attachment { min-width: 0; }
.mk-attachment__parent { margin: 0 0 24px; font-size: 13.5px; color: var(--mk-gray-400); }
.mk-attachment__figure { margin: 0 0 26px; }
.mk-attachment__figure img { width: 100%; height: auto; }
.mk-attachment__caption {
	margin-top: 12px;
	font-size: 13.5px;
	color: var(--mk-gray-400);
}
.mk-attachment__description { max-width: var(--mk-measure); margin-bottom: 26px; }
.mk-attachment__download { margin: 0; }

.mk-article { min-width: 0; }
.mk-article__title { margin: 0; }
.mk-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 10px;
	font-size: 13px;
	color: var(--mk-gray-400);
}
.mk-article__content { min-width: 0; }
.mk-article__back { display: inline-block; margin-top: 30px; font-size: 14px; }

.mk-pagination__label {
	display: block;
	margin-bottom: 12px;
	font-size: 13px;
	letter-spacing: 0.4px;
	color: var(--mk-gray-400);
}

.mk-empty__icon { margin: 0 0 16px; font-size: 40px; line-height: 1; }
.mk-empty__title {
	margin: 0 0 14px;
	font-size: 28px;
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
}

/* --- Collection FAQ ----------------------------------------------------- */

.mk-collection-faq { min-width: 0; }

/* --- About page ---------------------------------------------------------
   The section wrappers are hooks; the grids inside them are the theme's own
   `.mk-about-3up`, `.mk-stats`, `.mk-timeline` and `.mk-team`, which are
   defined with the rest of the about-page furniture further up. Listing the
   wrappers keeps them from reading as dead names and gives each a stacking
   context. Dark stage.
   ---------------------------------------------------------------------- */

.mk-about-intro,
.mk-about-who,
.mk-about-stats,
.mk-about-split-section,
.mk-about-timeline,
.mk-about-team { min-width: 0; }

.mk-about-intro__eyebrow {
	margin: 0 0 14px;
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--mk-red);
}

/* --- Contact page and inquiry block -------------------------------------
   `.mk-contact-form` and `.mk-inquiry__form` are the two `<form>` elements.
   `.mk-inquiry__card` is dark (translucent on the dark stage);
   `.mk-contact-form-card` is white, and its fields are already re-pointed at
   the light palette further up — so the form rule here stays layout-only and
   does not touch colour.
   ---------------------------------------------------------------------- */

.mk-contact-form,
.mk-inquiry__form { margin: 0; }
.mk-inquiry { min-width: 0; }

/* The tab and totals blocks are styled through WooCommerce's own selectors —
   `.mk .woocommerce-tabs ul.tabs` for the nav, `.mk-totals__table th, td` for
   the rows — because those are what WooCommerce's tab script and the cart
   recalculation actually key off. The theme's own class names are declared here
   as well so that every class a template emits has a definition of its own, and
   so a store restyling `.mk-tabs__nav` is not writing to a name that does not
   exist. */

.mk-tabs { min-width: 0; }
.mk-tabs__nav { flex-wrap: wrap; }
.mk-tabs__item { margin: 0; }
.mk-tabs__panel { min-width: 0; }

.mk-totals__row { vertical-align: top; }
.mk-review-order__item .product-name { padding-right: 16px; }

.mk-reviews__list { min-width: 0; }

/* --- Loop wrappers and category cards ---------------------------------- */

.mk-card-item { margin: 0; }

/* The category card. WooCommerce builds the inside through its own hooks —
   `woocommerce_template_loop_category_link_open` wraps it in an `<a>`,
   `woocommerce_subcategory_thumbnail` prints the image and
   `woocommerce_template_loop_category_title` prints the heading — so the theme
   styles those elements instead of replacing the markup, which would break any
   plugin adding to a category card. */
.mk-cat-card { min-width: 0; }
.mk-cat-card > a { display: block; color: inherit; }
.mk-cat-card img {
	width: 100%;
	height: auto;
	margin-bottom: 14px;
	border-radius: var(--mk-radius-card);
	background: var(--mk-white);
}
.mk-cat-card .woocommerce-loop-category__title {
	margin: 0;
	font-size: 17px;
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
}
.mk-cat-card .woocommerce-loop-category__title .count {
	font-size: 13px;
	color: var(--mk-gray-400);
}

/* The quantity input keeps WooCommerce's `qty` class and is styled by
   `.mk .quantity .qty` in the cart section. `mk-qty__input` is declared so the
   class the template adds has a definition of its own. */
.mk-qty__input { min-width: 0; }

/* The review row is a `<li>` from `comment_class()`. */
.mk-review { margin: 0; list-style: none; }

/* --- Article, attachment and gallery wrappers --------------------------- */

.mk-entry { min-width: 0; }
.mk-attachment__image { width: 100%; height: auto; }
.mk-attachment__nav { margin-top: 40px; }
.mk-product__stage-img { display: block; width: 100%; height: auto; }

/* `mk-nav__item--has-mega` is deliberately left unstyled. It is the hook
   `assets/js/main.js` binds to for the drawer's expand/collapse, and the panel
   itself is shown by the `:hover` / `:focus-within` rules on `.mk-nav__item`.
   It is named here so the class is not mistaken for a dead one. */

/* `maiker_body_class()` adds `mk-no-sidebar` to `<body>` whenever the blog
   sidebar has no widgets. Nothing consumed it, so the class was inert and the
   single-column layout it was meant to produce never happened — the article
   column kept reserving a 320px gutter for a sidebar that was not there. */
body.mk-no-sidebar .mk-layout { grid-template-columns: minmax(0, 1fr); }

/* --- Responsive additions ----------------------------------------------
   Only for the components above. Everything else is handled by the main
   Responsive section that follows.
   ---------------------------------------------------------------------- */

@media screen and (max-width: 989px) {
	.mk-sidebar { padding-left: 0; border-left: 0; }
	.mk-form-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.mk-searchform,
	.mk-product-search { max-width: none; }
	.mk-order-receipt,
	.mk-order-received__overview { grid-template-columns: minmax(0, 1fr); }
}

@media screen and (max-width: 749px) {
	.mk-h--lg { font-size: 30px; }
	.mk-author-box { flex-direction: column; }
	.mk-mini-cart__item img { width: 52px; height: 52px; }
	.mk-review__container { flex-direction: column; gap: 12px; }
	.mk-review__body { padding: 20px; }
	.mk-searchform__input,
	.mk-product-search input[type="search"],
	.mk-searchform__submit,
	.mk-product-search .mk-btn { min-height: 42px; }
	.mk-searchform__submit,
	.mk-product-search .mk-btn { padding: 0 18px; font-size: 13px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 1599px) {
	.mk-container { padding: 0 24px; }
}

@media screen and (max-width: 1199px) {
	.mk-brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mk-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mk .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mk-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mk-footer__about { grid-column: 1 / -1; }
	.mk-split { gap: 40px; }
	.mk-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
}

@media screen and (max-width: 989px) {
	.mk-section { padding: 56px 0; }
	/* New components: stack the product, account and contact layouts. */
	.mk-product { grid-template-columns: minmax(0, 1fr); }
	.mk-product__info { padding: 26px 0 0; }
	.mk-product__title { font-size: 40px; }
	.mk-account__nav { padding: 10px 0; }
	.mk-account__nav ul { display: flex; flex-wrap: wrap; }
	.mk-account__nav li { flex: 1 1 auto; }
	.mk-account__nav a { padding: 10px 16px; }
	.mk-account__nav .is-active a { box-shadow: inset 0 -3px 0 var(--mk-red); }
	.mk-account__col { padding: 34px; }
	.mk-account__content { padding: 34px; }
	.mk-policy__title { font-size: 38px; }
	.mk-policy__body h2 { font-size: 23px; }
	.mk-policy__body h3 { font-size: 19px; }
	.mk-contact-help__title { font-size: 48px; }
	.mk-contact-cards { flex-direction: column; }
	.mk-contact-form-card { padding: 40px; }
	.mk-contact-info__title { max-width: 100%; }
	.mk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
	.mk-about-3up { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.mk-about-split { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	.mk-team { grid-template-columns: minmax(0, 1fr); }
	.mk-timeline::before { left: 4px; }
	.mk-timeline__item,
	.mk-timeline__item:nth-child(even) {
		width: 100%;
		margin-left: 0;
		padding: 0 0 32px 28px;
	}
	.mk-timeline__item::after,
	.mk-timeline__item:nth-child(even)::after { left: 0; right: auto; }
	.mk .mk-product-grid,
	.mk .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mk .woocommerce-checkout .col2-set { grid-template-columns: minmax(0, 1fr); }
	.mk-order-received ul.order_details { grid-template-columns: minmax(0, 1fr); }

	.mk-header__inner { min-height: 58px; gap: 12px; }
	.mk-burger { display: inline-flex; }

	.mk-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(340px, 86vw);
		background: var(--mk-black);
		padding: 24px 22px 40px;
		overflow-y: auto;
		transform: translateX(100%);
		transition: transform 0.28s ease;
		z-index: 70;
	}
	.mk-nav[data-open="true"] { transform: translateX(0); }

	.mk-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.mk-nav__item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
	.mk-nav__link { display: flex; justify-content: space-between; padding: 15px 2px; font-size: 14px; }

	.mk-mega,
	.mk-mega--cols-4 {
		position: static;
		display: none;
		min-width: 0;
		width: 100%;
		padding: 12px 0 18px;
		background: transparent;
		color: var(--mk-white);
		border-top: 0;
		box-shadow: none;
	}
	.mk-nav__item[data-expanded="true"] > .mk-mega { display: block; }
	.mk-mega__grid,
	.mk-mega--cols-4 .mk-mega__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
	.mk-mega__col h3 { color: var(--mk-gray-300); }
	.mk-mega__col a { color: rgba(255, 255, 255, 0.72); }

	.mk-nav-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 65;
		display: none;
	}
	.mk-nav-backdrop[data-open="true"] { display: block; }

	/* The source banner is 2:1 (padding-bottom 50%). Below ~1000px that is
	   shorter than the content needs, so fall back to a fixed floor. */
	.mk-hero { min-height: 620px; }
	.mk-hero__body { padding: 70px var(--mk-gutter); }

	.mk-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-gap-mobile); }
	.mk .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-gap-mobile); }
	.mk-cols { grid-template-columns: 1fr; gap: 32px; }
	.mk-split { grid-template-columns: 1fr; gap: 28px; }
	.mk-split--reverse .mk-split__media { order: 0; }
	.mk-posts { grid-template-columns: 1fr; gap: var(--mk-gap-mobile); }
	.mk-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-gap-mobile); }
	.mk-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk-form__row { grid-template-columns: 1fr; }
	.mk-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
	.mk-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.mk-404 { padding: 70px 0; }
	.mk-404__code { font-size: 68px; }
}

@media screen and (max-width: 749px) {
	:root { --mk-gutter: 15px; }
	.mk-collection-hero__title { font-size: 32px; margin: 18px 0; }

	.mk-toolbar { justify-content: flex-start; }
	.mk-ordering__label { margin-right: 12px; }
	.mk .mk-product-grid,
	.mk .products { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 15px; row-gap: 30px; }
	.mk-faq__title { font-size: 26px; }
	.mk-product__title { font-size: 30px; }
	.mk-product__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mk-account { padding-bottom: 20px; }
	.mk-account__title { font-size: 32px; }
	.mk-account__cols { grid-template-columns: minmax(0, 1fr); }
	.mk-account__col { padding: 24px; }
	.mk-account__content { padding: 24px; }
	.mk-account__tiles,
	.mk-account__addresses { grid-template-columns: minmax(0, 1fr); }
	.mk-account__row { flex-direction: column; align-items: flex-start; }
	.mk-float-row { grid-template-columns: minmax(0, 1fr); }
	.mk-b2b__grid { grid-template-columns: minmax(0, 1fr); }
	.mk-contact-help { padding: 60px 0; }
	.mk-contact-help__title { font-size: 32px; }
	.mk-contact-help__sub { font-size: 15px; }
	.mk-contact-form-card { padding: 24px; }
	.mk-contact-form-card__title { font-size: 24px; margin-bottom: 26px; }
	.mk-contact-form-card__bottom { flex-direction: column; align-items: stretch; }
	.mk-contact-form-card .mk-submit { width: 100%; }
	.mk-contact-info { padding: 60px 0; }
	.mk-contact-info__head { margin-bottom: 40px; }
	.mk-contact-info__title { font-size: 30px; }
	.mk-contact-info__grid { grid-template-columns: minmax(0, 1fr); }
	.mk-contact-info__item { padding: 30px 24px; }
	.mk-contact-info__item:nth-child(odd) { border-right: 0; }
	.mk-contact-info__item:nth-last-child(-n + 2) { border-bottom: 1px solid #eee; }
	.mk-contact-info__item:last-child { border-bottom: 0; }
	.mk-stats { gap: 26px; }
	.mk-stat__num { font-size: 44px; }
	.mk-article__title { font-size: 30px; }
	.mk-blog-articles { grid-template-columns: minmax(0, 1fr); }
	.mk-blog-articles > li:nth-child(3n + 1),
	.mk-blog-articles > li:nth-child(3n + 2):last-child { grid-column: auto; text-align: left; }
	.mk-cart__title { font-size: 28px; }
	.mk-checkout__title { font-size: 28px; }

	.mk .cart-collaterals { max-width: none; }
	.mk .woocommerce-cart-form table.shop_table_responsive tr td::before { color: rgba(255, 255, 255, 0.6); }
	.mk-inquiry__card { padding: 26px 20px; }

	.mk-policy { padding-bottom: 64px; }
	.mk-policy__title { font-size: 30px; }
	.mk-policy__head { margin-bottom: 30px; padding-bottom: 20px; }
	.mk-policy__body { font-size: 15.5px; line-height: 1.7; }
	.mk-policy__body h2 { margin-top: 34px; font-size: 21px; }
	.mk-policy__body h3 { font-size: 18px; }
	.mk-policy__foot { flex-direction: column; align-items: stretch; }
	.mk-policy__foot .mk-btn { text-align: center; }
	/* Let wide tables scroll instead of squashing their columns. */
	.mk-policy__body table { display: block; overflow-x: auto; white-space: nowrap; }

	.mk-section { padding: 44px 0; }
	.mk-section__head { margin-bottom: 28px; }

	.mk-announce__inner { justify-content: center; }
	.mk-announce__msg { font-size: 13px; }

	.mk-brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
	.mk-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mk-archive-grid { grid-template-columns: 1fr; }
	.mk-trust { grid-template-columns: 1fr; gap: 16px; }
	.mk-footer__grid { grid-template-columns: 1fr; gap: 28px; }
	.mk-footer__bar { flex-direction: column; align-items: flex-start; }
	.mk-footer__policies { margin-left: 0; }

	.mk-hero { min-height: 560px; }
	.mk-hero__body { padding: 56px var(--mk-gutter); }
	.mk-hero__actions { flex-direction: column; align-items: stretch; }

	.mk-btn { width: 100%; }
	.mk-hero__actions .mk-btn { width: 100%; }

}

@media (prefers-reduced-motion: reduce) {
	.mk *, .mk *::before, .mk *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}