/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ==========================================================================
   MEDIKIT Hub — لوحة ألوان الهوية
   --------------------------------------------------------------------------
   الألوان الأساسية مضبوطة في إعدادات الثيم (المظهر ← Theme Settings ← Colors)
   وبتتولّد كمتغيرات --wd-*. الملف ده بيضيف:
     1. اللوحة كاملة كمتغيرات --mk-* للاستخدام في Elementor والأقسام المخصصة
     2. التدرج اللوني
     3. حاجات إعدادات الثيم مابتغطيهاش (نص محايد، حلقات التركيز)
   ========================================================================== */

:root {
	/* --- اللوحة الرسمية --- */
	--mk-primary:     #112C6B; /* الأساسي     — نافي  */
	--mk-secondary:   #1D4E9E; /* ثانوي       — أزرق  */
	--mk-accent:      #08B6C9; /* علامة مميزة — تركواز */
	--mk-light-aqua:  #6EDBE6; /* أزرق فاتح          */
	--mk-dark-text:   #1F2937; /* نص داكن            */
	--mk-muted:       #8A94A6; /* رمادي محايد        */
	--mk-light-bg:    #F5F8FB; /* خلفية فاتحة        */
	--mk-white:       #FFFFFF; /* أبيض               */

	/* --- مشتقات محسوبة (مش في اللوحة، لازمة للحالات التفاعلية) --- */
	--mk-primary-hover:  #1D4E9E; /* = ثانوي، لرفع الأزرار عند hover */
	--mk-light-bg-hover: #E4ECF5;
	--mk-border:         #DCE4EE;

	/* --- تدرج الهوية --- */
	--mk-gradient: linear-gradient(90deg, var(--mk-primary) 0%, var(--mk-accent) 100%);
}

/* التدرج يبدأ من الأساسي في اتجاه بداية القراءة (يمين في العربي) */
[dir="rtl"] {
	--mk-gradient: linear-gradient(270deg, var(--mk-primary) 0%, var(--mk-accent) 100%);
}


/* ==========================================================================
   أدوات مساعدة — استخدمها كـ CSS class في Elementor أو المحتوى
   ========================================================================== */

/* خلفية بتدرج الهوية */
.mk-gradient-bg {
	background: var(--mk-gradient);
	color: var(--mk-white);
}

/* نص بتدرج الهوية */
.mk-gradient-text {
	background: var(--mk-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* قسم بخلفية فاتحة */
.mk-section-light {
	background-color: var(--mk-light-bg);
}

/* فاصل رقيق بالتدرج بين الأقسام */
.mk-gradient-rule {
	height: 3px;
	border: 0;
	background: var(--mk-gradient);
}


/* ==========================================================================
   نصوص محايدة — البيانات الثانوية (SKU، الوسوم، التواريخ، عدد النتائج)
   ========================================================================== */

.woocommerce-result-count,
.wd-product-sku,
.product_meta,
.posted_in,
.tagged_as,
.wd-post-date,
.wd-entry-meta {
	color: var(--mk-muted);
}


/* ==========================================================================
   إتاحة الوصول — حلقة تركيز واضحة بلون العلامة المميزة
   الثيم بيشيل outline في أماكن كتير، وده بيصعّب التنقل بالكيبورد
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--mk-accent);
	outline-offset: 2px;
}


/* ==========================================================================
   اختياري — نجوم التقييم بلون العلامة المميزة بدل الدهبي
   الدهبي (#eabe12) عُرف متعارف عليه في المتاجر، فسايبينه افتراضياً.
   فك التعليق لو عايز النجوم تركوازية:
   --------------------------------------------------------------------------
.star-rating,
.star-rating.wd-style-simple:after {
	color: var(--mk-accent);
}
   ========================================================================== */


/* ==========================================================================
   الصفحة الرئيسية — أقسام مخصصة
   ========================================================================== */

/* ---------- Hero ---------- */
/* The header sits directly above this, so no top margin — any gap between the
   nav and the hero reads as a mistake rather than breathing room. */
.mk-hero {
	position: relative;
	margin-top: 0;
	padding: clamp(3.5rem, 8vw, 6rem) 1.5rem clamp(3rem, 6vw, 4.5rem);
	overflow: hidden;
	background: var(--mk-primary);
	text-align: center;
	color: var(--mk-white);
	isolation: isolate;
}

/* Background is built in layers rather than a stock photo: a diagonal brand
   gradient, two soft light pools, and a tiled field of trade icons on top. */
.mk-hero-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(52rem 34rem at 82% 8%, rgb(8 182 201 / 34%) 0%, transparent 62%),
		radial-gradient(40rem 30rem at 8% 96%, rgb(29 78 158 / 55%) 0%, transparent 60%),
		linear-gradient(118deg, #0C2153 0%, var(--mk-primary) 42%, #17457F 74%, #0B6675 100%);
}
.mk-hero-bg::after {
	content: "";
	position: absolute;
	inset: -150px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300' fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='0.16'%3E%3Cg transform='translate(18 22) rotate(-8) scale(1.55)'%3E%3Cpath d='M12 3c-2.1 0-2.9 1-4.4 1S5.1 3.4 4.5 4.2C3.3 5.6 3.5 8 4.1 10.4c.5 2 .8 4.1 1.1 6.2.3 1.6.6 3.1 1.6 3.1 1 0 1.2-1.5 1.6-3.4.3-1.3.6-2.4 1.5-2.4s1.2 1.1 1.5 2.4c.4 1.9.6 3.4 1.6 3.4 1 0 1.3-1.5 1.6-3.1.3-2.1.6-4.2 1.1-6.2.6-2.4.8-4.8-.4-6.2-.6-.8-1.6-.2-3.1-.2S14.1 3 12 3Z'/%3E%3C/g%3E%3Cg transform='translate(132 10) rotate(12) scale(1.3)'%3E%3Cpath d='M14 3l7 7M18.5 6.5 8 17l-4 3 3-4L17.5 5.5M10 11l3 3M12.5 8.5l3 3'/%3E%3C/g%3E%3Cg transform='translate(232 44) rotate(-4) scale(1.45)'%3E%3Cpath d='M6 3v5.5a4 4 0 0 0 8 0V3M4.2 3h3.4M12.4 3h3.4M10 12.5v2a5.5 5.5 0 0 0 5.5 5.5 4 4 0 0 0 4-4v-1.6M19.5 11a1.7 1.7 0 1 0 0 3.4 1.7 1.7 0 0 0 0-3.4Z'/%3E%3C/g%3E%3Cg transform='translate(62 108) rotate(16) scale(1.35)'%3E%3Cpath d='M9 3h6M10 3v6.5L4.6 18a2 2 0 0 0 1.7 3h11.4a2 2 0 0 0 1.7-3L14 9.5V3M7.4 14h9.2'/%3E%3C/g%3E%3Cg transform='translate(168 128) rotate(-12) scale(1.6)'%3E%3Cpath d='M12 3l7 3v5.5c0 4.4-2.9 8.3-7 9.5-4.1-1.2-7-5.1-7-9.5V6l7-3ZM12 8.5v6M9 11.5h6'/%3E%3C/g%3E%3Cg transform='translate(254 160) rotate(8) scale(1.25)'%3E%3Cpath d='m11 3 1.6 4.3L17 9l-4.4 1.7L11 15l-1.6-4.3L5 9l4.4-1.7L11 3Z'/%3E%3C/g%3E%3Cg transform='translate(14 196) rotate(6) scale(1.4)'%3E%3Cpath d='M3.5 20.5 10 14M11.4 12.6l3.1-3.1a3.1 3.1 0 0 1 4.4 4.4l-3.1 3.1M16.9 3.3a2.4 2.4 0 0 1 3.4 0l.4.4a2.4 2.4 0 0 1 0 3.4l-1.4 1.4-3.8-3.8Z'/%3E%3C/g%3E%3Cg transform='translate(116 216) rotate(-14) scale(1.3)'%3E%3Cpath d='M9 11.5V5.2a1.6 1.6 0 0 1 3.2 0v5.1M12.2 10.3V4a1.6 1.6 0 0 1 3.2 0v6M15.4 10V6.6a1.6 1.6 0 0 1 3.2 0V14a7 7 0 0 1-7 7h-.8a5.8 5.8 0 0 1-5.8-5.8v-3.4a1.6 1.6 0 0 1 3.2 0v1.5'/%3E%3C/g%3E%3Cg transform='translate(212 246) rotate(10) scale(1.35)'%3E%3Cpath d='M12 3c-2.1 0-2.9 1-4.4 1S5.1 3.4 4.5 4.2C3.3 5.6 3.5 8 4.1 10.4c.5 2 .8 4.1 1.1 6.2.3 1.6.6 3.1 1.6 3.1 1 0 1.2-1.5 1.6-3.4.3-1.3.6-2.4 1.5-2.4s1.2 1.1 1.5 2.4c.4 1.9.6 3.4 1.6 3.4 1 0 1.3-1.5 1.6-3.1.3-2.1.6-4.2 1.1-6.2.6-2.4.8-4.8-.4-6.2-.6-.8-1.6-.2-3.1-.2S14.1 3 12 3Z'/%3E%3C/g%3E%3Cg transform='translate(60 268) rotate(-6) scale(1.2)'%3E%3Cpath d='M14 3l7 7M18.5 6.5 8 17l-4 3 3-4L17.5 5.5M10 11l3 3M12.5 8.5l3 3'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 300px 300px;
	background-repeat: repeat;
	/* Fade the icons out behind the copy so the headline keeps its contrast. */
	mask-image: radial-gradient(78% 78% at 50% 45%, transparent 0%, #000 72%);
	-webkit-mask-image: radial-gradient(78% 78% at 50% 45%, transparent 0%, #000 72%);
	animation: mk-hero-drift 90s linear infinite;
}

@keyframes mk-hero-drift {
	0%   { background-position: 0 0; }
	100% { background-position: 300px 300px; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-hero-bg::after { animation: none; }
}

/* Forces "in one place" onto its own line at every width. */
.mk-hero-title .mk-hero-line { display: block; }

.mk-hero-inner { position: relative; max-width: 58rem; margin-inline: auto; }

/* Figures under the buttons — the same rhythm as the trust strip below. */
.mk-hero-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	margin: clamp(2.25rem, 5vw, 3rem) 0 0;
	padding: clamp(1.5rem, 4vw, 2rem) 0 0;
	border-top: 1px solid rgb(255 255 255 / 18%);
	list-style: none;
}
.mk-hero-stats li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	margin: 0;
}
.mk-hero-stats strong {
	color: var(--mk-white);
	font-size: clamp(1.25rem, 3vw, 1.7rem);
	font-weight: 700;
	line-height: 1.1;
}
.mk-hero-stats span {
	color: rgb(255 255 255 / 78%);
	font-size: .82rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.mk-hero-kicker {
	margin: 0 0 .75rem;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .85;
}
.mk-hero-title {
	margin: 0 0 1rem;
	color: var(--mk-white);
	font-size: clamp(1.9rem, 5vw, 3.25rem);
	line-height: 1.15;
}
.mk-hero-sub {
	margin: 0 auto 2rem;
	max-width: 44rem;
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.65;
	opacity: .92;
}
.mk-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
	justify-content: center;
	margin: 0;
}

/* ---------- Buttons ---------- */
.mk-btn {
	display: inline-block;
	padding: .85rem 1.9rem;
	border: 2px solid transparent;
	border-radius: 6px;
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.mk-btn-light {
	border-color: var(--mk-white);
	background: var(--mk-white);
	color: var(--mk-primary);
}
.mk-btn-light:hover { background: var(--mk-light-bg); color: var(--mk-primary); }

.mk-btn-ghost {
	border-color: rgba(255, 255, 255, .65);
	color: var(--mk-white);
}
.mk-btn-ghost:hover { border-color: var(--mk-white); background: rgba(255, 255, 255, .12); color: var(--mk-white); }

.mk-btn-primary {
	border-color: var(--mk-primary);
	background: var(--mk-primary);
	color: var(--mk-white);
}
.mk-btn-primary:hover { border-color: var(--mk-secondary); background: var(--mk-secondary); color: var(--mk-white); }

/* ---------- Trust bar ---------- */
.mk-trust {
	border-bottom: 1px solid var(--mk-border);
	background: var(--mk-white);
	padding: 1.75rem 1.5rem;
}
.mk-trust-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	margin: 0 auto;
	padding: 0;
	max-width: 78rem;
	list-style: none;
}
.mk-trust-list li {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var(--mk-accent);
}
.mk-trust-list strong { color: var(--mk-primary); font-size: 1rem; }
.mk-trust-list span { color: var(--mk-muted); font-size: .875rem; line-height: 1.5; }

/* ---------- Sections ---------- */
.mk-section { padding: clamp(2.5rem, 6vw, 4.5rem) 1.5rem; }
.mk-section-light { background: var(--mk-light-bg); }

.mk-section-head {
	margin: 0 auto clamp(1.75rem, 4vw, 2.75rem);
	max-width: 46rem;
	text-align: center;
}
.mk-section-head h2 {
	margin: 0 0 .6rem;
	color: var(--mk-primary);
	font-size: clamp(1.5rem, 3.5vw, 2.15rem);
	line-height: 1.25;
}
.mk-section-head h2::after {
	display: block;
	width: 3.5rem;
	height: 3px;
	margin: .85rem auto 0;
	border-radius: 2px;
	background: var(--mk-gradient);
	content: "";
}
.mk-section-head p { margin: 0; color: var(--mk-muted); font-size: 1.02rem; line-height: 1.6; }

.mk-section-cta { margin: 2.25rem 0 0; text-align: center; }

/* ---------- Category grid ---------- */
.mk-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 1rem;
	margin: 0 auto;
	padding: 0;
	max-width: 78rem;
	list-style: none;
}
.mk-cat-card { margin: 0; }
.mk-cat-card a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6.5rem;
	padding: 1.25rem 1rem;
	border: 1px solid var(--mk-border);
	border-radius: 10px;
	background: var(--mk-white);
	color: var(--mk-primary);
	text-align: center;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mk-cat-card a:hover {
	border-color: var(--mk-accent);
	box-shadow: 0 6px 18px rgb(17 44 107 / 10%);
	transform: translateY(-2px);
	color: var(--mk-secondary);
}
.mk-cat-name { font-weight: 600; font-size: 1rem; line-height: 1.35; }

/* ---------- Why-us grid ---------- */
.mk-why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1.5rem;
	margin-inline: auto;
	max-width: 78rem;
}
.mk-why {
	padding: 1.6rem;
	border: 1px solid var(--mk-border);
	border-radius: 10px;
	background: var(--mk-white);
}
.mk-why h3 {
	margin: 0 0 .55rem;
	color: var(--mk-primary);
	font-size: 1.08rem;
	line-height: 1.35;
}
.mk-why p { margin: 0; color: var(--mk-dark-text); font-size: .94rem; line-height: 1.65; }

/* ==========================================================================
   الهيدر — شريط علوي + شريط الأقسام النافي
   ========================================================================== */

/* الشريط العلوي: العناصر متباعدة زي mapdent */
.whb-top-bar .mk-tb-left,
.whb-top-bar .mk-tb-cur,
.whb-top-bar .mk-tb-help { font-size: .82rem; white-space: nowrap; }
/* Desktop columns only. The theme centres .whb-col-mobile
   (justify-content: center), so a trailing margin on the mobile text element
   shoves the whole thing 1.5rem left of centre. This gap exists to separate
   the help line from "Login / Register", which only appear together on desktop. */
.whb-top-bar .whb-visible-lg .wd-header-text { margin-inline-end: 1.5rem; }
.whb-top-bar .wd-header-my-account { font-size: .82rem; }

/* Mobile column: let it sit centred, and give the row a little side padding
   so the text never touches the screen edge. */
.whb-top-bar .whb-col-mobile { justify-content: center; padding-inline: .5rem; }
.whb-top-bar .whb-col-mobile .wd-header-text { margin-inline: 0; }

/* Both numbers have to fit on a 360px screen, so the labels shrink rather
   than the numbers — the number is the thing being tapped. */
.whb-top-bar .mk-tb-tag { font-weight: 500; opacity: .72; }
@media (max-width: 767px) {
	.whb-top-bar .whb-col-mobile .mk-tb-help { font-size: .74rem; gap: .35rem; }
	.whb-top-bar .whb-col-mobile .mk-tb-tag { font-size: .68rem; }
}
@media (max-width: 359px) {
	.whb-top-bar .whb-col-mobile .mk-tb-tag { display: none; }
}

/* ---------- flowing background instead of flat navy ----------
   Stops are checked against white text: navy 13.2:1, secondary 8.0:1,
   deep teal 6.6:1 — all clear AA at this size.

   The brand accent #08B6C9 is deliberately NOT a stop here. On white text it
   measures 2.46:1, so the animation would sweep the labels through an
   unreadable patch every cycle. It stays for text-on-white use only. */
.whb-top-bar {
	background-image: linear-gradient(
		90deg,
		var(--mk-primary) 0%,
		var(--mk-secondary) 25%,
		#0B6675 50%,
		var(--mk-secondary) 75%,
		var(--mk-primary) 100%
	);
	background-size: 300% 100%;
	background-repeat: repeat-x;
	animation: mk-bar-flow 18s linear infinite;
}

@keyframes mk-bar-flow {
	0%   { background-position: 0% 50%; }
	100% { background-position: 300% 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.whb-top-bar { animation: none; }
}

/* Tappable contact links. A phone number that is not a tel: link is a
   wasted call on mobile, which is where this bar matters most. */
.whb-top-bar .mk-tb-help {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
}
.whb-top-bar .mk-tb-link {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
	transition: color .16s ease;
}
.whb-top-bar .mk-tb-link:hover,
.whb-top-bar .mk-tb-link:focus-visible {
	color: var(--mk-light-aqua);
	text-decoration: none;
}
.whb-top-bar .mk-tb-whats:hover,
.whb-top-bar .mk-tb-whats:focus-visible { color: #5BE58F; }
.whb-top-bar .mk-tb-sep { opacity: .35; }

/* Under ~420px the currency label and both numbers will not fit. The
   currency is the least useful of the three, so it goes first. */
@media (max-width: 419px) {
	.whb-top-bar .mk-tb-cur { display: none; }
	.whb-top-bar .mk-tb-help { gap: .4rem; font-size: .78rem; }
}

/* البحث يملأ عرض الوسط */
.whb-general-header .wd-search-form { flex: 1 1 auto; max-width: none; }
.whb-general-header .whb-column:nth-child(2) { flex: 1 1 auto; gap: .5rem; }
.whb-general-header .wd-header-cats { flex: 0 0 auto; }

/* أيقونات السلة/المفضلة/المقارنة */
.whb-general-header .wd-tools-element { margin-inline-start: 1.1rem; }

/* شريط التنقل: حروف كبيرة زي mapdent */
.whb-header-bottom .wd-nav-main > li > a {
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .02em;
	font-size: .88rem;
}

/* ---------- شريط الأقسام النافي (الصف الرابع) ---------- */
/* The dropdown panel is absolutely positioned against this element so it can
   span the full width, so the strip must be the containing block and the
   list items must NOT be positioned. */
.mk-cat-strip {
	position: relative;
	background: var(--mk-primary);
	border-top: 1px solid rgb(255 255 255 / 10%);
}
.mk-cat-strip-list {
	display: flex;
	flex-wrap: nowrap;
	gap: .25rem;
	margin: 0 auto;
	padding: 0 1rem;
	max-width: 87.5rem;
	list-style: none;
	/* Horizontal scrolling would clip the dropdown, so it is mobile-only —
	   see the max-width block at the bottom of this section. */
	overflow: visible;
}

.mk-cat-strip-list > li { flex: 0 0 auto; margin: 0; }

/* Direct child only: panel links must not inherit the white-on-navy styling. */
.mk-cat-strip-list > li > a {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .8rem .9rem;
	color: rgb(255 255 255 / 88%);
	font-size: .9rem;
	line-height: 1.2;
	white-space: nowrap;
	text-decoration: none;
	transition: color .16s ease, background-color .16s ease;
}
.mk-cat-strip-list > li > a:hover,
.mk-cat-strip-list > li.mk-has-sub:hover > a,
.mk-cat-strip-list > li.mk-has-sub:focus-within > a {
	background: rgb(255 255 255 / 10%);
	color: var(--mk-white);
}

/* Chevron marking the ones that open. */
.mk-cat-strip-list > li.mk-has-sub > a::after {
	content: "";
	width: .4rem;
	height: .4rem;
	margin-left: .1rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: .7;
	flex: 0 0 auto;
}

.mk-strip-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 3px;
	background: rgb(255 255 255 / 15%);
	overflow: hidden;
	flex: 0 0 auto;
}
.mk-strip-icon img { width: 100%; height: 100%; object-fit: cover; }
.mk-strip-icon:empty { display: none; }

/* ---------- sub-category dropdown ---------- */
.mk-strip-drop {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 350;
	display: none;
	padding: 1.5rem 1rem 1.75rem;
	border-top: 3px solid var(--mk-accent);
	background: var(--mk-white);
	box-shadow: 0 14px 34px rgb(17 44 107 / 18%);
	max-height: 72vh;
	overflow-y: auto;
}

.mk-cat-strip-list > li.mk-has-sub:hover > .mk-strip-drop,
.mk-cat-strip-list > li.mk-has-sub:focus-within > .mk-strip-drop { display: block; }

.mk-strip-cols {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
	gap: 1.4rem 1.75rem;
	margin: 0 auto;
	padding: 0;
	max-width: 87.5rem;
	list-style: none;
}

.mk-strip-col { margin: 0; break-inside: avoid; }

.mk-strip-col .mk-sub-head {
	display: block;
	margin-bottom: .45rem;
	padding-bottom: .35rem;
	border-bottom: 1px solid var(--mk-border);
	color: var(--mk-primary);
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}
.mk-strip-col .mk-sub-head:hover { color: var(--mk-accent); }

.mk-sub-count {
	color: var(--mk-muted);
	font-size: .75rem;
	font-weight: 500;
}

.mk-strip-gc { margin: 0; padding: 0; list-style: none; }
.mk-strip-gc li { margin: 0 0 .15rem; }
.mk-strip-gc a {
	display: block;
	padding: .18rem 0;
	color: var(--mk-dark-text);
	font-size: .85rem;
	line-height: 1.35;
	text-decoration: none;
	transition: color .14s ease, padding-left .14s ease;
}
.mk-strip-gc a:hover {
	padding-left: .3rem;
	color: var(--mk-secondary);
}

/* Below 1025px Woodmart swaps the header over to its mobile columns and the
   burger appears. The strip goes away at exactly the same point — its whole
   contents are the second tab inside the burger, so keeping it would just
   repeat the same links twice. */
@media (max-width: 1024px) {
	.mk-cat-strip { display: none; }
}


/* ==========================================================================
   صفحة All Categories
   ========================================================================== */
/* Was --mk-muted (#8A94A6) — too faint to read against white. */
.mk-lead { margin-bottom: 2rem; color: var(--mk-dark-text); font-size: 1.05rem; line-height: 1.65; }

.mk-allcat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.5rem;
}
.mk-allcat-block {
	padding: 1.4rem;
	border: 1px solid var(--mk-border);
	border-radius: 10px;
	background: var(--mk-white);
}
.mk-allcat-block h3 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin: 0 0 .85rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--mk-border);
	font-size: 1.05rem;
	line-height: 1.3;
}
.mk-allcat-block h3 a { color: var(--mk-primary); text-decoration: none; }
.mk-allcat-block h3 a:hover { color: var(--mk-secondary); }
.mk-allcat-block h3 span { color: var(--mk-muted); font-size: .8rem; font-weight: 400; }


/* ---------- Category tiles (icon + name + count) ----------
   Product photos were tried here first and read badly: a close-up of a single
   bur says nothing about "Dental Equipment". Line icons carry the meaning at
   this size, and they stay one visual weight across the row. */
.mk-tile-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.15rem;
	margin: 0 auto;
	padding: 0;
	max-width: 72rem;
	list-style: none;
}
.mk-tile { margin: 0; }
.mk-tile a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	height: 100%;
	padding: 1.75rem 1rem 1.5rem;
	border: 1px solid var(--mk-border);
	border-radius: 12px;
	background: var(--mk-white);
	color: var(--mk-primary);
	text-align: center;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mk-tile a:hover {
	border-color: var(--mk-accent);
	box-shadow: 0 8px 22px rgb(17 44 107 / 12%);
	transform: translateY(-3px);
	text-decoration: none;
	color: var(--mk-primary);
}

.mk-tile-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.75rem;
	height: 3.75rem;
	margin-bottom: .65rem;
	border-radius: 14px;
	background: var(--mk-light-bg);
	color: var(--mk-primary);
	flex: 0 0 auto;
	transition: background-color .18s ease, color .18s ease;
}
.mk-tile-icon svg { width: 1.85rem; height: 1.85rem; }
.mk-tile a:hover .mk-tile-icon {
	background: var(--mk-primary);
	color: var(--mk-white);
}

.mk-tile-name {
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.3;
}
.mk-tile-count { color: var(--mk-muted); font-size: .78rem; }

@media (max-width: 991px) {
	.mk-tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
	.mk-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.mk-tile a { padding: 1.35rem .75rem 1.15rem; }
	.mk-tile-icon { width: 3.15rem; height: 3.15rem; }
	.mk-tile-icon svg { width: 1.55rem; height: 1.55rem; }
}

/* ---------- Category blocks ---------- */
.mk-catblock-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
	margin: 0 auto 1.5rem;
	padding-bottom: .75rem;
	border-bottom: 2px solid var(--mk-border);
	max-width: 78rem;
}
.mk-catblock-head h2 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.25; }
.mk-catblock-head h2 a { color: var(--mk-primary); text-decoration: none; }
.mk-catblock-head h2 a:hover { color: var(--mk-secondary); }
.mk-link-all { color: var(--mk-secondary); font-weight: 600; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.mk-link-all:hover { color: var(--mk-primary); }

.mk-catblock-body {
	display: grid;
	grid-template-columns: 15rem 1fr;
	gap: 1.75rem;
	margin-inline: auto;
	max-width: 78rem;
}
@media (max-width: 991px) {
	.mk-catblock-body { grid-template-columns: 1fr; }
}

.mk-sublist { margin: 0; padding: 0; list-style: none; }
.mk-sublist li { border-bottom: 1px solid var(--mk-border); }
.mk-sublist li:last-child { border-bottom: 0; }
.mk-sublist a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	padding: .6rem .25rem;
	color: var(--mk-dark-text);
	font-size: .92rem;
	line-height: 1.4;
	text-decoration: none;
}
.mk-sublist a:hover { color: var(--mk-secondary); }
.mk-sublist a span { color: var(--mk-muted); font-size: .78rem; }

/* on mobile the sub-list reads better as chips */
@media (max-width: 991px) {
	.mk-sublist { display: flex; flex-wrap: wrap; gap: .5rem; }
	.mk-sublist li { border: 0; }
	.mk-sublist a {
		padding: .4rem .8rem;
		border: 1px solid var(--mk-border);
		border-radius: 999px;
		background: var(--mk-white);
		font-size: .85rem;
	}
}

.mk-catblock-products { min-width: 0; }

/* ---------- Brands strip ---------- */
.mk-brand-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .6rem;
	margin: 0 auto;
	padding: 0;
	max-width: 70rem;
	list-style: none;
}
.mk-brand-strip a {
	display: inline-block;
	padding: .55rem 1.15rem;
	border: 1px solid var(--mk-border);
	border-radius: 999px;
	background: var(--mk-white);
	color: var(--mk-primary);
	font-weight: 600;
	font-size: .88rem;
	text-decoration: none;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.mk-brand-strip a:hover { border-color: var(--mk-accent); background: var(--mk-accent); color: var(--mk-white); }

/* ---------- Brand logos on the home page ---------- */
.mk-brand-logos {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 1rem;
	margin: 0 auto;
	padding: 0;
	max-width: 76rem;
	list-style: none;
}
.mk-brand-logos li { margin: 0; }
.mk-brand-logos a {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 5.5rem;
	padding: .85rem;
	border: 1px solid var(--mk-border);
	border-radius: 10px;
	background: var(--mk-white);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.mk-brand-logos a:hover {
	border-color: var(--mk-accent);
	box-shadow: 0 6px 18px rgb(17 44 107 / 12%);
	transform: translateY(-2px);
}
.mk-brand-logos img {
	max-width: 100%;
	max-height: 3.6rem;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}
@media (max-width: 1199px) { .mk-brand-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .mk-brand-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } }
@media (max-width: 479px)  { .mk-brand-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Closing CTA ---------- */
/* Carries its own background now. It used to borrow .mk-gradient-bg, which
   left a white band above and below once the section stopped matching. */
.mk-cta {
	position: relative;
	padding: clamp(3rem, 7vw, 5rem) 1.5rem;
	background:
		radial-gradient(38rem 26rem at 88% 6%, rgb(8 182 201 / 30%) 0%, transparent 62%),
		linear-gradient(112deg, var(--mk-primary) 0%, #17457F 58%, #0B6675 100%);
	text-align: center;
	color: var(--mk-white);
}
.mk-cta-inner { max-width: 50rem; margin-inline: auto; }
.mk-cta h2 { margin: 0 0 .85rem; color: var(--mk-white); font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1.25; }
.mk-cta p { margin: 0 0 1.75rem; font-size: 1.05rem; line-height: 1.6; opacity: .93; }

/* ---------- Home page: let sections run full width ----------
   margin-block: 0 matters as much as the bleed — the theme's default paragraph
   and section margins were leaving white gaps between coloured bands. */
.home .mk-catblock,
.home .mk-brands,
.home .mk-hero,
.home .mk-trust,
.home .mk-section,
.home .mk-cta {
	margin-inline: calc(50% - 50vw);
	margin-block: 0;
	padding-inline: max(1.5rem, calc(50vw - 39rem));
	width: 100vw;
}

/* The theme puts `padding-block: 40px` on .wd-content-layout. On a page built
   from edge-to-edge coloured bands that reads as a white strip above the hero
   and, more obviously, between the closing CTA and the footer. Both ends go. */
.home .entry-content > .mk-hero:first-child { margin-top: 0; }
.home .wd-content-area,
.home article.entry-content { padding-block: 0; margin-block: 0; }
.home .wd-content-layout { padding-block: 0; }
.home .entry-content > :last-child { margin-bottom: 0; }

/* .mk-cta p is more specific than .mk-hero-actions, so the button row was
   inheriting a 1.75rem bottom margin and pushing the band open below itself. */
.mk-cta .mk-hero-actions,
.mk-hero .mk-hero-actions { margin: 0; }

/* ---------- Footer build credit ---------- */
.mk-credit { font-size: .84rem; opacity: .8; }
.mk-credit strong { font-weight: 600; }
.mk-credit a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.mk-credit a:hover { color: var(--mk-light-aqua); }

/* ---------- Footer contact list ---------- */
.mk-footer-about p { margin: 0 0 1rem; line-height: 1.65; }
.mk-footer-contact { margin: 0; padding: 0; list-style: none; }
.mk-footer-contact li { margin-bottom: .5rem; font-size: .92rem; line-height: 1.5; }

/* ================================================================
   Checkout  (block checkout — WooCommerce blocks, not the classic form)
   ================================================================ */

/* Place order: the block button ships as a generic dark pill. */
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
.wc-block-components-checkout-place-order-button,
.woocommerce #place_order,
.woocommerce-checkout #place_order {
	background: var(--mk-primary) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: var(--mk-white) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	letter-spacing: .01em;
	padding: 1rem 2.5rem !important;
	box-shadow: 0 6px 18px rgb(17 44 107 / 22%);
	transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wc-block-components-checkout-place-order-button:hover,
.woocommerce #place_order:hover,
.woocommerce-checkout #place_order:hover {
	background: var(--mk-secondary) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgb(17 44 107 / 28%);
}
.wc-block-components-checkout-place-order-button:focus-visible,
.woocommerce #place_order:focus-visible {
	outline: 3px solid var(--mk-accent);
	outline-offset: 2px;
}
.wc-block-components-checkout-place-order-button:disabled {
	background: var(--mk-muted) !important;
	box-shadow: none;
	transform: none;
}

/* Match the rest of the checkout to the palette. */
.wc-block-components-button:not(.is-link) {
	border-radius: 999px;
}
.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus,
.wc-block-components-select__select:focus {
	outline-color: var(--mk-accent);
}
.wc-block-components-checkout-step__heading .wc-block-components-checkout-step__title,
.wc-block-components-title { color: var(--mk-primary); }
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount { color: var(--mk-primary); }

/* Postcode is filtered out server-side; this hides any stray label the
   block renderer may still paint before the locale is applied. */
#billing-postcode-wrapper,
#shipping-postcode-wrapper,
.wc-block-components-address-form__postcode { display: none !important; }

/* ================================================================
   Contact page  —  [medikit_contact]
   ================================================================
   Rendered from a shortcode, not from post_content: wpautop was
   injecting a <br> at every newline and tearing the layout apart.
   ---------------------------------------------------------------- */

/* ---------- intro band ---------- */
.mk-contact-band {
	margin-bottom: 2.5rem;
	padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 3rem);
	border-radius: 16px;
	background: linear-gradient(115deg, var(--mk-primary) 0%, var(--mk-secondary) 55%, var(--mk-accent) 140%);
	color: var(--mk-white);
}
.mk-contact-band-inner { max-width: 44rem; }
.mk-contact-band h2 {
	margin: 0 0 .75rem;
	color: var(--mk-white);
	font-size: clamp(1.5rem, 3.2vw, 2.1rem);
	line-height: 1.2;
}
.mk-contact-band p {
	margin: 0 0 1.75rem;
	color: rgb(255 255 255 / 88%);
	font-size: 1.02rem;
	line-height: 1.65;
}

.mk-band-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.mk-btn {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .72rem 1.4rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: .94rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}
.mk-btn:hover, .mk-btn:focus-visible { transform: translateY(-2px); text-decoration: none; }
.mk-btn .mk-ic { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

.mk-btn-whats { background: #25D366; color: #08351B; }
.mk-btn-whats:hover, .mk-btn-whats:focus-visible { background: #1FBF5B; color: #08351B; }

.mk-btn-ghost {
	border-color: rgb(255 255 255 / 45%);
	background: transparent;
	color: var(--mk-white);
}
.mk-btn-ghost:hover, .mk-btn-ghost:focus-visible {
	border-color: var(--mk-white);
	background: rgb(255 255 255 / 12%);
	color: var(--mk-white);
}

/* ---------- two-panel layout ---------- */
.mk-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}
.mk-contact-side { display: flex; flex-direction: column; gap: 1rem; }

.mk-panel {
	padding: clamp(1.35rem, 2.5vw, 2rem);
	border: 1px solid var(--mk-border);
	border-radius: 14px;
	background: var(--mk-white);
}
.mk-panel h3 { margin: 0 0 .55rem; color: var(--mk-primary); font-size: 1.2rem; }
.mk-panel h4 { margin: 0 0 .55rem; color: var(--mk-primary); font-size: 1rem; }
.mk-panel p  { margin: 0 0 .8rem; font-size: .92rem; line-height: 1.65; }
.mk-panel p:last-child { margin-bottom: 0; }

.mk-panel-head { margin-bottom: 1.6rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--mk-border); }
.mk-panel-head p { margin: 0; color: var(--mk-muted); }

.mk-panel-quiet { background: var(--mk-light-bg); }
.mk-panel-note  { border-left: 3px solid var(--mk-accent); }

/* ---------- contact detail rows ---------- */
.mk-detail-list { margin: 0; padding: 0; list-style: none; }
.mk-detail-list li {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	margin: 0;
	padding: .9rem 0;
	border-bottom: 1px solid var(--mk-border);
}
.mk-detail-list li:first-child { padding-top: 0; }
.mk-detail-list li:last-child { padding-bottom: 0; border-bottom: 0; }

.mk-detail-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 9px;
	background: var(--mk-light-bg);
	color: var(--mk-primary);
	flex: 0 0 auto;
}
.mk-detail-ic .mk-ic { width: 1.15rem; height: 1.15rem; }
.mk-ic-whats { background: #E7F7EE; color: #17A44E; }

.mk-detail-body { display: flex; flex-direction: column; min-width: 0; }
.mk-detail-label {
	color: var(--mk-muted);
	font-size: .73rem;
	font-weight: 600;
	letter-spacing: .07em;
	line-height: 1.4;
	text-transform: uppercase;
}
.mk-detail-value {
	color: var(--mk-primary);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	word-break: break-word;
}
a.mk-detail-value:hover { color: var(--mk-accent); text-decoration: none; }
.mk-detail-plain { font-weight: 600; }
.mk-detail-sub { color: var(--mk-muted); font-size: .85rem; line-height: 1.45; }

/* ---------- the form ---------- */
.mk-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.25rem;
}
.mk-field { margin: 0 0 1.1rem; }
.mk-form-grid .mk-field { margin-bottom: 0; }

.mk-field label {
	display: block;
	margin-bottom: .4rem;
	color: var(--mk-dark-text);
	font-size: .86rem;
	font-weight: 600;
}
.mk-field label span { color: #C0392B; }

.mk-panel-form input[type="text"],
.mk-panel-form input[type="email"],
.mk-panel-form input[type="tel"],
.mk-panel-form select,
.mk-panel-form textarea {
	width: 100%;
	padding: .72rem .9rem;
	border: 1px solid var(--mk-border);
	border-radius: 9px;
	background: var(--mk-white);
	color: var(--mk-dark-text);
	font-size: .93rem;
	line-height: 1.4;
	transition: border-color .16s ease, box-shadow .16s ease;
}
.mk-panel-form input:focus,
.mk-panel-form select:focus,
.mk-panel-form textarea:focus {
	border-color: var(--mk-accent);
	box-shadow: 0 0 0 3px rgb(8 182 201 / 15%);
	outline: none;
}
.mk-panel-form textarea { resize: vertical; min-height: 8.5rem; }
.mk-panel-form .wpcf7-form-control-wrap { display: block; }

.mk-submit { margin: 1.6rem 0 0; }
.mk-panel-form input[type="submit"] {
	padding: .82rem 2.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--mk-primary);
	color: var(--mk-white);
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}
.mk-panel-form input[type="submit"]:hover {
	background: var(--mk-secondary);
	transform: translateY(-2px);
}
.mk-panel-form .wpcf7-spinner { margin-left: .6rem; }

.mk-panel-form .wpcf7-response-output {
	margin: 1.3rem 0 0;
	padding: .85rem 1.05rem;
	border-width: 1px;
	border-radius: 9px;
	font-size: .9rem;
	line-height: 1.5;
}
.mk-panel-form .wpcf7-not-valid-tip { margin-top: .3rem; color: #C0392B; font-size: .8rem; }

@media (max-width: 991px) {
	.mk-contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575px) {
	.mk-form-grid { grid-template-columns: minmax(0, 1fr); }
	.mk-band-actions .mk-btn { width: 100%; justify-content: center; }
}

/* ================================================================
   Brand logo grid  —  [medikit_brand_grid]
   ================================================================
   The logos arrive at wildly different sizes (tall, wide, tiny).
   .mk-brand-media is a fixed-height flex box and the image inside is
   object-fit: contain, so every card ends up identical regardless of
   the source file. Do not swap contain for cover — it crops logos
   and they stop being readable.
   ---------------------------------------------------------------- */

/* ================================================================
   Page title bar
   ================================================================
   Woodmart shipped a #0a0a0a bar with white text and a grid of every
   shop category underneath. The category grid is off via the
   shop_categories option; the rest is here.
   ---------------------------------------------------------------- */

.wd-page-title,
.wd-page-title.page-title {
	background-color: var(--mk-white);
	background-image: none;
}

/* Hardcoded in template-tags.php for product categories — no option exists. */
.wd-page-title .wd-back-btn { display: none; }

/* Nothing but the name, centred. */
.wd-page-title .wd-title-wrapp {
	justify-content: center;
	text-align: center;
}

.wd-page-title .entry-title,
.wd-page-title h1.title,
.wd-page-title .title {
	color: var(--mk-primary);
}

/* The colours drift across the letters. Guarded by @supports because
   text-fill-color: transparent without background-clip leaves the text
   invisible, not just uncoloured. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
	.wd-page-title .entry-title,
	.wd-page-title h1.title {
		background-image: linear-gradient(
			90deg,
			var(--mk-primary) 0%,
			var(--mk-secondary) 25%,
			var(--mk-accent) 50%,
			var(--mk-secondary) 75%,
			var(--mk-primary) 100%
		);
		background-size: 300% 100%;
		background-repeat: repeat-x;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: mk-title-flow 9s linear infinite;
	}
}

@keyframes mk-title-flow {
	0%   { background-position: 0% 50%; }
	100% { background-position: 300% 50%; }
}

/* ---------- mobile burger icon, same flowing gradient ----------
   The icon is a font glyph (content: "\f15a", family woodmart-font), not an
   SVG, so the identical background-clip: text treatment applies. It is a flex
   item inside .wd-tools-icon, which blockifies it — background-size percentages
   resolve against its own box without needing an explicit display. */
.wd-header-mobile-nav .wd-tools-icon::before,
.wd-header-mobile-nav .wd-tools-text {
	color: var(--mk-primary);
}

/* The theme pins every tools icon at 20px. The burger is the primary way into
   the whole catalogue on mobile, so it earns a larger tap target than a
   secondary icon does. 44px is the minimum comfortable touch size. */
.whb-general-header .wd-header-mobile-nav .wd-tools-icon::before { font-size: 28px; }
.whb-general-header .wd-header-mobile-nav > a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
	.wd-header-mobile-nav .wd-tools-icon::before,
	.wd-header-mobile-nav .wd-tools-text {
		background-image: linear-gradient(
			90deg,
			var(--mk-primary) 0%,
			var(--mk-secondary) 25%,
			var(--mk-accent) 50%,
			var(--mk-secondary) 75%,
			var(--mk-primary) 100%
		);
		background-size: 300% 100%;
		background-repeat: repeat-x;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		animation: mk-title-flow 9s linear infinite;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wd-page-title .entry-title,
	.wd-page-title h1.title,
	.wd-header-mobile-nav .wd-tools-icon::before,
	.wd-header-mobile-nav .wd-tools-text { animation: none; }
}

/* Breadcrumbs and any leftover title-bar text need to be readable on white. */
.wd-page-title .wd-breadcrumbs,
.wd-page-title .woocommerce-breadcrumb,
.wd-page-title .wd-breadcrumbs a,
.wd-page-title .woocommerce-breadcrumb a { color: var(--mk-muted); }
.wd-page-title .wd-breadcrumbs a:hover,
.wd-page-title .woocommerce-breadcrumb a:hover { color: var(--mk-secondary); }

/* The cart/checkout bar puts step links here instead of a heading — they were
   white text for the old black background. */
.wd-page-title .wd-checkout-steps .step-inactive,
.wd-page-title .wd-checkout-steps .step-inactive a,
.wd-page-title .wd-checkout-steps .step-inactive span { color: var(--mk-muted); }
.wd-page-title .wd-checkout-steps .step-active,
.wd-page-title .wd-checkout-steps .step-active a,
.wd-page-title .wd-checkout-steps .step-active span { color: var(--mk-primary); }

/* Centred intro above the grid. */
.mk-brands-intro {
	max-width: 54rem;
	margin: 0 auto 2.25rem;
	text-align: center;
}
.mk-brands-intro h2 { margin: 0 0 .85rem; }
.mk-brands-intro .mk-lead { margin-bottom: 0; color: var(--mk-dark-text); }

.mk-brand-grid-wrap { margin: 1.5rem 0 2.5rem; }

.mk-brand-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	align-items: stretch; /* every card fills its row's full height */
}

.mk-brand-cell { margin: 0; padding: 0; list-style: none; }

.mk-brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	padding: 1rem .75rem .85rem;
	border: 1px solid var(--mk-border);
	border-radius: 10px;
	background: var(--mk-white);
	color: var(--mk-dark-text);
	text-align: center;
	text-decoration: none;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mk-brand-card:hover,
.mk-brand-card:focus-visible {
	border-color: var(--mk-accent);
	box-shadow: 0 6px 18px rgba(17, 44, 107, .12);
	transform: translateY(-2px);
	color: var(--mk-primary);
	text-decoration: none;
}

.mk-brand-card:focus-visible { outline: 2px solid var(--mk-accent); outline-offset: 2px; }

/* The size lock. */
.mk-brand-media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 100%;
	height: 92px;
	margin-bottom: .8rem;
}

.mk-brand-media img {
	max-width: 100%;
	max-height: 92px;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply; /* hides the white box baked into most logo files */
}

/* Cards whose logo 404'd upstream keep the same box height. */
.mk-brand-fallback {
	display: block;
	padding: 0 .25rem;
	color: var(--mk-primary);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

/* Fixed height, not min-height: line-clamp caps at two lines, so every card
   reserves exactly the same space whether the name wraps or not. That is what
   makes the boxes identical rather than merely stretched to match their row. */
.mk-brand-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 0 0 auto;
	height: 2.4em;
	font-size: .88rem;
	font-weight: 600;
	line-height: 1.2;
}

.mk-brand-count {
	flex: 0 0 auto;
	height: 1.2em;
	margin-top: .25rem;
	color: var(--mk-muted);
	font-size: .75rem;
	line-height: 1.2;
}

@media (max-width: 991px) {
	.mk-brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.mk-brand-grid { gap: .85rem; }
	.mk-brand-media { height: 72px; }
	.mk-brand-media img { max-height: 72px; }
}
@media (max-width: 575px) {
	.mk-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
	.mk-brand-media { height: 64px; }
	.mk-brand-media img { max-height: 64px; }
}