/* BUILD 1.1.0 — 2026-08-06 · Micatronix Widgets for Elementor (mctx) */
/* =====================================================================
   180D BASE — the invariant layer.
   Extracted from the ten delivered plugins (Fulaz, ENGR FIX, Boscoo,
   SANA, SAT, LJS1, Super Mentality, KFSH-J, Lolita, Auto-Gate).
   Every one of them contained this layer, modulo the prefix.

   HOW TO USE: replace every mctx with the project prefix (kfshj, sat,
   boscoo…). Never edit this file's rules to fix a component — add a
   component rule instead. This layer is the contract that survives the
   HTML → Elementor conversion untouched.
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. TOKENS — fill in per project. See references/tokens.md.
   Keep the NAMES exactly; only the VALUES change per project.
   --------------------------------------------------------------------- */
:root {
	--mctx-bg:          #F1F3F8;
	--mctx-bg-deep:     #E6E9F3;
	--mctx-fg:          #0B1024;
	--mctx-card:        #FFFFFF;
	--mctx-card-fg:     #0B1024;
	--mctx-muted:       #EDEFF6;
	--mctx-muted-fg:    #5B6280;
	--mctx-border:      #DDE1EE;

	--mctx-primary:     #011EA6;
	--mctx-primary-fg:  #FFFFFF;
	--mctx-primary-glow:#2B3FD6;
	--mctx-accent:      #F95755;
	--mctx-accent-fg:   #FFFFFF;
	--mctx-accent-ink:  #D8302F;
	--mctx-ink-deep:    #060B1C;
	--mctx-ok:          #0F7A4A;

	--mctx-tint-1:      #FFF0EF;
	--mctx-tint-1-head: #F95755;
	--mctx-tint-2:      #EDF0FF;
	--mctx-tint-2-head: #011EA6;
	--mctx-tint-3:      #EAF6F0;
	--mctx-tint-3-head: #0F7A4A;
	--mctx-tint-4:      #FFF7E8;
	--mctx-tint-4-head: #B77400;

	--mctx-font:         "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;
	--mctx-font-display: "Cairo", system-ui, "Segoe UI", Tahoma, sans-serif;

	--mctx-radius:      0.375rem;
	--mctx-radius-lg:   0.625rem;
	--mctx-max:         84rem;
	--mctx-max-narrow:  64rem;
	--mctx-pad:         0.75rem;
	--mctx-pad-lg:      1rem;

	--mctx-shadow-sm:   0 1px 2px rgba(6,11,28,.06);
	--mctx-shadow-md:   0 2px 10px -3px rgba(6,11,28,.14);
	--mctx-shadow-card: 0 6px 20px -10px rgba(6,11,28,.28);
	--mctx-shadow-glow: 0 6px 22px -8px rgba(1,30,166,.35);

	--mctx-gradient-primary: linear-gradient(135deg, #011EA6, #2B3FD6);
	--mctx-gradient-accent:  linear-gradient(135deg, #F95755, #FF8A73);
	--mctx-gradient-brand:   linear-gradient(115deg, #F95755 0%, #A35881 52%, #011EA6 100%);

	--mctx-slashes: repeating-linear-gradient(115deg, currentColor 0 3px, transparent 3px 9px);

	--mctx-transition:  all .25s cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------------
   1. HORIZONTAL-SCROLL DEFENSE — mandatory, nine layers.
   This block shipped in 10/10 projects. Do not trim it.
   --------------------------------------------------------------------- */
[class^="mctx-"], [class*=" mctx-"],
[class^="mctx-"] *, [class*=" mctx-"] *,
[class^="mctx-"] *::before, [class*=" mctx-"] *::before,
[class^="mctx-"] *::after,  [class*=" mctx-"] *::after { box-sizing: border-box; }

/* 1b — section-level clip. Add every top-level wrapper class here. */
.mctx-section, .mctx-hero, .mctx-page-hero, .mctx-header, .mctx-footer,
.mctx-cta-banner, .mctx-contact, .mctx-marquee {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

/* 1c — grid/flex children must be allowed to shrink below intrinsic width */
[class^="mctx-"][class*="-grid"] > *,
[class^="mctx-"][class*="-row"]  > *,
.mctx-form-row > *, .mctx-form-field { min-width: 0; max-width: 100%; }

/* 1d — media */
[class^="mctx-"] img,    [class*=" mctx-"] img,
[class^="mctx-"] svg,    [class*=" mctx-"] svg,
[class^="mctx-"] video,  [class*=" mctx-"] video,
[class^="mctx-"] iframe, [class*=" mctx-"] iframe { max-width: 100%; }
[class^="mctx-"] img, [class^="mctx-"] iframe { height: auto; }

/* 1e — form controls */
[class^="mctx-"] input, [class^="mctx-"] textarea,
[class^="mctx-"] select, [class^="mctx-"] button { max-width: 100%; }
[class^="mctx-"] input[type="text"],  [class^="mctx-"] input[type="email"],
[class^="mctx-"] input[type="tel"],   [class^="mctx-"] input[type="number"],
[class^="mctx-"] textarea, [class^="mctx-"] select { width: 100%; }

/* 1f — long unbroken strings (emails, phones, URLs) */
[class^="mctx-"] p, [class^="mctx-"] a, [class^="mctx-"] span,
[class^="mctx-"] li, [class^="mctx-"] dd { overflow-wrap: anywhere; word-break: break-word; }

/* 1g — honeypot (spam trap, never visible, never pushes layout) */
.mctx-honeypot {
	position: absolute !important; left: -10000px !important;
	width: 1px !important; height: 1px !important; overflow: hidden !important;
}

/* ---------------------------------------------------------------------
   2. TYPOGRAPHY BASELINE
   Arabic needs a taller line-height than Latin — this is not optional.
   --------------------------------------------------------------------- */
[class^="mctx-"], [class*=" mctx-"] { font-family: var(--mctx-font); }

[class^="mctx-"] h1, [class^="mctx-"] h2,
[class^="mctx-"] h3, [class^="mctx-"] h4,
[class^="mctx-"][class*="-title"],
[class^="mctx-"][class*="-headline"] {
	font-family: var(--mctx-font-display);
	line-height: 1.25;
	margin: 0;
}

[class^="mctx-"] p, [class^="mctx-"] li,
[class^="mctx-"][class*="-desc"] { line-height: 1.75; }

body.rtl      [class^="mctx-"] p, body.rtl      [class^="mctx-"] li,
html[lang^="ar"] [class^="mctx-"] p, html[lang^="ar"] [class^="mctx-"] li,
body.rtl      [class^="mctx-"][class*="-desc"],
html[lang^="ar"] [class^="mctx-"][class*="-desc"] { line-height: 1.9; }

/* Latin runs inside RTL (phone numbers, emails, prices) */
.mctx-ltr, [dir="ltr"] { direction: ltr; unicode-bidi: embed; }

/* ---------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.mctx-container {
	width: 100%;
	max-width: var(--mctx-max);
	margin-inline: auto;
	padding-inline: var(--mctx-pad);
}
.mctx-container-narrow { max-width: var(--mctx-max-narrow); }
@media (min-width: 768px) { .mctx-container { padding-inline: var(--mctx-pad-lg); } }

.mctx-section { position: relative; padding-block: 1.25rem; background: var(--mctx-bg); }
@media (min-width: 768px) { .mctx-section { padding-block: 1.75rem; } }

/* Responsive grid helper — mobile 1col, tablet 2, desktop N.
   Use .mctx-cols-2/3/4 on the same element. */
.mctx-grid { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
	.mctx-cols-2, .mctx-cols-3, .mctx-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	.mctx-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mctx-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   4. SECTION-HEAD RHYTHM
   Doubled class = specificity 0,2,0, which beats Elementor's
   `h1..h6 { margin: 0 }` reset. This was the #1 round-two complaint
   before it was single-sourced. Never set head spacing per component.
   --------------------------------------------------------------------- */
.mctx-section-head.mctx-section-head { margin-bottom: 1.25rem; }
.mctx-section-head.mctx-section-head .mctx-eyebrow {
	display: block;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mctx-accent);
}
.mctx-section-head.mctx-section-head .mctx-section-title { margin: 0 0 1rem; }
.mctx-section-head.mctx-section-head .mctx-head-rule {
	display: block; width: 6rem; height: 0.25rem;
	margin: 0 auto 1.25rem; border-radius: 999px;
	background: var(--mctx-gradient-accent);
}
.mctx-section-head.mctx-section-head .mctx-section-desc {
	margin: 0 auto; max-width: 40rem; color: var(--mctx-muted-fg);
}
.mctx-align-center { text-align: center; }
.mctx-align-center h1, .mctx-align-center h2, .mctx-align-center h3,
.mctx-align-center p,  .mctx-align-center span { text-align: center; }
.mctx-align-start .mctx-head-rule { margin-inline: 0; }

/* ---------------------------------------------------------------------
   5. ICON CONTAINER — SIZE AND LAYOUT ONLY.
   Colour is declared PER COMPONENT against its own chip background.
   This selector is 0,2,0 and silently beat per-component colours in
   three builds, shipping invisible icons. Never add `color` here.
   --------------------------------------------------------------------- */
[class^="mctx-"][class*="-icon"],
[class*=" mctx-"][class*="-icon"] {
	display: inline-flex; align-items: center; justify-content: center;
	flex-shrink: 0; line-height: 1;
}
[class^="mctx-"][class*="-icon"] svg,
[class*=" mctx-"][class*="-icon"] svg {
	width: 1.5rem; height: 1.5rem; display: block;
	color: inherit; fill: none; stroke: currentColor;
}
[class^="mctx-"][class*="-icon"] i,
[class*=" mctx-"][class*="-icon"] i { font-size: 1.1rem; color: inherit; line-height: 1; }

/* Icon chip — the recurring "coloured square behind an icon" pattern.
   Set the colour on the chip; the icon inherits it. */
.mctx-icon-chip {
	width: 3.5rem; height: 3.5rem;
	border-radius: var(--mctx-radius);
	background: var(--mctx-gradient-accent);
	color: var(--mctx-primary-fg);              /* ← per-component override */
	box-shadow: var(--mctx-shadow-md);
	transition: var(--mctx-transition);
}

/* ---------------------------------------------------------------------
   6. BUTTON SYSTEM — three-layer defense against theme resets.
   Layer 1 (here): shape. Layer 2: element+class selectors with
   !important on colour. Layer 3: descendant colour lock.
   --------------------------------------------------------------------- */
.mctx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
	font-family: var(--mctx-font); font-weight: 700; font-size: 1rem; line-height: 1.2;
	padding: 0.7rem 1.5rem;
	border-radius: var(--mctx-radius);
	border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
	transition: var(--mctx-transition);
}
a.mctx-btn.mctx-btn-primary, a.mctx-btn.mctx-btn-primary:link,
a.mctx-btn.mctx-btn-primary:visited, button.mctx-btn.mctx-btn-primary,
.mctx-btn.mctx-btn-primary[class] {
	background: var(--mctx-gradient-primary) !important;
	color: var(--mctx-primary-fg) !important;
	text-decoration: none !important;
	box-shadow: var(--mctx-shadow-md);
}
a.mctx-btn.mctx-btn-primary:hover, button.mctx-btn.mctx-btn-primary:hover,
.mctx-btn.mctx-btn-primary[class]:hover {
	color: var(--mctx-primary-fg) !important;
	transform: translateY(-2px);
	box-shadow: var(--mctx-shadow-glow);
}
.mctx-btn.mctx-btn-primary * { color: var(--mctx-primary-fg) !important; }

a.mctx-btn.mctx-btn-outline, button.mctx-btn.mctx-btn-outline,
.mctx-btn.mctx-btn-outline[class] {
	background: transparent !important;
	color: var(--mctx-fg) !important;
	border: 1px solid var(--mctx-border) !important;
}
a.mctx-btn.mctx-btn-outline:hover, .mctx-btn.mctx-btn-outline[class]:hover {
	border-color: var(--mctx-accent) !important;
	color: var(--mctx-accent) !important;
}
.mctx-btn-block { width: 100%; }

/* ---------------------------------------------------------------------
   7. CARD
   --------------------------------------------------------------------- */
.mctx-card {
	position: relative;
	display: flex; flex-direction: column; gap: 1rem;
	padding: 1.75rem;
	border-radius: var(--mctx-radius-lg);
	border: 1px solid var(--mctx-border);
	background: var(--mctx-card);
	color: var(--mctx-card-fg);
	box-shadow: var(--mctx-shadow-card);
	transition: var(--mctx-transition);
	height: 100%;
}
.mctx-card:hover { transform: translateY(-6px); box-shadow: var(--mctx-shadow-glow); }
.mctx-card-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.mctx-card-desc  { color: var(--mctx-muted-fg); margin: 0; }

/* ---------------------------------------------------------------------
   8. FORM
   --------------------------------------------------------------------- */
.mctx-form-row { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mctx-form-row { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.mctx-form-field { margin-bottom: 1.25rem; }
.mctx-form-field label {
	display: block; margin-bottom: 0.5rem;
	font-size: 0.75rem; font-weight: 600;
	letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--mctx-muted-fg);
}
.mctx-form-field input, .mctx-form-field textarea, .mctx-form-field select {
	width: 100%; max-width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--mctx-border);
	border-radius: var(--mctx-radius);
	background: var(--mctx-card);
	color: var(--mctx-fg);
	font: inherit; font-size: 0.9375rem;
	transition: border-color .3s;
}
.mctx-form-field textarea { min-height: 8rem; resize: vertical; }
.mctx-form-field :is(input, textarea, select):focus {
	outline: 0; border-color: var(--mctx-accent);
}
/* Native <select> popup is painted by the OS. On dark themes the option
   text renders white-on-white without these two lines. */
.mctx-form-field select {
	-webkit-appearance: none; appearance: none;
	/* dark themes only: color-scheme: dark; background-color: <solid dark>; */
}
.mctx-form-notice { display: none; margin-top: 1rem; padding: 0.9rem 1.1rem; border-radius: var(--mctx-radius); font-size: 0.9rem; }
.mctx-form-notice.is-ok   { display: block; background: rgba(22,163,74,.12); color: #16A34A; }
.mctx-form-notice.is-err  { display: block; background: rgba(220,38,38,.12); color: #DC2626; }

/* 8b — FORM-SECTION CONTAINMENT (v7.1 layer 9).
   The contact section is where horizontal scroll came back three times. */
.mctx-contact, .mctx-contact * { min-width: 0; }
.mctx-contact { overflow-x: clip; }

/* ---------------------------------------------------------------------
   9. MOTION — see references/motion.md for the full keyframe set.
   --------------------------------------------------------------------- */
@keyframes mctx-fade-up   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mctx-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes mctx-slide-l   { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes mctx-slide-r   { from { opacity: 0; transform: translateX(60px); }  to { opacity: 1; transform: none; } }
@keyframes mctx-float     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes mctx-marquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.mctx-anim-fade  { animation: mctx-fade-up .7s cubic-bezier(.2,.8,.2,1) both; }
.mctx-anim-left  { animation: mctx-slide-l .75s cubic-bezier(.2,.8,.2,1) both; }
.mctx-anim-right { animation: mctx-slide-r .75s cubic-bezier(.2,.8,.2,1) both; }
.mctx-anim-float { animation: mctx-float 4s ease-in-out infinite; }

/* Scroll reveal — JS adds .is-visible. NEVER apply .mctx-reveal to
   dynamic content (filtered grids, AJAX lists, WooCommerce archives):
   re-rendered nodes never receive .is-visible and stay invisible. */
.mctx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.mctx-reveal.is-visible { opacity: 1; transform: none; }

/* Editor preview + reduced motion — force final state so the canvas is
   never blank while an animation delay is pending. */
.elementor-editor-active [class*="mctx-anim-"],
.elementor-editor-active .mctx-reveal,
body.elementor-editor-preview [class*="mctx-anim-"],
body.elementor-editor-preview .mctx-reveal {
	opacity: 1 !important; transform: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	[class*="mctx-anim-"], .mctx-reveal {
		opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important;
	}
}

/* ---------------------------------------------------------------------
   10. MOBILE PERFORMANCE BUDGET
   Blur/backdrop-filter and large shadows repaint every scroll frame.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	[class^="mctx-"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
	.mctx-anim-float { animation: none !important; }
	.mctx-card { box-shadow: 0 4px 12px -6px rgba(0,0,0,.35) !important; }
}

/* ---------------------------------------------------------------------
   11. WORDPRESS/ELEMENTOR NEUTRALISATION
   Keep this block even in the HTML build — it is dead weight in the
   browser and load-bearing after conversion.
   --------------------------------------------------------------------- */
.elementor-widget-container > [class^="mctx-"] { width: 100%; }
[class^="mctx-"] a { text-decoration: none; }
[class^="mctx-"] ul, [class^="mctx-"] ol { list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------------
   12. IMAGE SLOTS
   Class B (factual: projects, gallery, real products) ships as a visible
   placeholder that reserves the final dimensions, so nothing reflows when
   the client uploads the real image in WordPress.
   See references/imagery.md.
   --------------------------------------------------------------------- */
.mctx-media { position: relative; overflow: hidden; border-radius: var(--mctx-radius-lg); }
.mctx-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.mctx-media:hover img { transform: scale(1.05); }

.mctx-placeholder {
	display: grid; place-items: center; min-height: 12rem;
	border: 1px dashed var(--mctx-border);
	border-radius: var(--mctx-radius-lg);
	background:
		repeating-linear-gradient(45deg, var(--mctx-muted) 0 12px, transparent 12px 24px),
		var(--mctx-bg-deep);
}
.mctx-placeholder-label {
	font-size: .8rem; letter-spacing: .15em; color: var(--mctx-muted-fg);
}

/* =====================================================================
   MICATRONIX v2 — COMPONENT LAYER
   Structure mirrors the CrazySales flow; colour comes from the logo.
   ===================================================================== */

/* --- 13. RTL scoping + shared shell ---------------------------------- */
.mctx-util, .mctx-header, .mctx-nav, .mctx-section, .mctx-footer,
.mctx-mobile-menu, .mctx-page, .mctx-crumb {
	direction: rtl; text-align: right;
	max-width: 100%; overflow-x: hidden; overflow-x: clip;
}
.mctx-ltr { direction: ltr; unicode-bidi: embed; display: inline-block; }
body { margin: 0; background: var(--mctx-bg); }
.mctx-box { background: var(--mctx-card); border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); }
.mctx-slash { display: block; width: 2.75rem; height: .8rem; color: var(--mctx-accent); background: var(--mctx-slashes); flex-shrink: 0; }

/* --- 14. UTILITY BAR -------------------------------------------------- */
.mctx-util { background: var(--mctx-card); border-bottom: 1px solid var(--mctx-border); font-size: .75rem; }
.mctx-util-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.1rem; flex-wrap: wrap; }
.mctx-util a { color: var(--mctx-muted-fg); }
.mctx-util a:hover { color: var(--mctx-primary); }
.mctx-util-links { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.mctx-util-links li { display: inline-flex; align-items: center; gap: .3rem; }
.mctx-util-sep { color: var(--mctx-border); }
.mctx-util-socials { display: flex; gap: .4rem; }
.mctx-util-socials a { width: 1.35rem; height: 1.35rem; display: grid; place-items: center; border-radius: 999px; background: var(--mctx-muted); color: var(--mctx-primary); }
.mctx-util-socials a:hover { background: var(--mctx-primary); color: #fff; }
.mctx-usocial-icon svg { width: .8rem; height: .8rem; }
@media (max-width: 767px) { .mctx-util-links { display: none; } .mctx-util-inner { justify-content: center; } }

/* --- 15. HEADER (logo · search · actions) ---------------------------- */
.mctx-header { background: var(--mctx-card); }
.mctx-header-inner { display: flex; align-items: center; gap: .75rem; padding-block: .7rem; }
.mctx-logo img { height: 2.4rem; width: auto; display: block; }
@media (min-width: 1024px) { .mctx-logo img { height: 3rem; } }
.mctx-search { flex: 1 1 auto; min-width: 0; display: none; }
@media (min-width: 1024px) { .mctx-search { display: block; } }
.mctx-search-form { display: flex; align-items: stretch; }
.mctx-search-field { flex: 1 1 auto; display: flex; min-width: 0; border: 2px solid var(--mctx-accent); border-radius: var(--mctx-radius); overflow: hidden; background: #fff; }
.mctx-search-input { flex: 1 1 auto; min-width: 0; border: 0; padding: .55rem .85rem; font: inherit; font-size: .875rem; background: transparent; color: var(--mctx-fg); }
.mctx-search-input:focus { outline: 0; }
.mctx-search-go { border: 0; width: 2.4rem; background: var(--mctx-accent); color: #fff; cursor: pointer; display: grid; place-items: center; }
.mctx-search-ai { margin-inline-start: .5rem; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .9rem; border: 0; border-radius: var(--mctx-radius); background: var(--mctx-gradient-primary); color: #fff; font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; white-space: nowrap; }
.mctx-search-ai:hover { filter: brightness(1.1); }
.mctx-sugg { position: absolute; inset-inline: 0; top: calc(100% + .4rem); z-index: 70; background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); box-shadow: var(--mctx-shadow-card); display: none; }
.mctx-search-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.mctx-sugg.is-open { display: grid; grid-template-columns: 16rem minmax(0,1fr); }
.mctx-sugg-col { padding: 1rem; }
.mctx-sugg-col + .mctx-sugg-col { border-inline-start: 1px solid var(--mctx-border); }
.mctx-sugg-h { font-size: .875rem; font-weight: 700; margin: 0 0 .75rem; color: var(--mctx-fg); }
.mctx-sugg-list li { margin-bottom: .5rem; }
.mctx-sugg-list a { display: inline-flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--mctx-fg); }
.mctx-sugg-list a:hover { color: var(--mctx-accent-ink); }
.mctx-sugg-icon { color: var(--mctx-primary); }
.mctx-sugg-recent { display: flex; gap: .75rem; }
.mctx-sugg-thumb { width: 5rem; height: 5rem; flex-shrink: 0; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); display: grid; place-items: center; background: var(--mctx-bg-deep); color: #A9B1CE; }

.mctx-header-actions { display: flex; align-items: center; gap: .25rem; margin-inline-start: auto; }
.mctx-hact { position: relative; display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .5rem; border-radius: var(--mctx-radius); color: var(--mctx-fg); }
.mctx-hact:hover { background: var(--mctx-muted); }
.mctx-hact-icon { color: var(--mctx-primary); }
.mctx-hact-text { display: none; font-size: .75rem; line-height: 1.3; }
@media (min-width: 768px) { .mctx-hact-text { display: block; } }
.mctx-hact-main { display: block; font-weight: 700; }
.mctx-hact-badge { position: absolute; top: 0; inset-inline-end: 0; min-width: 1.05rem; height: 1.05rem; padding-inline: .25rem; border-radius: 999px; background: var(--mctx-accent); color: #fff; font-size: .625rem; font-weight: 700; display: grid; place-items: center; }
.mctx-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 2.4rem; height: 2.4rem; padding: 0 .5rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); background: #fff; cursor: pointer; }
.mctx-burger span { display: block; height: 2px; background: var(--mctx-fg); transition: var(--mctx-transition); }
.mctx-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mctx-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mctx-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1024px) { .mctx-burger { display: none; } }

/* --- 16. NAV BAR (the brand-blue band) ------------------------------- */
.mctx-nav { background: var(--mctx-primary); position: relative; z-index: 50; }
.mctx-nav-inner { display: flex; align-items: stretch; gap: .25rem; }
.mctx-allcats { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem; border: 0; background: rgba(255,255,255,.13); color: #fff; font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer; min-width: 14rem; }
.mctx-allcats:hover { background: rgba(255,255,255,.2); }
.mctx-allcats .mctx-chev-icon { margin-inline-start: auto; transition: transform .25s; }
.mctx-allcats[aria-expanded="true"] .mctx-chev-icon { transform: rotate(180deg); }
.mctx-navlinks { display: none; align-items: center; gap: .1rem; flex: 1 1 auto; justify-content: center; }
@media (min-width: 1024px) { .mctx-navlinks { display: flex; } }
.mctx-navlink { position: relative; padding: .7rem 1.1rem; font-size: .875rem; font-weight: 700; color: rgba(255,255,255,.9); }
.mctx-navlink:hover, .mctx-navlink.is-active { color: #fff; background: rgba(255,255,255,.12); }
.mctx-navlink::after { content: ""; position: absolute; inset-inline: 1.1rem; bottom: .3rem; height: .45rem; color: var(--mctx-accent); background: var(--mctx-slashes); opacity: 0; }
.mctx-navlink:hover::after, .mctx-navlink.is-active::after { opacity: 1; }

/* dropdown panel of all categories (mobile + non-home pages) */
.mctx-allcats-panel { position: absolute; inset-inline-start: 0; top: 100%; width: min(22rem, 92vw); background: #fff; border: 1px solid var(--mctx-border); box-shadow: var(--mctx-shadow-card); display: none; max-height: 70vh; overflow-y: auto; }
.mctx-allcats-panel.is-open { display: block; }

/* --- 17. HOME MASTHEAD: sidebar + slider + sale-of-day --------------- */
.mctx-home { padding-block: .75rem; }
.mctx-home-grid { display: grid; gap: .6rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 1024px) { .mctx-home-grid { grid-template-columns: 14rem minmax(0,1fr) 13rem; } }

.mctx-sidecats { display: none; background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); padding: .35rem 0; }
@media (min-width: 1024px) { .mctx-sidecats { display: block; } }
.mctx-sidecat { display: flex; align-items: center; gap: .55rem; padding: .38rem .75rem; font-size: .8125rem; color: var(--mctx-fg); }
.mctx-sidecat:hover { background: var(--mctx-muted); color: var(--mctx-primary); }
.mctx-sidecat-icon { color: var(--mctx-primary); flex-shrink: 0; }
.mctx-sidecat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mctx-slider { position: relative; border-radius: var(--mctx-radius); overflow: hidden; min-height: 15rem; background: var(--mctx-bg-deep); }
@media (min-width: 768px) { .mctx-slider { min-height: 20rem; } }
.mctx-slide { position: absolute; inset: 0; display: flex; align-items: center; padding: 1.5rem; opacity: 0; transition: opacity .7s ease; }
@media (min-width: 768px) { .mctx-slide { padding: 2.5rem; } }
.mctx-slide.is-active { opacity: 1; }
.mctx-slide:first-child { position: relative; }
.mctx-slide-1 { background: var(--mctx-gradient-brand); }
.mctx-slide-2 { background: var(--mctx-gradient-primary); }
.mctx-slide-3 { background: linear-gradient(115deg, #060B1C 0%, #011EA6 80%, #F95755 175%); }
.mctx-slide::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 18px 18px; }
.mctx-slide-body { position: relative; max-width: 28rem; color: #fff; }
.mctx-slide-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .6875rem; font-weight: 700; letter-spacing: .14em; margin-bottom: .6rem; }
.mctx-slide-eyebrow .mctx-slash { width: 1.75rem; height: .6rem; color: rgba(255,255,255,.9); }
.mctx-slide-title { font-size: 1.5rem; font-weight: 700; color: #fff; margin: 0 0 .5rem; }
@media (min-width: 768px) { .mctx-slide-title { font-size: 2.25rem; } }
.mctx-slide-sub { color: rgba(255,255,255,.85); font-size: .875rem; margin: 0 0 1rem; }
.mctx-slide-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.4rem; border-radius: var(--mctx-radius); background: #fff; color: var(--mctx-primary) !important; font-weight: 700; font-size: .875rem; }
.mctx-slide-btn:hover { background: var(--mctx-accent); color: #fff !important; }
.mctx-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 2.1rem; height: 2.1rem; border: 0; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--mctx-fg); cursor: pointer; display: grid; place-items: center; z-index: 4; }
.mctx-arrow-prev { inset-inline-start: .6rem; }
.mctx-arrow-next { inset-inline-end: .6rem; }
.mctx-arrow:hover { background: #fff; }
.mctx-dots { position: absolute; inset-inline: 0; bottom: .7rem; display: flex; gap: .35rem; justify-content: center; z-index: 4; }
.mctx-dot { width: .5rem; height: .5rem; border: 0; padding: 0; border-radius: 999px; background: rgba(255,255,255,.5); cursor: pointer; }
.mctx-dot.is-active { background: #fff; width: 1.5rem; }

.mctx-saleday { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); overflow: hidden; }
.mctx-saleday-head { background: var(--mctx-gradient-accent); color: #fff; padding: .5rem .65rem; text-align: center; font-family: var(--mctx-font-display); font-weight: 700; font-size: .875rem; }
.mctx-saleday-timer { display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .5rem; background: var(--mctx-ink-deep); color: #fff; font-family: var(--mctx-font-display); font-size: .9375rem; }
.mctx-saleday-timer .mctx-clock-icon { color: var(--mctx-accent); }
.mctx-saleday-body { padding: .65rem; display: flex; flex-direction: column; gap: .4rem; text-align: center; }
.mctx-saleday-thumb { aspect-ratio: 1/1; border-radius: var(--mctx-radius); background: var(--mctx-bg-deep); display: grid; place-items: center; color: #A9B1CE; }
.mctx-saleday-name { font-size: .75rem; color: var(--mctx-fg); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mctx-saleday-was { font-size: .6875rem; color: var(--mctx-muted-fg); text-decoration: line-through; }
.mctx-saleday-now { font-family: var(--mctx-font-display); font-size: 1.25rem; font-weight: 700; color: var(--mctx-accent-ink); }
.mctx-saleday-cta { display: block; padding: .45rem; background: var(--mctx-accent); color: #fff !important; font-size: .75rem; font-weight: 700; text-align: center; }
.mctx-saleday-cta:hover { background: var(--mctx-accent-ink); }

/* --- 18. USP STRIP --------------------------------------------------- */
.mctx-usp { background: #fff; border-block: 1px solid var(--mctx-border); }
.mctx-usp-grid { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); padding-block: .85rem; }
@media (min-width: 640px) { .mctx-usp-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .mctx-usp-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.mctx-usp-item { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: .25rem; }
.mctx-usp-icon { color: var(--mctx-accent); }
.mctx-usp-name { font-size: .75rem; font-weight: 600; color: var(--mctx-fg); line-height: 1.5; }

/* --- 19. PICK TILES ROW ---------------------------------------------- */
.mctx-picks-row { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px) { .mctx-picks-row { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1024px) { .mctx-picks-row { grid-template-columns: repeat(7, minmax(0,1fr)); } }
.mctx-pick { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: .15rem; min-height: 6.5rem; padding: .65rem; border-radius: var(--mctx-radius); border: 1px solid var(--mctx-border); background: var(--mctx-card); transition: var(--mctx-transition); }
.mctx-pick:hover { border-color: var(--mctx-primary); transform: translateY(-2px); box-shadow: var(--mctx-shadow-md); }
.mctx-pick::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 3rem; height: 2rem; color: var(--mctx-accent); background: var(--mctx-slashes); opacity: .45; }
.mctx-pick-tag { font-size: .625rem; font-weight: 700; color: var(--mctx-accent-ink); }
.mctx-pick-title { font-size: .8125rem; font-weight: 700; color: var(--mctx-fg); margin: 0; line-height: 1.45; }
.mctx-pick-meta { font-size: .6875rem; color: var(--mctx-muted-fg); }
.mctx-pick-lead { background: var(--mctx-gradient-brand); border-color: transparent; }
.mctx-pick-lead .mctx-pick-tag { color: #fff; }
.mctx-pick-lead .mctx-pick-title { color: #fff; }
.mctx-pick-lead .mctx-pick-meta { color: rgba(255,255,255,.8); }
.mctx-pick-lead::after { color: #fff; opacity: .25; }

/* --- 20. QUAD BOXES (Top sellers / Clearance / New / Free shipping) --- */
.mctx-quad { display: grid; gap: .6rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 1024px) { .mctx-quad { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.mctx-qbox { border-radius: var(--mctx-radius); border: 1px solid var(--mctx-border); overflow: hidden; background: var(--mctx-tint-1); }
.mctx-qbox-2 { background: var(--mctx-tint-2); }
.mctx-qbox-3 { background: var(--mctx-tint-3); }
.mctx-qbox-4 { background: var(--mctx-tint-4); }
.mctx-qbox-head { display: inline-flex; align-items: center; gap: .5rem; margin: .6rem .6rem 0; padding: .4rem 1.1rem; border-radius: var(--mctx-radius); background: var(--mctx-tint-1-head); color: #fff; font-family: var(--mctx-font-display); font-weight: 700; font-size: .9375rem; }
.mctx-qbox-2 .mctx-qbox-head { background: var(--mctx-tint-2-head); }
.mctx-qbox-3 .mctx-qbox-head { background: var(--mctx-tint-3-head); }
.mctx-qbox-4 .mctx-qbox-head { background: var(--mctx-tint-4-head); }
.mctx-qbox-body { display: grid; gap: .5rem; padding: .6rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px) { .mctx-qbox-body { grid-template-columns: 1.1fr 1fr; } }
.mctx-qhero { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: .7rem; border-radius: var(--mctx-radius); background: #fff; border: 1px solid var(--mctx-border); }
.mctx-qhero-media { aspect-ratio: 1/1; display: grid; place-items: center; background: var(--mctx-bg-deep); border-radius: var(--mctx-radius); color: #A9B1CE; }
.mctx-qhero-name { font-size: .8125rem; color: var(--mctx-fg); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mctx-qmini { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
.mctx-qmini-card { display: flex; flex-direction: column; gap: .3rem; padding: .5rem; border-radius: var(--mctx-radius); background: #fff; border: 1px solid var(--mctx-border); }
.mctx-qmini-media { aspect-ratio: 1/1; display: grid; place-items: center; background: var(--mctx-bg-deep); border-radius: var(--mctx-radius); color: #A9B1CE; }
.mctx-qmini-name { font-size: .6875rem; color: var(--mctx-fg); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mctx-qmini-price { font-family: var(--mctx-font-display); font-size: .875rem; font-weight: 700; color: var(--mctx-accent-ink); }

/* the round discount stamp — reference has it, we keep it with the slash motif */
.mctx-stamp { position: absolute; top: -.5rem; inset-inline-start: -.5rem; width: 3.1rem; height: 3.1rem; border-radius: 999px; background: var(--mctx-accent); color: #fff; display: grid; place-items: center; align-content: center; font-family: var(--mctx-font-display); font-weight: 700; line-height: 1; z-index: 3; box-shadow: var(--mctx-shadow-md); }
.mctx-stamp b { font-size: 1.15rem; }
.mctx-stamp span { font-size: .5625rem; }

/* --- 21. SUBSCRIBE BAND ---------------------------------------------- */
.mctx-subscribe { background: var(--mctx-gradient-brand); border-radius: var(--mctx-radius); padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: relative; overflow: hidden; }
.mctx-subscribe::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 10rem; height: 5rem; color: #fff; background: var(--mctx-slashes); opacity: .18; }
.mctx-subscribe-txt { position: relative; }
.mctx-subscribe-title { font-family: var(--mctx-font-display); font-size: 1.25rem; font-weight: 700; color: #fff; margin: 0; }
.mctx-subscribe-sub { font-size: .8125rem; color: rgba(255,255,255,.85); margin: 0; }
.mctx-subscribe-form { position: relative; display: flex; gap: .4rem; flex-wrap: wrap; }
.mctx-subscribe-form input { min-width: 0; flex: 1 1 14rem; padding: .6rem .9rem; border: 0; border-radius: var(--mctx-radius); font: inherit; font-size: .875rem; }
.mctx-subscribe-form button { border: 0; padding: .6rem 1.5rem; border-radius: var(--mctx-radius); background: var(--mctx-ink-deep); color: #fff; font: inherit; font-weight: 700; font-size: .875rem; cursor: pointer; }
.mctx-subscribe-form button:hover { background: #fff; color: var(--mctx-primary); }

/* --- 22. PRODUCT CARD + GRIDS ---------------------------------------- */
.mctx-blockhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem; }
.mctx-blockhead-t { display: flex; align-items: center; gap: .6rem; }
.mctx-blocktitle { font-family: var(--mctx-font-display); font-size: 1.25rem; font-weight: 700; color: var(--mctx-fg); margin: 0; }
@media (min-width: 768px) { .mctx-blocktitle { font-size: 1.5rem; } }
.mctx-blockmore { font-size: .8125rem; font-weight: 700; color: var(--mctx-primary); }
.mctx-blockmore:hover { color: var(--mctx-accent-ink); }

.mctx-pgrid { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px) { .mctx-pgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .mctx-pgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1280px) { .mctx-pgrid-6 { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (min-width: 1024px) { .mctx-pgrid-5 { grid-template-columns: repeat(5, minmax(0,1fr)); } }

.mctx-p { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: .6rem; background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); height: 100%; transition: var(--mctx-transition); }
.mctx-p:hover { border-color: var(--mctx-primary); box-shadow: var(--mctx-shadow-md); }
.mctx-p-media { position: relative; aspect-ratio: 1/1; border-radius: var(--mctx-radius); background: var(--mctx-bg-deep); display: grid; place-items: center; overflow: hidden; }
.mctx-p-media img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }
.mctx-p-ph { display: grid; place-items: center; gap: .25rem; width: 100%; height: 100%; color: #A9B1CE; background: repeating-linear-gradient(45deg, var(--mctx-muted) 0 10px, transparent 10px 20px), var(--mctx-bg-deep); }
.mctx-p-ph span { font-size: .5625rem; letter-spacing: .1em; }
.mctx-p-atc { position: absolute; inset-inline: .4rem; bottom: .4rem; padding: .4rem; border: 0; border-radius: var(--mctx-radius); background: var(--mctx-accent); color: #fff; font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; opacity: 0; transform: translateY(.4rem); transition: var(--mctx-transition); }
.mctx-p:hover .mctx-p-atc { opacity: 1; transform: none; }
.mctx-p-wish { position: absolute; top: .35rem; inset-inline-start: .35rem; width: 1.8rem; height: 1.8rem; border-radius: 999px; border: 1px solid var(--mctx-border); background: rgba(255,255,255,.95); color: var(--mctx-muted-fg); cursor: pointer; z-index: 2; }
.mctx-p-wish:hover, .mctx-p-wish.is-on { color: var(--mctx-accent); border-color: var(--mctx-accent); }
.mctx-p-tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.mctx-tag { font-size: .625rem; font-weight: 700; padding: .1rem .4rem; border-radius: .2rem; }
.mctx-tag-sale { background: rgba(15,122,74,.12); color: var(--mctx-ok); }
.mctx-tag-free { background: rgba(1,30,166,.10); color: var(--mctx-primary); }
.mctx-tag-new  { background: rgba(249,87,85,.14); color: var(--mctx-accent-ink); }
.mctx-p-vendor { font-size: .625rem; font-weight: 600; color: var(--mctx-primary); display: inline-flex; align-items: center; gap: .25rem; }
.mctx-p-title { font-family: var(--mctx-font); font-size: .8125rem; font-weight: 500; line-height: 1.55; color: var(--mctx-fg); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mctx-p-title a { color: inherit; }
.mctx-p-title a:hover { color: var(--mctx-primary); }
.mctx-p-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: .4rem; }
.mctx-p-price { display: flex; flex-direction: column; }
.mctx-p-now { font-family: var(--mctx-font-display); font-size: 1.0625rem; font-weight: 700; color: var(--mctx-accent-ink); line-height: 1.2; }
.mctx-p-was { font-size: .6875rem; color: var(--mctx-muted-fg); text-decoration: line-through; }
.mctx-off { flex-shrink: 0; padding: .18rem .4rem; border-radius: .2rem; background: var(--mctx-accent); color: #fff; font-family: var(--mctx-font-display); font-size: .75rem; font-weight: 700; }
.mctx-stars { display: inline-flex; gap: 1px; color: #F5A623; }
.mctx-stars svg { fill: currentColor; stroke: none; }
.mctx-p-rate { display: flex; align-items: center; gap: .25rem; font-size: .625rem; color: var(--mctx-muted-fg); }

.mctx-viewmore { display: block; width: max-content; margin: 1.25rem auto 0; padding: .6rem 2.5rem; border-radius: var(--mctx-radius); background: var(--mctx-accent); color: #fff !important; font-weight: 700; font-size: .875rem; }
.mctx-viewmore:hover { background: var(--mctx-accent-ink); }

/* --- 23. REVIEWS ----------------------------------------------------- */
.mctx-revwrap { display: grid; gap: .6rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 1024px) { .mctx-revwrap { grid-template-columns: minmax(0,1fr) 13rem; } }
.mctx-revbox { background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); padding: 1rem; }
.mctx-revscore { display: flex; align-items: center; gap: .6rem; padding-bottom: .85rem; margin-bottom: .5rem; border-bottom: 1px solid var(--mctx-border); flex-wrap: wrap; }
.mctx-revscore-n { font-family: var(--mctx-font-display); font-size: 1.5rem; font-weight: 700; color: var(--mctx-fg); }
.mctx-revrow { padding-block: .85rem; border-bottom: 1px solid var(--mctx-border); }
.mctx-revrow:last-child { border-bottom: 0; }
.mctx-revtop { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .4rem; }
.mctx-revname { font-size: .875rem; font-weight: 700; color: var(--mctx-fg); }
.mctx-revdate { font-size: .6875rem; color: var(--mctx-muted-fg); margin-inline-start: auto; }
.mctx-revtxt { font-size: .8125rem; color: var(--mctx-muted-fg); margin: 0; }
.mctx-railad { background: var(--mctx-gradient-brand); border-radius: var(--mctx-radius); padding: 1rem; color: #fff; display: flex; flex-direction: column; gap: .5rem; text-align: center; }
.mctx-railad h3 { font-family: var(--mctx-font-display); font-size: 1rem; margin: 0; color: #fff; }
.mctx-railad p { font-size: .75rem; color: rgba(255,255,255,.85); margin: 0; }
.mctx-railad input { padding: .5rem .7rem; border: 0; border-radius: var(--mctx-radius); font: inherit; font-size: .8125rem; }
.mctx-railad button { padding: .5rem; border: 0; border-radius: var(--mctx-radius); background: var(--mctx-ink-deep); color: #fff; font: inherit; font-weight: 700; font-size: .8125rem; cursor: pointer; }

/* --- 24. FOOTER ------------------------------------------------------ */
.mctx-footer { background: var(--mctx-primary); color: rgba(255,255,255,.85); }
.mctx-footer-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, minmax(0,1fr)); padding-block: 2rem; }
@media (min-width: 1024px) { .mctx-footer-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mctx-footer-h { position: relative; font-family: var(--mctx-font-display); font-size: .9375rem; color: #fff; margin: 0 0 .9rem; padding-bottom: .5rem; }
.mctx-footer-h::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 2.25rem; height: .5rem; color: var(--mctx-accent); background: var(--mctx-slashes); }
.mctx-footer-list li { margin-bottom: .45rem; }
.mctx-footer-list a { font-size: .8125rem; color: rgba(255,255,255,.85); }
.mctx-footer-list a:hover { color: #fff; text-decoration: underline; }
.mctx-footer-contact li { display: flex; gap: .5rem; font-size: .8125rem; margin-bottom: .6rem; }
.mctx-fc-icon { color: var(--mctx-accent); flex-shrink: 0; }
.mctx-footer-bar { background: #fff; border-top: 1px solid var(--mctx-border); }
.mctx-footer-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.25rem; }
.mctx-footer-bar img { height: 2.5rem; width: auto; }
.mctx-pay { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.mctx-pay-label { font-size: .75rem; color: var(--mctx-muted-fg); }
.mctx-pay span.mctx-paychip { padding: .25rem .55rem; border: 1px solid var(--mctx-border); border-radius: .25rem; font-size: .625rem; font-weight: 700; color: var(--mctx-muted-fg); }
.mctx-socials { display: flex; gap: .4rem; }
.mctx-social { width: 2rem; height: 2rem; border-radius: var(--mctx-radius); border: 1px solid rgba(255,255,255,.22); display: grid; place-items: center; color: rgba(255,255,255,.85); }
.mctx-social:hover { background: var(--mctx-accent); border-color: transparent; color: #fff; }
.mctx-copy { background: var(--mctx-ink-deep); color: rgba(255,255,255,.6); font-size: .75rem; }
.mctx-copy-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .85rem; }
.mctx-copy a { color: rgba(255,255,255,.8); }

/* --- 25. FLOATING CHAT / WHATSAPP ------------------------------------ */
.mctx-chat { position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 75; display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-radius: 999px; background: #25D366; color: #fff !important; font-size: .8125rem; font-weight: 700; box-shadow: var(--mctx-shadow-card); }
.mctx-chat:hover { filter: brightness(1.05); }
.mctx-chat-icon svg { fill: currentColor; stroke: none; }

/* --- 26. MOBILE MENU ------------------------------------------------- */
.mctx-mobile-menu { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(20rem, 88vw); background: #fff; z-index: 90; overflow-y: auto; padding: 1rem; visibility: hidden; transform: translateX(-100%); transition: transform .25s, visibility .25s; box-shadow: var(--mctx-shadow-card); }
html[dir="ltr"] .mctx-mobile-menu { transform: translateX(100%); }
.mctx-mobile-menu.is-open { visibility: visible; transform: none; }
.mctx-mobile-menu[hidden] { display: block; }
.mctx-mobile-menu a { display: block; padding: .6rem .2rem; font-size: .875rem; font-weight: 600; color: var(--mctx-fg); border-bottom: 1px solid var(--mctx-border); }
.mctx-mobile-title { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; color: var(--mctx-muted-fg); margin: 1rem 0 .2rem; }
.mctx-scrim { position: fixed; inset: 0; background: rgba(6,11,28,.5); z-index: 80; opacity: 0; pointer-events: none; transition: opacity .25s; }
.mctx-scrim.is-open { opacity: 1; pointer-events: auto; }
@media (min-width: 1024px) { .mctx-mobile-menu, .mctx-scrim { display: none !important; } }

/* --- 27. BREADCRUMB + SHOP LAYOUT ------------------------------------ */
.mctx-crumb { background: var(--mctx-bg); font-size: .75rem; color: var(--mctx-muted-fg); }
.mctx-crumb-inner { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding-block: .7rem; }
.mctx-crumb a { color: var(--mctx-primary); }
.mctx-crumb .is-current { color: var(--mctx-accent-ink); font-weight: 600; }

.mctx-shop { display: grid; gap: .6rem; grid-template-columns: minmax(0,1fr); align-items: start; }
@media (min-width: 1024px) { .mctx-shop { grid-template-columns: 14rem minmax(0,1fr) 12rem; } }
.mctx-filters { background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); padding: .85rem; }
.mctx-fgroup { padding-block: .75rem; border-bottom: 1px solid var(--mctx-border); }
.mctx-fgroup:last-child { border-bottom: 0; }
.mctx-fgroup:first-child { padding-top: 0; }
.mctx-fh { font-family: var(--mctx-font-display); font-size: .9375rem; font-weight: 700; color: var(--mctx-fg); margin: 0 0 .6rem; }
.mctx-flist li { margin-bottom: .4rem; }
.mctx-flist a, .mctx-flist label { display: flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--mctx-fg); cursor: pointer; }
.mctx-flist a:hover, .mctx-flist label:hover { color: var(--mctx-accent-ink); }
.mctx-flist a.is-active { color: var(--mctx-accent-ink); font-weight: 700; }
.mctx-fcount { margin-inline-start: auto; font-size: .6875rem; color: var(--mctx-muted-fg); }
.mctx-fchip { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .5rem; border-radius: .2rem; background: var(--mctx-muted); font-size: .75rem; color: var(--mctx-fg); }
.mctx-fchip button { border: 0; background: none; color: var(--mctx-accent-ink); cursor: pointer; font-size: .875rem; line-height: 1; padding: 0; }
.mctx-fmore { display: block; width: 100%; margin-top: .5rem; padding: .35rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); background: var(--mctx-muted); font: inherit; font-size: .75rem; cursor: pointer; color: var(--mctx-muted-fg); }
.mctx-filters-toggle { display: block; width: 100%; margin-bottom: .5rem; padding: .6rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); background: #fff; font: inherit; font-weight: 700; font-size: .875rem; cursor: pointer; }
@media (min-width: 1024px) { .mctx-filters-toggle { display: none; } }
@media (max-width: 1023px) { .mctx-filters[hidden] { display: none; } }

.mctx-toolbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem .75rem; background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); margin-bottom: .6rem; }
.mctx-tbcount { font-size: .8125rem; color: var(--mctx-fg); }
.mctx-tbcount b { color: var(--mctx-accent-ink); }
.mctx-tbgroup { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--mctx-muted-fg); }
.mctx-tbgroup:last-of-type { margin-inline-start: auto; }
.mctx-show { display: inline-flex; }
.mctx-show button { border: 1px solid var(--mctx-border); background: #fff; padding: .25rem .6rem; font: inherit; font-size: .75rem; cursor: pointer; color: var(--mctx-muted-fg); }
.mctx-show button.is-active { background: var(--mctx-accent); color: #fff; border-color: var(--mctx-accent); }
.mctx-sortsel { padding: .3rem .6rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); font: inherit; font-size: .75rem; background: #fff; color: var(--mctx-fg); }

.mctx-pager { display: flex; align-items: center; justify-content: center; gap: .3rem; margin-top: 1rem; flex-wrap: wrap; }
.mctx-pager a, .mctx-pager span { min-width: 2rem; height: 2rem; padding-inline: .5rem; display: inline-grid; place-items: center; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); background: #fff; font-size: .8125rem; color: var(--mctx-fg); }
.mctx-pager .is-current { background: var(--mctx-accent); border-color: var(--mctx-accent); color: #fff; font-weight: 700; }

.mctx-catbanner { position: relative; overflow: hidden; border-radius: var(--mctx-radius); background: var(--mctx-gradient-primary); color: #fff; padding: 1.5rem; margin-bottom: .6rem; }
.mctx-catbanner::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 10rem; height: 6rem; color: #fff; background: var(--mctx-slashes); opacity: .2; }
.mctx-catbanner h1 { position: relative; font-family: var(--mctx-font-display); font-size: 1.5rem; color: #fff; margin: 0 0 .3rem; }
@media (min-width: 768px) { .mctx-catbanner h1 { font-size: 2rem; } }
.mctx-catbanner p { position: relative; font-size: .875rem; color: rgba(255,255,255,.85); margin: 0; }

.mctx-circles { display: flex; gap: 1rem; overflow-x: auto; padding-block: .5rem; scrollbar-width: thin; }
.mctx-circle { flex: 0 0 auto; width: 6rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; }
.mctx-circle-img { width: 4.5rem; height: 4.5rem; border-radius: 999px; background: var(--mctx-muted); display: grid; place-items: center; color: var(--mctx-primary); border: 1px solid var(--mctx-border); }
.mctx-circle-name { font-size: .6875rem; color: var(--mctx-fg); line-height: 1.4; }

/* --- 28. CART -------------------------------------------------------- */
.mctx-steps { display: flex; gap: .25rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.mctx-step { padding: .45rem 1.5rem; background: var(--mctx-muted); color: var(--mctx-muted-fg); font-size: .8125rem; font-weight: 700; clip-path: polygon(0 0, calc(100% - .75rem) 0, 100% 50%, calc(100% - .75rem) 100%, 0 100%); }
html[dir="rtl"] .mctx-step { clip-path: polygon(.75rem 0, 100% 0, 100% 100%, .75rem 100%, 0 50%); }
.mctx-step.is-active { background: var(--mctx-accent); color: #fff; }
.mctx-step.is-done { background: var(--mctx-primary); color: #fff; }

.mctx-cartwrap { display: grid; gap: .6rem; grid-template-columns: minmax(0,1fr); align-items: start; }
@media (min-width: 1024px) { .mctx-cartwrap { grid-template-columns: minmax(0,1fr) 20rem; } }
.mctx-panel { background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); padding: 1rem; }
.mctx-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem; }
.mctx-panel-title { font-family: var(--mctx-font-display); font-size: 1.125rem; font-weight: 700; margin: 0; color: var(--mctx-fg); }

.mctx-tablewrap { overflow-x: auto; }
.mctx-carttable { width: 100%; border-collapse: collapse; min-width: 44rem; }
.mctx-carttable th { font-size: .6875rem; font-weight: 700; color: var(--mctx-muted-fg); text-align: start; padding: .5rem; background: var(--mctx-muted); }
.mctx-carttable td { padding: .75rem .5rem; border-bottom: 1px solid var(--mctx-border); font-size: .8125rem; vertical-align: middle; }
.mctx-cartprod { display: flex; align-items: center; gap: .6rem; min-width: 16rem; }
.mctx-cartthumb { width: 3.75rem; height: 3.75rem; flex-shrink: 0; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); display: grid; place-items: center; background: var(--mctx-bg-deep); color: #A9B1CE; }
.mctx-cartname { font-size: .8125rem; color: var(--mctx-fg); line-height: 1.5; }
.mctx-cartsku { font-size: .6875rem; color: var(--mctx-muted-fg); }
.mctx-cartvendor { font-size: .6875rem; color: var(--mctx-primary); font-weight: 600; }
.mctx-qty { display: inline-flex; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); overflow: hidden; }
.mctx-qty button { width: 1.9rem; border: 0; background: var(--mctx-muted); font: inherit; cursor: pointer; color: var(--mctx-fg); }
.mctx-qty input { width: 2.4rem; border: 0; text-align: center; font: inherit; font-size: .8125rem; }
.mctx-cartline { font-family: var(--mctx-font-display); font-weight: 700; color: var(--mctx-accent-ink); }
.mctx-iconbtn { border: 0; background: none; color: var(--mctx-muted-fg); cursor: pointer; padding: .2rem; }
.mctx-iconbtn:hover { color: var(--mctx-accent-ink); }

.mctx-shipest { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .75rem; margin-top: .85rem; background: var(--mctx-muted); border-radius: var(--mctx-radius); font-size: .8125rem; }
.mctx-shipest input, .mctx-shipest select { padding: .4rem .6rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); font: inherit; font-size: .8125rem; width: auto; }
.mctx-coupon { margin-top: .6rem; }
.mctx-coupon summary { cursor: pointer; font-size: .8125rem; font-weight: 700; color: var(--mctx-primary); padding: .6rem .75rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); }
.mctx-coupon-body { display: flex; gap: .4rem; margin-top: .5rem; flex-wrap: wrap; }

.mctx-totals li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .5rem; font-size: .875rem; border-bottom: 1px solid var(--mctx-border); }
.mctx-totals li.is-grand { border-bottom: 0; padding-top: .85rem; font-size: 1.125rem; font-weight: 700; }
.mctx-totals .mctx-grand { font-family: var(--mctx-font-display); color: var(--mctx-accent-ink); }
.mctx-btn-block { display: block; width: 100%; text-align: center; margin-top: .75rem; padding: .75rem; border: 0; border-radius: var(--mctx-radius); background: var(--mctx-accent); color: #fff !important; font: inherit; font-weight: 700; font-size: .9375rem; cursor: pointer; }
.mctx-btn-block:hover { background: var(--mctx-accent-ink); }
.mctx-btn-ghost { display: block; width: 100%; text-align: center; margin-top: .5rem; padding: .7rem; border: 1px solid var(--mctx-primary); border-radius: var(--mctx-radius); background: #fff; color: var(--mctx-primary) !important; font: inherit; font-weight: 700; font-size: .875rem; }
.mctx-secure { display: flex; align-items: flex-start; gap: .5rem; margin-top: .85rem; font-size: .6875rem; color: var(--mctx-muted-fg); }
.mctx-secure-icon { color: var(--mctx-ok); flex-shrink: 0; }

/* --- 29. CHECKOUT ---------------------------------------------------- */
.mctx-cobanner { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem; margin-bottom: .75rem; background: var(--mctx-muted); border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); font-family: var(--mctx-font-display); font-size: 1.0625rem; font-weight: 700; color: var(--mctx-fg); }
.mctx-cobanner .mctx-lock-icon { color: var(--mctx-ok); }
.mctx-costep { margin-bottom: 1.25rem; }
.mctx-costep-h { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.mctx-costep-n { width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--mctx-primary); color: #fff; display: grid; place-items: center; font-size: .8125rem; font-weight: 700; flex-shrink: 0; }
.mctx-costep-t { font-family: var(--mctx-font-display); font-size: 1rem; font-weight: 700; margin: 0; color: var(--mctx-fg); }
.mctx-field { margin-bottom: .75rem; }
.mctx-field label { display: block; margin-bottom: .3rem; font-size: .75rem; font-weight: 600; color: var(--mctx-muted-fg); }
.mctx-field label .mctx-req { color: var(--mctx-accent-ink); }
.mctx-field input, .mctx-field select, .mctx-field textarea { width: 100%; padding: .55rem .75rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); font: inherit; font-size: .875rem; background: #fff; color: var(--mctx-fg); }
.mctx-field input:focus, .mctx-field select:focus { outline: 0; border-color: var(--mctx-primary); }
.mctx-fieldrow { display: grid; gap: .75rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px) { .mctx-fieldrow { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.mctx-note { padding: .6rem .75rem; border-radius: var(--mctx-radius); background: #FFF7E8; border: 1px solid #F3DFB4; font-size: .75rem; color: #7A5A00; margin-bottom: .85rem; }
.mctx-payopts { display: grid; gap: .5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px) { .mctx-payopts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.mctx-payopt { display: flex; align-items: center; gap: .65rem; padding: .75rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); background: #fff; cursor: pointer; transition: var(--mctx-transition); }
.mctx-payopt:hover { border-color: var(--mctx-primary); }
.mctx-payopt input { accent-color: var(--mctx-primary); }
.mctx-payopt-logo { min-width: 4.5rem; padding: .35rem .5rem; border-radius: .25rem; background: var(--mctx-muted); color: var(--mctx-fg); font-size: .6875rem; font-weight: 700; text-align: center; }
.mctx-payopt-t { font-size: .8125rem; font-weight: 700; color: var(--mctx-fg); }
.mctx-payopt-d { font-size: .6875rem; color: var(--mctx-muted-fg); }
.mctx-sticky { position: sticky; top: .75rem; }
.mctx-osum-item { display: flex; gap: .6rem; padding-block: .6rem; border-bottom: 1px solid var(--mctx-border); }
.mctx-osum-thumb { width: 3rem; height: 3rem; flex-shrink: 0; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); display: grid; place-items: center; background: var(--mctx-bg-deep); color: #A9B1CE; }
.mctx-osum-n { font-size: .75rem; line-height: 1.5; color: var(--mctx-fg); }
.mctx-osum-q { font-size: .6875rem; color: var(--mctx-muted-fg); }

/* --- 30. ICON SIZES (doubled class beats base.css §5's 1.5rem) ------- */
.mctx-usocial-icon.mctx-usocial-icon svg { width: .8rem; height: .8rem; }
.mctx-hact-icon.mctx-hact-icon svg { width: 1.35rem; height: 1.35rem; }
.mctx-chev-icon.mctx-chev-icon svg,
.mctx-cats-icon.mctx-cats-icon svg,
.mctx-search-icon.mctx-search-icon svg,
.mctx-ai-icon.mctx-ai-icon svg,
.mctx-arrow-icon.mctx-arrow-icon svg,
.mctx-fc-icon.mctx-fc-icon svg,
.mctx-social-icon.mctx-social-icon svg,
.mctx-sugg-icon.mctx-sugg-icon svg,
.mctx-clock-icon.mctx-clock-icon svg,
.mctx-secure-icon.mctx-secure-icon svg,
.mctx-lock-icon.mctx-lock-icon svg,
.mctx-vendor-icon.mctx-vendor-icon svg,
.mctx-trash-icon.mctx-trash-icon svg,
.mctx-heart-icon.mctx-heart-icon svg { width: 1rem; height: 1rem; }
.mctx-sidecat-icon.mctx-sidecat-icon svg { width: .95rem; height: .95rem; }
.mctx-usp-icon.mctx-usp-icon svg { width: 1.5rem; height: 1.5rem; }
.mctx-ph-icon.mctx-ph-icon svg { width: 2rem; height: 2rem; }
.mctx-thumb-icon.mctx-thumb-icon svg { width: 1.5rem; height: 1.5rem; }
.mctx-circle-icon.mctx-circle-icon svg { width: 1.6rem; height: 1.6rem; }
.mctx-chat-icon.mctx-chat-icon svg { width: 1.15rem; height: 1.15rem; }
.mctx-stars svg { width: .75rem; height: .75rem; }

/* --- 31. UTILITIES --------------------------------------------------- */
.mctx-page { padding-block: .75rem 2rem; }
.mctx-stack { display: grid; gap: .6rem; }
.mctx-mt { margin-top: .6rem; }
.mctx-hidden-mobile { display: none; }
@media (min-width: 1024px) { .mctx-hidden-mobile { display: block; } }

/* =====================================================================
   32. v2.1 — HEADER / MEGA FLYOUT / PDP / CHECKOUT
   ===================================================================== */

/* no rule under the nav links (client note) */
.mctx-navlink::after { display: none !important; }
.mctx-navlink:hover, .mctx-navlink.is-active { background: rgba(255,255,255,.16); }

/* --- sidebar categories with hover flyout (home + shop) -------------- */
.mctx-sidenav { position: relative; background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); }
.mctx-sidenav-list { padding: .25rem 0; }
.mctx-sidenav-item { position: relative; }
.mctx-sidecat { display: flex; align-items: center; gap: .5rem; padding: .42rem .75rem; font-size: .8125rem; color: var(--mctx-fg); }
.mctx-sidecat-icon { color: var(--mctx-primary); flex-shrink: 0; }
.mctx-sidecat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mctx-sidecat-arrow { margin-inline-start: auto; color: var(--mctx-muted-fg); }
.mctx-sidenav-item:hover > .mctx-sidecat,
.mctx-sidecat.is-active { background: var(--mctx-accent); color: #fff; }
.mctx-sidenav-item:hover > .mctx-sidecat .mctx-sidecat-icon,
.mctx-sidenav-item:hover > .mctx-sidecat .mctx-sidecat-arrow,
.mctx-sidecat.is-active .mctx-sidecat-icon { color: #fff; }

.mctx-flyout { position: absolute; top: 0; inset-inline-start: 100%; z-index: 40;
	width: max(30rem, 46vw); min-height: 100%; padding: 1.1rem 1.25rem;
	background: #fff; border: 1px solid var(--mctx-accent); border-radius: 0 var(--mctx-radius) var(--mctx-radius) 0;
	box-shadow: var(--mctx-shadow-card); display: none; }
html[dir="rtl"] .mctx-flyout { border-radius: var(--mctx-radius) 0 0 var(--mctx-radius); }
.mctx-sidenav-item:hover > .mctx-flyout { display: block; }
@media (max-width: 1023px) { .mctx-flyout { display: none !important; } }
.mctx-flyout-grid { display: grid; gap: .5rem 2rem; grid-template-columns: repeat(3, minmax(0,1fr)); }
.mctx-flyout-col h4 { font-size: .8125rem; font-weight: 700; color: var(--mctx-fg); margin: 0 0 .5rem; }
.mctx-flyout-col a { display: block; font-size: .75rem; color: var(--mctx-primary); padding-block: .2rem; }
.mctx-flyout-col a:hover { color: var(--mctx-accent-ink); text-decoration: underline; }
.mctx-flyout-foot { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--mctx-border); }
.mctx-flyout-foot a { font-size: .75rem; font-weight: 700; color: var(--mctx-accent-ink); }

/* slide images (client-supplied banners) */
.mctx-slide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mctx-slide-photo .mctx-slide-body { display: none; }
.mctx-slide-photo::before { display: none; }

/* --- product placeholder art (until the real catalogue lands) -------- */
.mctx-ph-art { width: 100%; height: 100%; display: grid; place-items: center; background: var(--mctx-bg-deep); }
.mctx-ph-art svg { width: 62%; height: 62%; color: #B9C0D8; }

/* --- 33. PDP (product detail page) ----------------------------------- */
.mctx-alsoviewed { background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); padding: .6rem .75rem; margin-bottom: .6rem; }
.mctx-alsoviewed-h { font-size: .75rem; font-weight: 700; color: var(--mctx-muted-fg); margin: 0 0 .5rem; }
.mctx-mini-row { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .25rem; }
.mctx-mini { flex: 0 0 auto; width: 6.5rem; text-align: center; }
.mctx-mini-img { width: 6.5rem; height: 5rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); overflow: hidden; }
.mctx-mini-price { font-size: .75rem; font-weight: 700; color: var(--mctx-accent-ink); margin-top: .25rem; }

.mctx-flashbar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .5rem .75rem; margin-bottom: .6rem; border: 1px solid var(--mctx-accent); border-radius: var(--mctx-radius); background: #FFF4F4; }
.mctx-flash-tag { padding: .2rem .55rem; border-radius: .2rem; background: var(--mctx-accent); color: #fff; font-size: .6875rem; font-weight: 700; }
.mctx-flash-time { font-family: var(--mctx-font-display); font-size: 1.1rem; font-weight: 700; color: var(--mctx-accent-ink); }
.mctx-flash-note { font-size: .75rem; color: var(--mctx-muted-fg); margin-inline-start: auto; }

.mctx-pdp { display: grid; gap: .6rem; grid-template-columns: minmax(0,1fr); align-items: start; }
@media (min-width: 1024px) { .mctx-pdp { grid-template-columns: minmax(0,1fr) 12rem; } }
.mctx-pdp-main { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); padding: 1rem; }
@media (min-width: 768px) { .mctx-pdp-main { grid-template-columns: 1.05fr .95fr; } }
.mctx-gal-main { aspect-ratio: 1/1; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); overflow: hidden; background: var(--mctx-bg-deep); }
.mctx-gal-thumbs { display: flex; gap: .4rem; margin-top: .5rem; overflow-x: auto; }
.mctx-gal-thumb { flex: 0 0 auto; width: 4.25rem; height: 4.25rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); overflow: hidden; cursor: pointer; background: var(--mctx-bg-deep); padding: 0; }
.mctx-gal-thumb.is-active { border-color: var(--mctx-accent); border-width: 2px; }

.mctx-pdp-title { font-family: var(--mctx-font); font-size: 1.0625rem; font-weight: 700; line-height: 1.7; color: var(--mctx-fg); margin: 0 0 .5rem; }
.mctx-pdp-meta { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .75rem; color: var(--mctx-muted-fg); margin-bottom: .6rem; }
.mctx-pdp-rate { display: flex; align-items: center; gap: .4rem; padding-block: .5rem; border-block: 1px solid var(--mctx-border); font-size: .75rem; color: var(--mctx-muted-fg); margin-bottom: .75rem; }
.mctx-pdp-pricebox { margin-bottom: .85rem; }
.mctx-pdp-plabel { font-size: .75rem; font-weight: 700; color: var(--mctx-accent-ink); }
.mctx-pdp-price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.mctx-pdp-now { font-family: var(--mctx-font-display); font-size: 2rem; font-weight: 700; color: var(--mctx-accent-ink); line-height: 1.1; }
.mctx-pdp-was { font-size: .875rem; color: var(--mctx-muted-fg); text-decoration: line-through; }
.mctx-pdp-off { padding: .15rem .45rem; border-radius: .2rem; background: var(--mctx-accent); color: #fff; font-size: .75rem; font-weight: 700; }
.mctx-pdp-tax { font-size: .6875rem; color: var(--mctx-muted-fg); }
.mctx-pdp-qty { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; font-size: .8125rem; }
.mctx-pdp-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .85rem; }
.mctx-buynow { flex: 1 1 9rem; padding: .7rem 1.25rem; border: 0; border-radius: var(--mctx-radius); background: var(--mctx-primary); color: #fff !important; font: inherit; font-weight: 700; font-size: .9375rem; cursor: pointer; text-align: center; }
.mctx-buynow:hover { background: var(--mctx-primary-glow); }
.mctx-addcart { flex: 1 1 9rem; padding: .7rem 1.25rem; border: 0; border-radius: var(--mctx-radius); background: var(--mctx-accent); color: #fff !important; font: inherit; font-weight: 700; font-size: .9375rem; cursor: pointer; text-align: center; }
.mctx-addcart:hover { background: var(--mctx-accent-ink); }
.mctx-wishbtn { width: 2.9rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); background: #fff; color: var(--mctx-muted-fg); cursor: pointer; }
.mctx-wishbtn:hover, .mctx-wishbtn.is-on { color: var(--mctx-accent); border-color: var(--mctx-accent); }
.mctx-pdp-ship { padding: .7rem .85rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); background: var(--mctx-muted); font-size: .8125rem; display: grid; gap: .45rem; }
.mctx-pdp-ship b { color: var(--mctx-fg); }
.mctx-soldby { font-size: .8125rem; }
.mctx-soldby a { color: var(--mctx-primary); font-weight: 700; }

.mctx-tabs { display: flex; gap: .25rem; border-bottom: 2px solid var(--mctx-border); margin-bottom: 1rem; flex-wrap: wrap; }
.mctx-tab { padding: .55rem 1.1rem; border: 0; background: none; font: inherit; font-size: .875rem; font-weight: 700; color: var(--mctx-muted-fg); cursor: pointer; position: relative; }
.mctx-tab.is-active { color: var(--mctx-accent-ink); }
.mctx-tab.is-active::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; background: var(--mctx-accent); }
.mctx-tabpanel[hidden] { display: none; }
.mctx-prose p { font-size: .875rem; color: var(--mctx-muted-fg); margin: 0 0 .85rem; }
.mctx-prose h4 { font-family: var(--mctx-font-display); font-size: 1rem; margin: 1.25rem 0 .6rem; color: var(--mctx-fg); }
.mctx-spectable { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.mctx-spectable td { padding: .5rem .75rem; border: 1px solid var(--mctx-border); }
.mctx-spectable td:first-child { background: var(--mctx-muted); font-weight: 600; width: 40%; }

.mctx-rbreak { display: grid; gap: 1rem; grid-template-columns: minmax(0,1fr); align-items: center; margin-bottom: 1rem; }
@media (min-width: 640px) { .mctx-rbreak { grid-template-columns: 12rem minmax(0,1fr); } }
.mctx-rbig { text-align: center; }
.mctx-rbig-n { font-family: var(--mctx-font-display); font-size: 2.5rem; font-weight: 700; color: var(--mctx-fg); line-height: 1; }
.mctx-rbar-row { display: flex; align-items: center; gap: .6rem; font-size: .75rem; color: var(--mctx-muted-fg); margin-bottom: .35rem; }
.mctx-rbar { flex: 1 1 auto; height: .45rem; border-radius: 999px; background: var(--mctx-muted); overflow: hidden; }
.mctx-rbar i { display: block; height: 100%; background: var(--mctx-accent); }

.mctx-rail { display: none; }
@media (min-width: 1024px) { .mctx-rail { display: grid; gap: .6rem; align-content: start; position: sticky; top: .75rem; } }
.mctx-railcard { background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); padding: .75rem; }
.mctx-railcard h4 { font-family: var(--mctx-font-display); font-size: .875rem; margin: 0 0 .5rem; color: var(--mctx-fg); }
.mctx-railquote { font-size: .75rem; color: var(--mctx-muted-fg); line-height: 1.7; margin: 0; }

.mctx-stickybuy { position: fixed; inset-inline: 0; bottom: 0; z-index: 65; background: #fff; border-top: 1px solid var(--mctx-border); box-shadow: 0 -4px 18px -8px rgba(6,11,28,.3); transform: translateY(110%); transition: transform .25s; }
.mctx-stickybuy.is-on { transform: none; }
.mctx-stickybuy-inner { display: flex; align-items: center; gap: .75rem; padding-block: .6rem; flex-wrap: wrap; }
.mctx-stickybuy-name { flex: 1 1 12rem; min-width: 0; font-size: .8125rem; color: var(--mctx-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767px) { .mctx-chat { bottom: 4.5rem; } }

/* --- 34. CHECKOUT (matched to the reference) ------------------------- */
.mctx-co { display: grid; gap: .75rem; grid-template-columns: minmax(0,1fr); align-items: start; }
@media (min-width: 1024px) { .mctx-co { grid-template-columns: minmax(0,1fr) 20rem; } }
.mctx-co-banner { display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .9rem; margin-bottom: .75rem; background: linear-gradient(#fff, var(--mctx-muted)); border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); }
.mctx-co-banner h1 { font-family: var(--mctx-font-display); font-size: 1.125rem; font-weight: 700; margin: 0; color: var(--mctx-fg); }
.mctx-co-banner .mctx-lock-icon { color: var(--mctx-ok); }
.mctx-co-hint { font-size: .75rem; color: var(--mctx-muted-fg); margin: 0 0 1rem; }
.mctx-addrbox { border: 2px solid var(--mctx-ok); border-radius: var(--mctx-radius); overflow: hidden; }
.mctx-addrbox-h { padding: .5rem .85rem; background: rgba(15,122,74,.10); font-size: .8125rem; font-weight: 700; color: var(--mctx-ok); }
.mctx-addrbox-b { padding: .85rem; }
.mctx-orsign { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; font-size: .75rem; color: var(--mctx-muted-fg); }
.mctx-orsign::before, .mctx-orsign::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--mctx-border); }
.mctx-inline-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.mctx-inline-form .mctx-field { flex: 1 1 16rem; margin-bottom: 0; }
.mctx-btn-sm { padding: .55rem 1.25rem; border: 0; border-radius: var(--mctx-radius); background: var(--mctx-accent); color: #fff !important; font: inherit; font-weight: 700; font-size: .8125rem; cursor: pointer; }
.mctx-btn-sm:hover { background: var(--mctx-accent-ink); }
.mctx-payopt.is-on { border-color: var(--mctx-primary); background: #F7F8FF; }
.mctx-proceed { display: block; width: max-content; margin: 1.25rem auto 0; padding: .75rem 2.5rem; border: 0; border-radius: var(--mctx-radius); background: var(--mctx-accent); color: #fff !important; font: inherit; font-weight: 700; font-size: .9375rem; cursor: pointer; }
.mctx-proceed:disabled { opacity: .55; cursor: not-allowed; }
.mctx-osum-toggle { width: 100%; margin-top: .6rem; padding: .55rem; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); background: var(--mctx-muted); font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer; color: var(--mctx-fg); }
.mctx-osum-list[hidden] { display: none; }

/* --- 35. FIX: product artwork must not be shrunk by base.css §5 ------ */
.mctx-art-icon.mctx-art-icon { display: block; width: 100%; height: 100%; }
.mctx-art-icon.mctx-art-icon svg { width: 100%; height: 100%; display: block; }
.mctx-ph-art { padding: 12%; }
.mctx-gal-main .mctx-ph-art, .mctx-qhero-media .mctx-ph-art { padding: 16%; }
.mctx-cartthumb .mctx-ph-art, .mctx-osum-thumb .mctx-ph-art,
.mctx-mini-img .mctx-ph-art, .mctx-gal-thumb .mctx-ph-art { padding: 8%; }
.mctx-cur { font-size: .72em; font-weight: 600; }

/* =====================================================================
   36. ROUND-3 CLIENT REVISIONS
   ===================================================================== */

/* 36.1 — no decorative rule under any heading, incl. the footer */
.mctx-slash { display: none !important; }
.mctx-footer-h::after { display: none !important; }
.mctx-footer-h { padding-bottom: 0; margin-bottom: 1rem; }
.mctx-section-head.mctx-section-head .mctx-head-rule { display: none !important; }
.mctx-navlink::after, .mctx-pick::after, .mctx-catbanner::before,
.mctx-subscribe::before, .mctx-sidecat-arrow { display: none !important; }

/* 36.2 — footer contact in white */
.mctx-footer-contact li, .mctx-footer-contact a { color: #FFFFFF; }
.mctx-footer-contact a:hover { color: #FFFFFF; text-decoration: underline; }
.mctx-fc-icon { color: #FFFFFF; }

/* 36.3 — five cards per row */
.mctx-pgrid { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px)  { .mctx-pgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .mctx-pgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1280px) { .mctx-pgrid { grid-template-columns: repeat(5, minmax(0,1fr)); } }

/* 36.4 — add-to-cart is permanent, not a hover reveal; no vendor on the card */
.mctx-p-atc {
	position: static; opacity: 1; transform: none;
	display: flex; align-items: center; justify-content: center; gap: .4rem;
	width: 100%; margin-top: .5rem; padding: .5rem;
	border: 0; border-radius: var(--mctx-radius);
	background: var(--mctx-accent); color: #fff;
	font: inherit; font-size: .8125rem; font-weight: 700; cursor: pointer;
	transition: var(--mctx-transition);
}
.mctx-p-atc:hover { background: var(--mctx-accent-ink); }
.mctx-cart-icon.mctx-cart-icon svg { width: .95rem; height: .95rem; }
.mctx-p-vendor { display: none !important; }

/* 36.5 — full-width hero, no side rails on the home masthead */
.mctx-hero-wide { padding-block: .75rem; background: var(--mctx-bg); }
.mctx-hero-wide .mctx-slider { min-height: 16rem; }
@media (min-width: 768px)  { .mctx-hero-wide .mctx-slider { min-height: 22rem; } }
@media (min-width: 1280px) { .mctx-hero-wide .mctx-slider { min-height: 26rem; } }
.mctx-slide-img { object-fit: cover; object-position: center; }

/* 36.6 — categories only from the dropdown */
.mctx-sidenav, .mctx-saleday, .mctx-alsoviewed, .mctx-pager, .mctx-shipest { display: none !important; }
.mctx-allcats-panel { width: min(64rem, 96vw); max-height: 78vh; padding: 1rem; border-radius: 0 0 var(--mctx-radius) var(--mctx-radius); }
.mctx-allcats-panel.is-open { display: grid; gap: .5rem 1.5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px)  { .mctx-allcats-panel.is-open { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1024px) { .mctx-allcats-panel.is-open { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mctx-allcats-panel .mctx-sidecat { border-radius: var(--mctx-radius); }
.mctx-allcats-panel .mctx-sidecat:hover { background: var(--mctx-muted); color: var(--mctx-primary); }

/* home category tiles (replacing the old permanent sidebar) */
.mctx-cattiles { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 640px)  { .mctx-cattiles { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 1024px) { .mctx-cattiles { grid-template-columns: repeat(6, minmax(0,1fr)); } }
.mctx-cattile { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center;
	padding: 1rem .5rem; background: #fff; border: 1px solid var(--mctx-border);
	border-radius: var(--mctx-radius); transition: var(--mctx-transition); }
.mctx-cattile:hover { border-color: var(--mctx-primary); transform: translateY(-3px); box-shadow: var(--mctx-shadow-md); }
.mctx-cattile-icon { width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--mctx-muted); color: var(--mctx-primary); }
.mctx-cattile:hover .mctx-cattile-icon { background: var(--mctx-primary); color: #fff; }
.mctx-cattile-icon.mctx-cattile-icon svg { width: 1.4rem; height: 1.4rem; }
.mctx-cattile-name { font-size: .75rem; font-weight: 600; color: var(--mctx-fg); line-height: 1.5; }

/* 36.7 — shop bar + collapsible drawers (filters & categories) */
.mctx-shop { grid-template-columns: minmax(0,1fr) !important; }
@media (min-width: 1024px) { .mctx-shop { grid-template-columns: minmax(0,1fr) 13rem !important; } }
.mctx-shopbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
	padding: .55rem .7rem; margin-bottom: .6rem; background: #fff;
	border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); }
.mctx-shopbtn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .9rem;
	border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); background: #fff;
	font: inherit; font-size: .8125rem; font-weight: 700; color: var(--mctx-fg); cursor: pointer; }
.mctx-shopbtn:hover { border-color: var(--mctx-primary); color: var(--mctx-primary); }
.mctx-shopbtn.is-on { background: var(--mctx-primary); border-color: var(--mctx-primary); color: #fff; }
.mctx-shopbtn.is-on svg { color: #fff; }
.mctx-grid-icon.mctx-grid-icon svg, .mctx-dial-icon.mctx-dial-icon svg { width: 1rem; height: 1rem; }
.mctx-shopbar .mctx-tbgroup { margin-inline-start: auto; }

.mctx-drawer { padding: 1rem; margin-bottom: .6rem; background: #fff;
	border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); }
.mctx-drawer[hidden] { display: none; }
.mctx-drawer-grid { display: grid; gap: 1rem 1.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px)  { .mctx-drawer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .mctx-drawer-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mctx-drawer-cats { display: grid; gap: 1rem 1.5rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 640px)  { .mctx-drawer-cats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1024px) { .mctx-drawer-cats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.mctx-drawer .mctx-fgroup { padding: 0; border: 0; }
.mctx-drawer-foot { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
	margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--mctx-border); }
.mctx-fclear { border: 0; background: none; font: inherit; font-size: .8125rem; font-weight: 700;
	color: var(--mctx-accent-ink); cursor: pointer; text-decoration: underline; }
.mctx-empty { padding: 2.5rem 1rem; text-align: center; font-size: .9375rem; color: var(--mctx-muted-fg);
	background: #fff; border: 1px dashed var(--mctx-border); border-radius: var(--mctx-radius); }
.mctx-p[hidden] { display: none !important; }

/* 36.8 — mobile sticky checkout bar on the cart */
.mctx-mobilebar { position: fixed; inset-inline: 0; bottom: 0; z-index: 70; background: #fff;
	border-top: 1px solid var(--mctx-border); box-shadow: 0 -4px 18px -8px rgba(6,11,28,.3); }
@media (min-width: 1024px) { .mctx-mobilebar { display: none; } }
.mctx-mobilebar-inner { display: flex; align-items: center; gap: .75rem; padding-block: .6rem; }
.mctx-mobilebar-total { font-size: .8125rem; color: var(--mctx-muted-fg); }
.mctx-mobilebar-total b { display: block; font-family: var(--mctx-font-display); font-size: 1.05rem; color: var(--mctx-accent-ink); }
.mctx-mobilebar-btn { flex: 1 1 auto; text-align: center; padding: .7rem; border-radius: var(--mctx-radius);
	background: var(--mctx-accent); color: #fff !important; font-weight: 700; font-size: .9375rem; }
@media (max-width: 1023px) { body:has(.mctx-mobilebar) { padding-bottom: 4.5rem; } .mctx-chat { bottom: 5rem; } }

/* 36.9 — "sold by" kept quiet on the PDP */
.mctx-soldby { font-size: .75rem; color: var(--mctx-muted-fg); }
.mctx-soldby a { color: var(--mctx-muted-fg); font-weight: 600; text-decoration: underline; }
.mctx-soldby a:hover { color: var(--mctx-primary); }

/* 36.10 — Cairo needs a touch more line-height in tight card titles */
.mctx-p-title { line-height: 1.6; min-height: 2.6em; }
.mctx-blocktitle { font-weight: 700; }

/* =====================================================================
   37. ROUND-4 CLIENT REVISIONS
   ===================================================================== */

/* 37.1 — slider dots read as brand blue */
.mctx-dot { background: rgba(255,255,255,.55); border: 1px solid rgba(1,30,166,.35); }
.mctx-dot.is-active { background: var(--mctx-primary); border-color: var(--mctx-primary); width: 1.6rem; }

/* 37.2 — filters live inside the category page, on the left (RTL: 2nd column) */
.mctx-shop { display: grid; gap: .75rem; align-items: start; grid-template-columns: minmax(0,1fr) !important; }
@media (min-width: 1024px) { .mctx-shop { grid-template-columns: minmax(0,1fr) 15rem !important; } }
.mctx-filters-side { background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); padding: 1rem; }
.mctx-filters-side[hidden] { display: none; }
@media (min-width: 1024px) { .mctx-filters-side[hidden] { display: block !important; } }
.mctx-filters-h { font-family: var(--mctx-font-display); font-size: 1rem; font-weight: 700; color: var(--mctx-fg);
	margin: 0 0 1rem; padding-bottom: .65rem; border-bottom: 1px solid var(--mctx-border); }
.mctx-filters-body { display: grid; gap: 1.25rem; }
.mctx-filters-body .mctx-fgroup { padding: 0; border: 0; }
.mctx-filters-body .mctx-fh { font-size: .875rem; margin-bottom: .55rem; }
.mctx-filters-foot { margin-top: 1.25rem; padding-top: .85rem; border-top: 1px solid var(--mctx-border); }
.mctx-drawer, .mctx-rail { display: none !important; }
.mctx-shopbtn-m { display: inline-flex; }
@media (min-width: 1024px) { .mctx-shopbtn-m { display: none; } }

/* 37.3 — the sort control never wraps under on mobile */
.mctx-shopbar { flex-wrap: nowrap; gap: .4rem; }
.mctx-shopbar .mctx-tbcount { white-space: nowrap; font-size: .75rem; }
.mctx-shopbar .mctx-tbgroup { margin-inline-start: auto; min-width: 0; gap: .3rem; }
.mctx-sortlbl { white-space: nowrap; }
.mctx-sortsel { min-width: 0; max-width: 11rem; }
@media (max-width: 480px) { .mctx-sortlbl { display: none; } .mctx-shopbtn-m { padding-inline: .6rem; } }

/* 37.4 — category strip on every listing page */
.mctx-catstrip { background: #fff; border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius);
	padding: 1rem; margin-bottom: .75rem; }
.mctx-catstrip-h { font-size: 1.05rem; margin: 0 0 1rem; }

/* 37.5 — product page: sticky bar visible from load, wider buttons, clear of the footer */
.mctx-stickybuy { transform: none; }
.mctx-stickybuy-inner { gap: .5rem; flex-wrap: nowrap; }
.mctx-sticky-btn { flex: 1 1 10rem; min-width: 7rem; padding-block: .65rem; text-align: center; }
.mctx-stickybuy .mctx-qty { display: none; }
@media (min-width: 768px) { .mctx-stickybuy .mctx-qty { display: inline-flex; } .mctx-sticky-btn { flex: 0 0 12rem; } }
.mctx-stickybuy .mctx-pdp-now { white-space: nowrap; }
body:has(.mctx-stickybuy) { padding-bottom: 5rem; }
body:has(.mctx-stickybuy) .mctx-chat { bottom: 5.5rem; }

/* 37.6 — payment marks moved into the footer; the white bar under it is gone */
.mctx-footer-bar { display: none !important; }
.mctx-footer-pay { margin-top: 1.25rem; }
.mctx-footer-paylabel { display: block; font-size: .75rem; color: rgba(255,255,255,.75); margin-bottom: .5rem; }
.mctx-paylogos { display: flex; gap: .4rem; flex-wrap: wrap; }
.mctx-paylogo svg { width: 3.6rem; height: 1.35rem; display: block; }
.mctx-paylogo { display: inline-flex; }

/* 37.7 — breathing room around footer headings and section titles */
.mctx-footer-h { margin-bottom: 1.5rem; }
.mctx-footer-list li { margin-bottom: .6rem; }
.mctx-footer-grid { gap: 2rem 1.5rem; padding-block: 2.5rem; }
.mctx-blockhead { margin-bottom: 1.5rem; margin-top: .5rem; }
.mctx-section { padding-block: 1.75rem; }
@media (min-width: 768px) { .mctx-section { padding-block: 2.5rem; } }

/* 37.8 — slightly larger product titles */
.mctx-p-title { font-size: .875rem; }
@media (min-width: 1024px) { .mctx-p-title { font-size: .9375rem; } }
.mctx-pdp-title { font-size: 1.25rem; }
@media (min-width: 768px) { .mctx-pdp-title { font-size: 1.4rem; } }

/* 37.9 — mobile header: burger + logo start, account icons end, search on its own row */
@media (max-width: 1023px) {
	.mctx-header-inner { flex-wrap: wrap; gap: .5rem; }
	.mctx-burger { order: 1; }
	.mctx-logo { order: 2; }
	.mctx-header-actions { order: 3; margin-inline-start: auto; }
	.mctx-search { order: 4; display: block; flex: 1 1 100%; }
	.mctx-search-ai { display: none; }
	.mctx-sugg.is-open { grid-template-columns: minmax(0,1fr); }
	.mctx-sugg-col + .mctx-sugg-col { border-inline-start: 0; border-top: 1px solid var(--mctx-border); }
	.mctx-nav { display: none; }
}

/* 37.10 — mobile drawer: blue "all categories" head + accordion subs */
.mctx-mobile-head { padding: .75rem .25rem; margin-bottom: .5rem; font-family: var(--mctx-font-display);
	font-size: 1rem; font-weight: 700; color: var(--mctx-primary); border-bottom: 2px solid var(--mctx-primary); }
.mctx-macc { border-bottom: 1px solid var(--mctx-border); }
.mctx-macc-btn { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .7rem .25rem;
	border: 0; background: none; font: inherit; font-size: .875rem; font-weight: 600;
	color: var(--mctx-fg); cursor: pointer; text-align: start; }
.mctx-macc-btn .mctx-sidecat-icon { color: var(--mctx-primary); }
.mctx-macc-chev { margin-inline-start: auto; color: var(--mctx-muted-fg); transition: transform .25s; }
.mctx-macc-btn[aria-expanded="true"] { color: var(--mctx-primary); }
.mctx-macc-btn[aria-expanded="true"] .mctx-macc-chev { transform: rotate(180deg); }
.mctx-macc-body { padding: 0 0 .6rem 0; }
.mctx-macc-body[hidden] { display: none; }
.mctx-macc-body a { padding: .45rem .25rem .45rem 0; padding-inline-start: 2rem; font-size: .8125rem;
	font-weight: 400; color: var(--mctx-muted-fg); border-bottom: 0; }
.mctx-macc-body a:hover { color: var(--mctx-primary); }
.mctx-mobile-title { margin-top: 1.25rem; }

/* 37.11 — social icons are real marks now */
.mctx-usocial-icon.mctx-usocial-icon svg { width: .85rem; height: .85rem; }
.mctx-social-icon.mctx-social-icon svg { width: 1.05rem; height: 1.05rem; }
.mctx-util-socials a { background: transparent; color: var(--mctx-muted-fg); }
.mctx-util-socials a:hover { background: var(--mctx-primary); color: #fff; }

/* 38. the current sub-category is marked in the strip, so the page reads as
   "inside" the sub rather than back at the top level */
.mctx-circle.is-active .mctx-circle-img { background: var(--mctx-primary); color: #fff; border-color: var(--mctx-primary); }
.mctx-circle.is-active .mctx-circle-name { color: var(--mctx-primary); font-weight: 700; }
.mctx-circle:hover .mctx-circle-img { border-color: var(--mctx-primary); }

/* =====================================================================
   39. WORDPRESS / WOOCOMMERCE LAYER (plugin build)
   Everything below only exists once the static build becomes a plugin.
   ===================================================================== */

/* 39.1 — the "all categories" panel: one column per category + its subs */
.mctx-panel-col { padding: .25rem 0; }
.mctx-panel-col .mctx-sidecat { font-weight: 700; }
.mctx-sidesub {
	display: block; padding: .3rem .75rem;
	font-size: .75rem; color: var(--mctx-muted-fg);
	border-radius: var(--mctx-radius);
}
.mctx-sidesub:hover { color: var(--mctx-primary); background: var(--mctx-muted); }

/* 39.2 — explicit column counts, driven by the widget control */
@media (min-width: 1024px) {
	.mctx-pgrid.mctx-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
	.mctx-pgrid.mctx-cols-5 { grid-template-columns: repeat(4, minmax(0,1fr)); }
	.mctx-pgrid.mctx-cols-6 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (min-width: 1280px) {
	.mctx-pgrid.mctx-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
	.mctx-pgrid.mctx-cols-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
	.mctx-pgrid.mctx-cols-6 { grid-template-columns: repeat(6, minmax(0,1fr)); }
}

/* category tile artwork can be an image now, not only an icon */
.mctx-cattile-icon img, .mctx-circle-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.mctx-cattile-icon-svg.mctx-cattile-icon-svg svg { width: 1.4rem; height: 1.4rem; }

/* 39.3 — Elementor wrappers must not add width or background of their own */
.elementor-widget-container > [class^="mctx-"] { width: 100%; }
.elementor-section, .elementor-container, .e-con, .e-con-inner { max-width: 100%; }
body.mctx-woo .elementor-widget-mctx-shop .elementor-widget-container { overflow: visible; }

/* 39.4 — WooCommerce native pages restyled to the marketplace design.
   Cart, checkout and single product stay 100% WooCommerce; only the skin
   changes, so plugins and payment gateways keep working. */
.mctx-woo .woocommerce-message,
.mctx-woo .woocommerce-info,
.mctx-woo .woocommerce-error {
	border-top: 0; border-inline-start: 4px solid var(--mctx-primary);
	border-radius: var(--mctx-radius); background: #fff; color: var(--mctx-fg);
	font-family: var(--mctx-font); box-shadow: var(--mctx-shadow-sm);
}
.mctx-woo .woocommerce-error { border-inline-start-color: var(--mctx-accent); }
.mctx-woo .woocommerce-message::before,
.mctx-woo .woocommerce-info::before { color: var(--mctx-primary); }

.mctx-woo .button,
.mctx-woo button.button,
.mctx-woo input.button,
.mctx-woo a.button,
.mctx-woo .woocommerce-button {
	background: var(--mctx-accent) !important; color: #fff !important;
	border-radius: var(--mctx-radius) !important; font-family: var(--mctx-font) !important;
	font-weight: 700 !important; padding: .7rem 1.5rem !important;
}
.mctx-woo .button:hover,
.mctx-woo a.button:hover,
.mctx-woo button.button:hover { background: var(--mctx-accent-ink) !important; }
.mctx-woo .button.alt, .mctx-woo #place_order {
	background: var(--mctx-primary) !important;
}
.mctx-woo .button.alt:hover, .mctx-woo #place_order:hover { background: var(--mctx-primary-glow) !important; }

.mctx-woo .price, .mctx-woo .woocommerce-Price-amount {
	font-family: var(--mctx-font-display); font-weight: 700; color: var(--mctx-accent-ink);
}
.mctx-woo del .woocommerce-Price-amount { color: var(--mctx-muted-fg); font-weight: 400; }

.mctx-woo table.shop_table {
	border: 1px solid var(--mctx-border) !important; border-radius: var(--mctx-radius) !important;
	background: #fff;
}
.mctx-woo table.shop_table th { background: var(--mctx-muted); font-size: .75rem; color: var(--mctx-muted-fg); }
.mctx-woo table.shop_table td { font-size: .875rem; }

.mctx-woo .woocommerce-checkout .col2-set .col-1,
.mctx-woo .woocommerce-checkout .col2-set .col-2 { float: none; width: 100%; }
.mctx-woo form.checkout .form-row input.input-text,
.mctx-woo form.checkout .form-row textarea,
.mctx-woo form.checkout .form-row select,
.mctx-woo .woocommerce-form input.input-text {
	padding: .55rem .75rem; border: 1px solid var(--mctx-border);
	border-radius: var(--mctx-radius); font: inherit; font-size: .875rem;
	background: #fff; color: var(--mctx-fg);
}
.mctx-woo form.checkout .form-row label { font-size: .75rem; font-weight: 600; color: var(--mctx-muted-fg); }
.mctx-woo #order_review, .mctx-woo .cart_totals, .mctx-woo .woocommerce-checkout-review-order {
	background: #fff; border: 1px solid var(--mctx-border);
	border-radius: var(--mctx-radius); padding: 1rem;
}
.mctx-woo ul.wc_payment_methods li {
	border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius);
	padding: .75rem; margin-bottom: .5rem; list-style: none;
}
.mctx-woo ul.wc_payment_methods li:hover { border-color: var(--mctx-primary); }

.mctx-woo ul.products li.product,
.mctx-woo .woocommerce ul.products li.product {
	background: #fff; border: 1px solid var(--mctx-border);
	border-radius: var(--mctx-radius); padding: .6rem;
}
.mctx-woo .onsale {
	background: var(--mctx-accent) !important; color: #fff !important;
	border-radius: .2rem !important; font-family: var(--mctx-font-display); font-weight: 700;
	min-height: auto !important; min-width: auto !important; line-height: 1.6 !important;
	padding: .1rem .5rem !important;
}
.mctx-woo .woocommerce-product-gallery { border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); }
.mctx-woo .product_title { font-family: var(--mctx-font); font-size: 1.4rem; font-weight: 700; line-height: 1.7; }
.mctx-woo .woocommerce-tabs ul.tabs { border-bottom: 2px solid var(--mctx-border); padding: 0; }
.mctx-woo .woocommerce-tabs ul.tabs li { border: 0 !important; background: none !important; border-radius: 0 !important; }
.mctx-woo .woocommerce-tabs ul.tabs li.active a { color: var(--mctx-accent-ink) !important; box-shadow: inset 0 -2px 0 var(--mctx-accent); }

/* vendor line on the single product — quiet, per the client note */
.mctx-soldby-woo {
	display: block; margin-block: .5rem;
	font-size: .75rem; color: var(--mctx-muted-fg);
}
.mctx-soldby-woo a { color: var(--mctx-muted-fg); font-weight: 600; text-decoration: underline; }
.mctx-soldby-woo a:hover { color: var(--mctx-primary); }

/* 39.5 — dynamic grids never depend on the scroll observer (v8) */
[data-mctx-dynamic] .mctx-reveal,
[data-mctx-dynamic].mctx-reveal {
	opacity: 1 !important; transform: none !important; transition: none !important;
}

/* =====================================================================
   40. WOOCOMMERCE TEMPLATE LAYER — category, product, cart, checkout,
   account. These rules dress the plugin's own template overrides, so the
   WooCommerce pages are visually identical to the Elementor-built ones.
   ===================================================================== */

/* 40.1 — theme wrapper neutralisation. Hello Elementor (and most themes)
   wrap the content in their own padded container; our templates already
   ship .mctx-container, so the outer one must stop adding width limits. */
.mctx-woo .site-main,
.mctx-woo .site-content,
.mctx-woo main.site-main,
.mctx-woo .woocommerce-page > .container,
.mctx-woo #primary {
	max-width: 100% !important;
	width: 100% !important;
	padding-inline: 0 !important;
	margin-inline: 0 !important;
}
.mctx-woo .woocommerce { max-width: 100%; }
.mctx-woo .woocommerce-products-header,
.mctx-woo .woocommerce-breadcrumb,
.mctx-woo .woocommerce-result-count,
.mctx-woo .woocommerce-ordering,
.mctx-woo .storefront-sorting { display: none !important; }
.mctx-woo body, body.mctx-woo { background: var(--mctx-bg); }

/* Cart, checkout and account are plain WP pages — give them the page shell. */
.mctx-woo.woocommerce-cart .site-main,
.mctx-woo.woocommerce-checkout .site-main,
.mctx-woo.woocommerce-account .site-main {
	max-width: var(--mctx-max) !important;
	margin-inline: auto !important;
	padding: 1.25rem var(--mctx-pad) 2.5rem !important;
	direction: rtl;
}
@media (min-width: 768px) {
	.mctx-woo.woocommerce-cart .site-main,
	.mctx-woo.woocommerce-checkout .site-main,
	.mctx-woo.woocommerce-account .site-main { padding-inline: var(--mctx-pad-lg) !important; }
}
.mctx-dir-ltr.mctx-woo .site-main { direction: ltr; }

/* Inner (non-Woo) pages get the same measure so they stop looking loose. */
.mctx-page > .mctx-container { padding-bottom: 1rem; }
.mctx-inner-page .site-main,
.mctx-inner-page .entry-content {
	max-width: var(--mctx-max-narrow); margin-inline: auto;
	padding-inline: var(--mctx-pad-lg);
}
.mctx-inner-page .entry-content h2 { font-family: var(--mctx-font-display); font-size: 1.25rem; margin: 1.75rem 0 .75rem; }
.mctx-inner-page .entry-content p { font-size: .9375rem; color: var(--mctx-muted-fg); }

/* 40.2 — PRODUCT PAGE */
.mctx-pdp-main.product { display: grid; gap: 1.25rem; grid-template-columns: minmax(0,1fr); }
@media (min-width: 768px) { .mctx-pdp-main.product { grid-template-columns: 1.05fr .95fr; } }
.mctx-pdp-main .woocommerce-product-gallery { width: 100% !important; float: none !important; margin: 0 !important; padding: .5rem; }
.mctx-pdp-main .woocommerce-product-gallery__image img { border-radius: var(--mctx-radius); }
.mctx-pdp-main .flex-control-thumbs { display: flex; gap: .4rem; margin-top: .5rem; padding: 0; }
.mctx-pdp-main .flex-control-thumbs li { width: 4.25rem !important; margin: 0 !important; float: none !important; }
.mctx-pdp-main .flex-control-thumbs img { border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); opacity: 1; }
.mctx-pdp-main .flex-control-thumbs img.flex-active { border-color: var(--mctx-accent); border-width: 2px; }

.mctx-pdp-summary { width: 100% !important; float: none !important; margin: 0 !important; }
.mctx-pdp-summary .product_title { margin: 0 0 .5rem; }
.mctx-pdp-summary .woocommerce-product-rating { margin-bottom: .6rem; font-size: .8125rem; }
.mctx-pdp-summary .price {
	display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
	font-size: 2rem !important; line-height: 1.2; margin-bottom: .5rem;
}
.mctx-pdp-summary .price del { font-size: .875rem; opacity: 1; }
.mctx-pdp-summary .price ins { text-decoration: none; }
.mctx-pdp-summary .woocommerce-product-details__short-description { font-size: .875rem; color: var(--mctx-muted-fg); margin-bottom: 1rem; }
.mctx-pdp-summary form.cart { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.mctx-pdp-summary form.cart .quantity { display: inline-flex; }
.mctx-pdp-summary form.cart .quantity input.qty {
	width: 4.5rem; padding: .6rem; text-align: center;
	border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); font: inherit;
}
.mctx-pdp-summary form.cart button.single_add_to_cart_button {
	flex: 1 1 12rem; padding: .75rem 1.5rem !important; font-size: .9375rem !important;
}
.mctx-pdp-summary .product_meta { font-size: .75rem; color: var(--mctx-muted-fg); border-top: 1px solid var(--mctx-border); padding-top: .75rem; }
.mctx-pdp-summary .product_meta a { color: var(--mctx-primary); }

.mctx-pdp-tabs .woocommerce-tabs { padding: 0; }
.mctx-pdp-tabs .woocommerce-tabs .panel { padding-top: 1rem; }
.mctx-pdp-tabs h2 { font-family: var(--mctx-font-display); font-size: 1.125rem; margin: 0 0 .75rem; }
.mctx-pdp-tabs table.shop_attributes th { width: 40%; background: var(--mctx-muted); }
.mctx-pdp-tabs .related, .mctx-pdp-tabs .upsells { margin-top: 1.75rem; }
.mctx-pdp-tabs ul.products {
	display: grid !important; gap: .5rem;
	grid-template-columns: repeat(2, minmax(0,1fr)); margin: 0 !important;
}
@media (min-width: 640px)  { .mctx-pdp-tabs ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px) { .mctx-pdp-tabs ul.products { grid-template-columns: repeat(5, minmax(0,1fr)); } }
.mctx-pdp-tabs ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }

/* 40.3 — ARCHIVE */
.mctx-woo-pagination { margin-top: 1.25rem; }
.mctx-woo-pagination .woocommerce-pagination ul {
	display: flex; gap: .3rem; justify-content: center; border: 0 !important; flex-wrap: wrap;
}
.mctx-woo-pagination .woocommerce-pagination li { border: 0 !important; }
.mctx-woo-pagination .page-numbers {
	min-width: 2rem; height: 2rem; padding-inline: .5rem;
	display: inline-grid; place-items: center;
	border: 1px solid var(--mctx-border) !important; border-radius: var(--mctx-radius);
	background: #fff; font-size: .8125rem; color: var(--mctx-fg);
}
.mctx-woo-pagination .page-numbers.current {
	background: var(--mctx-accent) !important; border-color: var(--mctx-accent) !important; color: #fff !important;
}

/* 40.4 — CART */
.mctx-btn-inline { display: inline-block !important; width: auto !important; margin-top: 0 !important; }
.mctx-cartwrap .mctx-carttable { border: 0 !important; }
.mctx-cartwrap .mctx-carttable td.actions {
	display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
	background: var(--mctx-muted); border-radius: var(--mctx-radius);
}
.mctx-coupon-row { display: flex; gap: .4rem; flex-wrap: wrap; }
.mctx-coupon-row input {
	padding: .5rem .75rem; border: 1px solid var(--mctx-border);
	border-radius: var(--mctx-radius); font: inherit; font-size: .8125rem; width: 12rem;
}
.mctx-cartwrap .quantity input.qty {
	width: 4rem; padding: .45rem; text-align: center;
	border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); font: inherit; font-size: .8125rem;
}
.mctx-cartwrap a.remove {
	color: var(--mctx-muted-fg) !important; background: none !important;
	font-size: 1rem !important; width: auto !important; height: auto !important;
}
.mctx-cartwrap a.remove:hover { color: var(--mctx-accent-ink) !important; }
.mctx-cartwrap .cart_totals h2 { display: none; }
.mctx-cartwrap .wc-proceed-to-checkout { padding: 0; margin-top: .75rem; }
.mctx-cartwrap .wc-proceed-to-checkout .checkout-button {
	display: block !important; width: 100%; text-align: center;
	background: var(--mctx-accent) !important; font-size: .9375rem !important;
}
.mctx-cartwrap .cross-sells { display: none; }

/* 40.5 — CHECKOUT */
.mctx-cofields .form-row { margin-bottom: .85rem; padding: 0; }
.mctx-cofields .form-row-first, .mctx-cofields .form-row-last { width: 100%; float: none; }
@media (min-width: 640px) {
	.mctx-cofields { display: grid; gap: 0 .75rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
	.mctx-cofields .form-row-wide, .mctx-cofields h3, .mctx-cofields .woocommerce-account-fields,
	.mctx-cofields #ship-to-different-address { grid-column: 1 / -1; }
}
.mctx-cofields h3 { font-family: var(--mctx-font-display); font-size: 1rem; margin: .5rem 0 .75rem; }
.mctx-co #order_review { padding: 0; border: 0; }
.mctx-co .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.mctx-co .woocommerce-checkout-review-order-table th,
.mctx-co .woocommerce-checkout-review-order-table td {
	padding: .5rem 0; font-size: .875rem; border-bottom: 1px solid var(--mctx-border); text-align: start;
}
.mctx-co .woocommerce-checkout-review-order-table tfoot .order-total th,
.mctx-co .woocommerce-checkout-review-order-table tfoot .order-total td {
	font-size: 1.05rem; font-weight: 700; border-bottom: 0; padding-top: .85rem;
}
.mctx-co .woocommerce-checkout-review-order-table tfoot .order-total td { color: var(--mctx-accent-ink); font-family: var(--mctx-font-display); }
.mctx-co #payment { background: transparent !important; border-radius: 0; }
.mctx-co #payment ul.payment_methods { padding: 0 !important; border: 0 !important; display: grid; gap: .5rem; }
@media (min-width: 640px) { .mctx-co #payment ul.payment_methods { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.mctx-co #payment ul.payment_methods li {
	background: #fff; border: 1px solid var(--mctx-border);
	border-radius: var(--mctx-radius); padding: .85rem; margin: 0;
}
.mctx-co #payment ul.payment_methods li label { font-size: .875rem; font-weight: 700; color: var(--mctx-fg); }
.mctx-co #payment ul.payment_methods li .payment_box {
	background: var(--mctx-muted) !important; border-radius: var(--mctx-radius);
	font-size: .75rem; color: var(--mctx-muted-fg); margin-top: .5rem;
}
.mctx-co #payment ul.payment_methods li .payment_box::before { display: none !important; }
.mctx-co #payment div.form-row.place-order { padding: 1rem 0 0; margin: 0; }
.mctx-co #payment #place_order {
	display: block; width: max-content; margin-inline: auto;
	padding: .8rem 3rem !important; font-size: .9375rem !important;
}
.mctx-co .woocommerce-terms-and-conditions-wrapper { font-size: .75rem; color: var(--mctx-muted-fg); }

/* 40.6 — MY ACCOUNT */
.mctx-woo .woocommerce-account .woocommerce {
	display: grid; gap: .75rem; grid-template-columns: minmax(0,1fr); align-items: start;
}
@media (min-width: 1024px) {
	.mctx-woo .woocommerce-account .woocommerce { grid-template-columns: minmax(0,1fr) 16rem; }
	.mctx-acc-nav { order: 2; }
	.mctx-woo .woocommerce-MyAccount-content { order: 1; }
}
.mctx-acc-nav {
	float: none !important; width: 100% !important;
	background: #fff; border: 1px solid var(--mctx-border);
	border-radius: var(--mctx-radius); padding: 1rem;
}
.mctx-acc-user { display: flex; align-items: center; gap: .65rem; padding-bottom: .85rem; margin-bottom: .5rem; border-bottom: 1px solid var(--mctx-border); }
.mctx-acc-avatar {
	width: 2.75rem; height: 2.75rem; border-radius: 999px; flex-shrink: 0;
	display: grid; place-items: center; background: var(--mctx-gradient-primary); color: #fff;
}
.mctx-acc-avatar.mctx-acc-avatar svg { width: 1.35rem; height: 1.35rem; }
.mctx-acc-hi { display: block; font-size: .6875rem; color: var(--mctx-muted-fg); }
.mctx-acc-name { display: block; font-size: .875rem; font-weight: 700; color: var(--mctx-fg); }
.mctx-acc-nav ul { list-style: none; margin: 0; padding: 0; }
.mctx-acc-nav li { border: 0; margin: 0; }
.mctx-acc-nav li a {
	display: flex; align-items: center; gap: .6rem;
	padding: .6rem .65rem; border-radius: var(--mctx-radius);
	font-size: .875rem; font-weight: 600; color: var(--mctx-fg);
}
.mctx-acc-nav li a:hover { background: var(--mctx-muted); color: var(--mctx-primary); }
.mctx-acc-nav li.is-active > a,
.mctx-acc-nav li.woocommerce-MyAccount-navigation-link--dashboard.is-active > a {
	background: var(--mctx-primary); color: #fff;
}
.mctx-acc-nav li.is-active > a .mctx-acc-icon { color: #fff; }
.mctx-acc-icon { color: var(--mctx-primary); flex-shrink: 0; }
.mctx-acc-icon.mctx-acc-icon svg { width: 1.05rem; height: 1.05rem; }
.mctx-acc-help { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--mctx-border); }
.mctx-acc-help h4 { font-family: var(--mctx-font-display); font-size: .875rem; margin: 0 0 .35rem; color: var(--mctx-fg); }

.mctx-woo .woocommerce-MyAccount-content {
	float: none !important; width: 100% !important;
	background: #fff; border: 1px solid var(--mctx-border);
	border-radius: var(--mctx-radius); padding: 1.25rem;
}
.mctx-woo .woocommerce-MyAccount-content h2,
.mctx-woo .woocommerce-MyAccount-content legend {
	font-family: var(--mctx-font-display); font-size: 1.125rem; margin: 0 0 1rem; color: var(--mctx-fg);
}
.mctx-woo .woocommerce-MyAccount-content p { font-size: .875rem; color: var(--mctx-muted-fg); }
.mctx-woo .woocommerce-MyAccount-content .woocommerce-Address {
	border: 1px solid var(--mctx-border); border-radius: var(--mctx-radius); padding: 1rem; margin-bottom: .75rem;
}
.mctx-woo .woocommerce-MyAccount-content address { font-style: normal; font-size: .875rem; line-height: 1.9; }
.mctx-woo .woocommerce-orders-table td, .mctx-woo .woocommerce-orders-table th { font-size: .8125rem; }
.mctx-woo .woocommerce-form-login, .mctx-woo .woocommerce-form-register {
	border: 1px solid var(--mctx-border) !important; border-radius: var(--mctx-radius);
	padding: 1.25rem !important; background: #fff;
}
.mctx-woo .woocommerce-form-login label, .mctx-woo .woocommerce-form-register label {
	font-size: .75rem; font-weight: 600; color: var(--mctx-muted-fg);
}
.mctx-woo .woocommerce-form-login .woocommerce-form-login__submit,
.mctx-woo .woocommerce-form-register button { width: 100%; }

/* 40.7 — sticky bar must never sit on top of the footer or the WA button */
body.single-product { padding-bottom: 5rem; }
body.single-product .mctx-chat { bottom: 5.5rem; }