/* ==========================================================================
   Muffleap — macOS design tokens × Thmanyah typography (dark, RTL)
   ========================================================================== */

/* ----- Thmanyah Sans (UI + body) ----- */
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:300;font-display:swap;
	src:url("../fonts/thmanyahsans-Light.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:400;font-display:swap;
	src:url("../fonts/thmanyahsans-Regular.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:500;font-display:swap;
	src:url("../fonts/thmanyahsans-Medium.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:700;font-display:swap;
	src:url("../fonts/thmanyahsans-Bold.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Sans";font-style:normal;font-weight:900;font-display:swap;
	src:url("../fonts/thmanyahsans-Black.woff2") format("woff2")}

/* ----- Thmanyah Serif Text (long-form prose) ----- */
@font-face{font-family:"Thmanyah Serif Text";font-style:normal;font-weight:300;font-display:swap;
	src:url("../fonts/thmanyahseriftext-Light.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Serif Text";font-style:normal;font-weight:400;font-display:swap;
	src:url("../fonts/thmanyahseriftext-Regular.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Serif Text";font-style:normal;font-weight:500;font-display:swap;
	src:url("../fonts/thmanyahseriftext-Medium.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Serif Text";font-style:normal;font-weight:700;font-display:swap;
	src:url("../fonts/thmanyahseriftext-Bold.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Serif Text";font-style:normal;font-weight:900;font-display:swap;
	src:url("../fonts/thmanyahseriftext-Black.woff2") format("woff2")}

/* ----- Thmanyah Serif Display (hero + headlines) ----- */
@font-face{font-family:"Thmanyah Serif Display";font-style:normal;font-weight:300;font-display:swap;
	src:url("../fonts/thmanyahserifdisplay-Light.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Serif Display";font-style:normal;font-weight:400;font-display:swap;
	src:url("../fonts/thmanyahserifdisplay-Regular.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Serif Display";font-style:normal;font-weight:500;font-display:swap;
	src:url("../fonts/thmanyahserifdisplay-Medium.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Serif Display";font-style:normal;font-weight:700;font-display:swap;
	src:url("../fonts/thmanyahserifdisplay-Bold.woff2") format("woff2")}
@font-face{font-family:"Thmanyah Serif Display";font-style:normal;font-weight:900;font-display:swap;
	src:url("../fonts/thmanyahserifdisplay-Black.woff2") format("woff2")}

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root{
	/* ----- Color (macOS dark) ----- */
	--ds-bg:#1C1C1E;
	--ds-bg-2:#2C2C2E;
	--ds-bg-3:#3A3A3C;
	--ds-elevated:#2C2C2E;
	--ds-text:#F5F5F7;
	--ds-text-2:#98989D;
	--ds-text-3:#636366;
	--ds-border:rgba(255,255,255,.08);
	--ds-border-strong:rgba(255,255,255,.15);
	--ds-surface-hover:rgba(255,255,255,.06);
	--ds-surface-active:rgba(255,255,255,.1);

	/* System accent — blue, dark variant */
	--ds-accent:#0A84FF;
	--ds-accent-hover:#409CFF;
	--ds-accent-rgb:10,132,255;

	/* System accent family (used sparingly) */
	--ds-blue:#0A84FF;
	--ds-green:#30D158;
	--ds-red:#FF453A;
	--ds-orange:#FF9F0A;
	--ds-yellow:#FFD60A;
	--ds-purple:#BF5AF2;
	--ds-pink:#FF375F;
	--ds-teal:#64D2FF;

	/* ----- Radii ----- */
	--ds-r-window:10px;
	--ds-r-panel:12px;
	--ds-r-card:8px;
	--ds-r-control:6px;   /* toolbar icon buttons, small controls, inputs */
	--ds-r-button:999px;  /* primary push buttons (capsule, like macOS sheets) */
	--ds-r-tag:4px;

	/* ----- Spacing (8px grid) ----- */
	--ds-s-1:4px;
	--ds-s-2:8px;
	--ds-s-3:12px;
	--ds-s-4:16px;
	--ds-s-5:20px;
	--ds-s-6:24px;
	--ds-s-8:32px;
	--ds-s-10:40px;
	--ds-s-12:48px;
	--ds-s-16:64px;
	--ds-s-20:80px;

	/* ----- Shadows (dark — layered with 0.5px hairline) ----- */
	--ds-shadow-sm: 0 0 0 0.5px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
	--ds-shadow-md: 0 0 0 0.5px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.35);
	--ds-shadow-lg: 0 0 0 0.5px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.3), 0 8px 30px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.25);

	/* ----- Motion ----- */
	--ds-ease-out:cubic-bezier(.25,.46,.45,.94);
	--ds-ease-spring:cubic-bezier(.34,1.56,.64,1);
	--ds-ease-smooth:cubic-bezier(.4,0,.2,1);
	--ds-dur-fast:150ms;
	--ds-dur-normal:250ms;
	--ds-dur-slow:400ms;

	/* ----- Type ----- */
	--ds-font-sans:"Thmanyah Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
	--ds-font-serif:"Thmanyah Serif Text","Iowan Old Style","Georgia",serif;
	--ds-font-display:"Thmanyah Serif Display","Iowan Old Style","Georgia",serif;
	--ds-font-mono:"SF Mono","Menlo","Monaco","Courier New",monospace;

	/* ----- Layout ----- */
	--ds-max:1160px;
	--ds-prose:680px;
}

/* ==========================================================================
   Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
	margin:0;
	font-family:var(--ds-font-sans);
	font-size:15px;
	line-height:1.7;
	color:var(--ds-text);
	background:var(--ds-bg);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-rendering:optimizeLegibility;
	font-feature-settings:"kern" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ds-accent);text-decoration:none;transition:color var(--ds-dur-fast) var(--ds-ease-out)}
a:hover,a:focus-visible{color:var(--ds-accent-hover)}
a:focus-visible{outline:2px solid var(--ds-accent);outline-offset:2px;border-radius:var(--ds-r-tag)}

h1,h2,h3,h4,h5,h6{
	font-family:var(--ds-font-display);
	font-weight:700;
	color:var(--ds-text);
	margin:0 0 .5em;
	letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,3.2vw + 1rem,3.25rem);line-height:1.15;font-weight:900}
h2{font-size:clamp(1.5rem,1.8vw + .6rem,2.125rem);line-height:1.2}
h3{font-size:1.25rem;line-height:1.3}
h4{font-size:1.0625rem;line-height:1.35}
p{margin:0 0 1em}
hr{border:0;height:1px;background:var(--ds-border);margin:2.5rem 0}
code,pre,kbd,samp{font-family:var(--ds-font-mono)}
::selection{background:rgba(var(--ds-accent-rgb),.35);color:var(--ds-text)}

.container{max-width:var(--ds-max);padding-inline:var(--ds-s-6);margin-inline:auto}
.container--prose{max-width:var(--ds-prose)}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.skip-link{position:absolute;inset-inline-start:-9999px;top:0;background:var(--ds-text);color:var(--ds-bg);padding:var(--ds-s-2) var(--ds-s-3);z-index:1000;border-radius:var(--ds-r-button);font-weight:600}
.skip-link:focus{inset-inline-start:8px;top:8px}

/* ==========================================================================
   Header (vibrancy)
   ========================================================================== */
.site-header{
	position:sticky;top:0;z-index:50;
	background:rgba(28,28,30,.72);
	backdrop-filter:saturate(180%) blur(20px);
	-webkit-backdrop-filter:saturate(180%) blur(20px);
	border-bottom:0.5px solid var(--ds-border);
}
.site-header__inner{display:flex;align-items:center;gap:var(--ds-s-6);min-height:52px}
.site-branding{display:inline-flex;align-items:center;flex-shrink:0}
.site-title{
	font-family:var(--ds-font-display);
	font-weight:900;
	font-size:1.0625rem;
	color:var(--ds-text);
	letter-spacing:-.01em;
}
.site-title:hover{color:var(--ds-text);text-decoration:none}

/* Custom logo — capped by the Customizer "Logo height" control */
.custom-logo-link{display:inline-flex;align-items:center;line-height:0}
.custom-logo-link:hover{text-decoration:none}
.custom-logo{
	display:block;
	max-height:var(--muffleap-logo-h, 36px);
	width:auto;height:auto;
	object-fit:contain;
}

.main-navigation{flex:1;display:flex;justify-content:center}
.main-navigation ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--ds-s-6)}
.main-navigation a{
	color:var(--ds-text-2);
	font-weight:500;
	font-size:.9375rem;
	padding:var(--ds-s-1) var(--ds-s-3);
	border-radius:var(--ds-r-control);
	transition:background var(--ds-dur-fast) var(--ds-ease-out),color var(--ds-dur-fast) var(--ds-ease-out);
}
.main-navigation a:hover{color:var(--ds-text);background:var(--ds-surface-hover);text-decoration:none}
.main-navigation .current-menu-item > a,.main-navigation .current_page_item > a{color:var(--ds-text)}

.main-navigation .sub-menu{
	position:absolute;
	background:rgba(44,44,46,.85);
	backdrop-filter:saturate(180%) blur(20px);
	-webkit-backdrop-filter:saturate(180%) blur(20px);
	border:0.5px solid var(--ds-border-strong);
	border-radius:var(--ds-r-panel);
	box-shadow:var(--ds-shadow-md);
	padding:var(--ds-s-1);
	min-width:220px;
	display:none;flex-direction:column;gap:0;
	margin-top:var(--ds-s-2);
}
.main-navigation li{position:relative}
.main-navigation li:hover > .sub-menu,.main-navigation li:focus-within > .sub-menu{display:flex}
.main-navigation .sub-menu a{display:block;padding:var(--ds-s-2) var(--ds-s-3);border-radius:var(--ds-r-control);font-size:.875rem}

/* Circular icon-button shared by the mobile hamburger and the mobile CTA
   (same visual language as SF Symbols menu items). */
.menu-toggle{
	display:none;
	width:40px;height:40px;
	align-items:center;justify-content:center;
	border:0.5px solid var(--ds-border-strong);
	background:var(--ds-bg-2);
	color:var(--ds-text);
	border-radius:50%;
	cursor:pointer;padding:0;
	transition:background var(--ds-dur-fast) var(--ds-ease-out);
}
.menu-toggle:hover{background:var(--ds-bg-3)}
.menu-toggle__icon{display:block;width:20px;height:20px}

.site-header__cta{margin-inline-start:auto}
/* Icon in the header CTA button. Visible on desktop alongside the text
   (same treatment as the hero CTA). On mobile, the icon/text visibility is
   controlled by body[data-mobile-cta] (see the responsive section below). */
.site-header__cta-link{gap:var(--ds-s-2)}
.site-header__cta-icon{display:inline-flex;align-items:center;line-height:0}
.site-header__cta-icon svg{width:14px;height:14px}

/* ==========================================================================
   Buttons
   ========================================================================== */
.button{
	display:inline-flex;align-items:center;justify-content:center;
	gap:var(--ds-s-2);
	padding:var(--ds-s-2) var(--ds-s-5);
	font-family:inherit;
	font-size:.875rem;
	font-weight:500;
	line-height:1;
	border-radius:var(--ds-r-button);
	border:0.5px solid transparent;
	white-space:nowrap;
	cursor:pointer;
	transition:background var(--ds-dur-fast) var(--ds-ease-out),color var(--ds-dur-fast) var(--ds-ease-out),transform var(--ds-dur-fast) var(--ds-ease-out),box-shadow var(--ds-dur-fast) var(--ds-ease-out);
	text-decoration:none;
}
.button:active{transform:scale(.98)}
.button--sm{padding:calc(var(--ds-s-1) + 2px) var(--ds-s-4);font-size:.8125rem}
.button--lg{padding:var(--ds-s-3) var(--ds-s-6);font-size:.9375rem}

/* CTA colors resolved entirely in PHP — see muffleap_customize_css().
   --muffleap-cta-bg and --muffleap-cta-color are always defined, so no
   CSS-level fallback is needed here. */
.button--primary{
	background:var(--muffleap-cta-bg);
	color:var(--muffleap-cta-color);
	box-shadow:0 1px 0 rgba(0,0,0,.2) inset, 0 0 0 0.5px rgba(0,0,0,.2);
}
.button--primary:hover{
	background:var(--muffleap-cta-bg);
	color:var(--muffleap-cta-color);
	filter:brightness(1.08);
	text-decoration:none;
}

.button--ghost{background:var(--ds-bg-2);color:var(--ds-text);border-color:var(--ds-border-strong)}
.button--ghost:hover{background:var(--ds-bg-3);color:var(--ds-text);text-decoration:none}

/* ==========================================================================
   Hero (panel with vibrancy + subtle material)
   ========================================================================== */
.hero{position:relative;padding-block:var(--ds-s-20) calc(var(--ds-s-20) + var(--ds-s-6));overflow:hidden;isolation:isolate}
.hero__bg{
	position:absolute;inset:0;z-index:-1;
	background:
		radial-gradient(900px 500px at 80% -10%, rgba(var(--ds-accent-rgb),.22), transparent 60%),
		radial-gradient(700px 500px at 10% 110%, rgba(191,90,242,.18), transparent 60%),
		linear-gradient(180deg, #1C1C1E 0%, #141416 100%);
}
.hero__bg::after{
	content:"";position:absolute;inset:0;
	background-image:radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
	background-size:22px 22px;
	mask-image:radial-gradient(ellipse at center, #000 40%, transparent 75%);
	-webkit-mask-image:radial-gradient(ellipse at center, #000 40%, transparent 75%);
}
.hero__inner{position:relative;max-width:var(--ds-max);margin-inline:auto}

.hero__eyebrow{
	font-family:var(--ds-font-sans);
	font-size:.8125rem;
	color:var(--ds-accent);
	font-weight:500;
	margin-bottom:var(--ds-s-5);
	display:inline-flex;align-items:center;gap:var(--ds-s-2);
	padding:var(--ds-s-1) var(--ds-s-3);
	border:0.5px solid var(--ds-border-strong);
	border-radius:999px;
	background:rgba(var(--ds-accent-rgb),.12);
}
.hero__title{
	font-family:var(--ds-font-display);
	font-weight:900;
	margin-bottom:var(--ds-s-5);
	letter-spacing:-.02em;
	line-height:1.08;
	font-size:clamp(2.5rem,4.5vw + 1rem,4.5rem);
}
.hero__subtitle{font-size:1.0625rem;color:var(--ds-text-2);margin:0 0 var(--ds-s-8);line-height:1.8;max-width:560px}
.hero__actions{display:flex;gap:var(--ds-s-3);flex-wrap:wrap}

/* Split layout (text + portrait) */
.hero--split{text-align:start}
.hero--split .hero__inner{
	display:grid;
	grid-template-columns:1.15fr .85fr;
	gap:var(--ds-s-16);
	align-items:center;
}
.hero__text{min-width:0}
.hero__image{
	--portrait-max:460px;
	--portrait-ratio:4/5;
	position:relative;display:flex;justify-content:center;align-items:center;
}
.hero__image--size-sm{--portrait-max:320px}
.hero__image--size-md{--portrait-max:460px}
.hero__image--size-lg{--portrait-max:560px}
.hero__image--size-xl{--portrait-max:680px}
.hero__image--ratio-4-5{--portrait-ratio:4/5}
.hero__image--ratio-3-4{--portrait-ratio:3/4}
.hero__image--ratio-1-1{--portrait-ratio:1/1}
.hero__image--ratio-5-4{--portrait-ratio:5/4}
.hero__image--ratio-16-9{--portrait-ratio:16/9}
.hero__portrait{
	width:100%;
	max-width:var(--portrait-max,460px);
	aspect-ratio:var(--portrait-ratio,4/5);
	border-radius:var(--ds-r-panel);
	object-fit:cover;
	box-shadow:var(--ds-shadow-lg);
	border:0.5px solid var(--ds-border-strong);
}
.hero__portrait--placeholder{
	display:flex;align-items:center;justify-content:center;
	background:
		radial-gradient(circle at 30% 20%, rgba(var(--ds-accent-rgb),.35), transparent 55%),
		radial-gradient(circle at 70% 80%, rgba(191,90,242,.3), transparent 55%),
		linear-gradient(180deg, #2C2C2E, #1A1A1C);
	position:relative;overflow:hidden;
}
.hero__portrait--placeholder::before{
	content:"";position:absolute;inset:0;
	background:radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.5) 95%);
}
.hero__portrait-letter{
	position:relative;z-index:1;
	font-family:var(--ds-font-display);
	font-weight:900;font-size:clamp(6rem,14vw,10rem);
	color:rgba(255,255,255,.92);
	letter-spacing:-.02em;line-height:1;
}

/* Button with icon. Icon sits on the inline-start side (RIGHT in RTL, LEFT in LTR) */
.button--with-icon{padding-inline:var(--ds-s-5) var(--ds-s-6);direction:inherit}
.button--with-icon .button__icon{width:16px;height:16px;flex-shrink:0;order:0}
.button--with-icon > span{order:1}

/* ==========================================================================
   Featured in
   ========================================================================== */
.section--featured-in{padding-block:var(--ds-s-10);background:var(--ds-bg-2);border-top:0.5px solid var(--ds-border);border-bottom:0.5px solid var(--ds-border)}
.featured-in__label{
	text-align:center;
	color:var(--ds-text-2);
	font-size:.8125rem;font-weight:500;
	letter-spacing:.02em;
	margin:0 0 var(--ds-s-5);
	font-family:var(--ds-font-sans);
}
.featured-in__grid{
	display:flex;flex-wrap:wrap;
	justify-content:center;align-items:center;
	gap:var(--ds-s-8) var(--ds-s-12);
}
.featured-in__item{
	font-family:var(--ds-font-display);
	font-weight:500;
	font-size:1.125rem;
	color:var(--ds-text-2);
	opacity:.75;
	transition:opacity var(--ds-dur-fast) var(--ds-ease-out),color var(--ds-dur-fast) var(--ds-ease-out),transform var(--ds-dur-fast) var(--ds-ease-out);
	text-decoration:none;
}
a.featured-in__item:hover{opacity:1;color:var(--ds-text);transform:translateY(-1px);text-decoration:none}

/* ==========================================================================
   Sections
   ========================================================================== */
.section{padding-block:var(--ds-s-20)}
.section--narrow{padding-block:var(--ds-s-16)}
.section--center{text-align:center}
.section--features{background:var(--ds-bg-2)}
.section--cta{padding-block:var(--ds-s-10) var(--ds-s-20)}

.section-header{text-align:center;max-width:640px;margin:0 auto var(--ds-s-12)}
.section-eyebrow{font-size:.8125rem;color:var(--ds-accent);font-weight:500;margin:0 0 var(--ds-s-2);font-family:var(--ds-font-sans)}
.section-title{margin:0;font-family:var(--ds-font-display);letter-spacing:-.015em}

/* ==========================================================================
   Cards — macOS 8px radius, 0.5px hairline, subtle elevation on hover
   ========================================================================== */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--ds-s-4)}
.feature-card{
	background:var(--ds-elevated);
	border:0.5px solid var(--ds-border);
	border-radius:var(--ds-r-card);
	padding:var(--ds-s-5);
	transition:transform var(--ds-dur-normal) var(--ds-ease-out),border-color var(--ds-dur-normal) var(--ds-ease-out),box-shadow var(--ds-dur-normal) var(--ds-ease-out),background-color var(--ds-dur-normal) var(--ds-ease-out);
}
.feature-card:hover{transform:translateY(-2px);border-color:var(--ds-border-strong);box-shadow:var(--ds-shadow-md);background:var(--ds-bg-3)}
.feature-card__icon{
	width:36px;height:36px;
	border-radius:var(--ds-r-card);
	background:linear-gradient(135deg,var(--ds-blue),var(--ds-purple));
	margin-bottom:var(--ds-s-4);position:relative;
	box-shadow:inset 0 0 0 0.5px rgba(255,255,255,.2);
}
.feature-card__icon::after{content:"";position:absolute;inset:0;background:var(--ds-icon) center/50% no-repeat}
.feature-card__icon[data-icon="bolt"]{--ds-icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>')}
.feature-card__icon[data-icon="grid"]{--ds-icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z"/></svg>')}
.feature-card__icon[data-icon="sliders"]{--ds-icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round"><path d="M4 6h10M4 12h16M4 18h6M16 4v4M10 10v4M8 16v4"/></svg>')}
.feature-card__title{margin:0 0 var(--ds-s-1);font-family:var(--ds-font-display);font-size:1.125rem;font-weight:700}
.feature-card__body{color:var(--ds-text-2);margin:0;font-size:.9375rem;line-height:1.55}

/* ==========================================================================
   Featured Topics — 7 square tiles
   ========================================================================== */
.section--featured-topics{padding-block:var(--ds-s-12)}
.featured-topics__header{
	display:flex;align-items:center;gap:var(--ds-s-3);
	justify-content:flex-start;
	margin-bottom:var(--ds-s-6);
	padding-bottom:var(--ds-s-5);
	border-bottom:0.5px solid var(--ds-border);
}
.featured-topics__title{
	margin:0;
	font-family:var(--ds-font-display);
	font-weight:700;
	font-size:clamp(1.25rem, 1.6vw + .5rem, 1.75rem);
	letter-spacing:-.01em;
}
.featured-topics__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:36px;height:36px;
	color:var(--ds-text);
	opacity:.9;
}
.featured-topics__grid{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	gap:var(--ds-s-3);
}
.featured-topics__grid .topic-card{
	flex:1 1 180px;
	min-width:160px;
	max-width:240px;
}
.topic-card{
	position:relative;
	display:block;
	aspect-ratio:1/1;
	border-radius:var(--ds-r-panel);
	overflow:hidden;
	background:var(--ds-bg-2);
	border:0.5px solid var(--ds-border);
	text-decoration:none;color:inherit;
	isolation:isolate;
	transition:transform var(--ds-dur-normal) var(--ds-ease-out),
		border-color var(--ds-dur-normal) var(--ds-ease-out),
		box-shadow var(--ds-dur-normal) var(--ds-ease-out);
}
.topic-card:hover{
	transform:translateY(-3px);
	border-color:var(--ds-border-strong);
	box-shadow:var(--ds-shadow-md);
	color:inherit;text-decoration:none;
}
.topic-card__media{position:absolute;inset:0;z-index:0}
.topic-card__media img,.topic-card__img{
	width:100%;height:100%;
	object-fit:cover;
	display:block;
	transition:transform var(--ds-dur-slow) var(--ds-ease-out);
}
.topic-card:hover .topic-card__img{transform:scale(1.04)}
.topic-card__placeholder{width:100%;height:100%}
.topic-card__placeholder .ds-placeholder__letter{font-size:clamp(2.5rem, 4vw, 4rem)}
.topic-card__overlay{
	position:absolute;inset:0;z-index:1;
	display:flex;align-items:flex-end;
	padding:var(--ds-s-3);
	background:linear-gradient(180deg, transparent 45%, rgba(0,0,0,.78) 100%);
	pointer-events:none;
}
.topic-card__title{
	margin:0;
	color:#fff;
	font-family:var(--ds-font-display);
	font-weight:700;
	font-size:.9375rem;line-height:1.3;
	text-shadow:0 1px 2px rgba(0,0,0,.4);
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

@media (max-width:560px){
	.featured-topics__grid .topic-card{flex-basis:calc((100% - var(--ds-s-3)) / 2);min-width:0}
}

/* Portfolio + blog cards: 2-per-row then 1-per-row on smaller screens */
@media (max-width:980px){
	.portfolio-card,.post-grid > .post-card{
		flex-basis:calc((100% - var(--ds-s-4)) / 2);
		max-width:calc((100% - var(--ds-s-4)) / 2);
	}
}
@media (max-width:640px){
	.portfolio-card,.post-grid > .post-card{
		flex-basis:100%;max-width:100%;
	}
}

/* ==========================================================================
   Portfolio & post cards
   Flex-based grid so an incomplete last row auto-centers.
   ========================================================================== */
.portfolio-grid{
	display:flex;flex-wrap:wrap;
	justify-content:center;
	gap:var(--ds-s-4);
}
.portfolio-card{
	flex:1 1 calc((100% - var(--ds-s-4) * 2) / 3);
	max-width:calc((100% - var(--ds-s-4) * 2) / 3);
	min-width:280px;
	display:block;
	background:var(--ds-elevated);
	border:0.5px solid var(--ds-border);
	border-radius:var(--ds-r-card);
	overflow:hidden;
	color:inherit;text-decoration:none;
	transition:transform var(--ds-dur-normal) var(--ds-ease-out),border-color var(--ds-dur-normal) var(--ds-ease-out),box-shadow var(--ds-dur-normal) var(--ds-ease-out);
}
.portfolio-card:hover{transform:translateY(-2px);border-color:var(--ds-border-strong);box-shadow:var(--ds-shadow-md);color:inherit;text-decoration:none}
.portfolio-card__media{aspect-ratio:3/2;overflow:hidden;background:var(--ds-bg-3)}
.portfolio-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--ds-dur-slow) var(--ds-ease-out)}
.portfolio-card:hover .portfolio-card__media img{transform:scale(1.04)}
.portfolio-card__body{padding:var(--ds-s-5)}
.portfolio-card__title{margin:0 0 var(--ds-s-2);font-size:1.375rem;line-height:1.3;font-family:var(--ds-font-display);font-weight:700}
.portfolio-card__excerpt{color:var(--ds-text-2);margin:0;font-size:.9375rem;line-height:1.55}

/* Placeholder image (gradient + letter) */
.ds-placeholder{
	width:100%;height:100%;
	display:flex;align-items:center;justify-content:center;
	color:rgba(255,255,255,.92);
	font-family:var(--ds-font-display);
	font-weight:900;font-size:3rem;
	letter-spacing:-.02em;
	text-shadow:0 1px 2px rgba(0,0,0,.25);
	position:relative;overflow:hidden;
}
.ds-placeholder::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 55%)}
.ds-placeholder__letter{position:relative;z-index:1}

/* Post cards (flex + centering — matches portfolio) */
.post-grid{
	display:flex;flex-wrap:wrap;
	justify-content:center;
	gap:var(--ds-s-5);
}
.post-grid > .post-card{
	flex:1 1 calc((100% - var(--ds-s-5) * 2) / 3);
	max-width:calc((100% - var(--ds-s-5) * 2) / 3);
	min-width:280px;
}
.post-card{
	background:var(--ds-elevated);
	border:0.5px solid var(--ds-border);
	border-radius:var(--ds-r-card);
	overflow:hidden;
	display:flex;flex-direction:column;
	transition:transform var(--ds-dur-normal) var(--ds-ease-out),border-color var(--ds-dur-normal) var(--ds-ease-out),box-shadow var(--ds-dur-normal) var(--ds-ease-out);
}
.post-card:hover{transform:translateY(-2px);border-color:var(--ds-border-strong);box-shadow:var(--ds-shadow-md)}
.post-card .post-thumbnail{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ds-bg-3)}
.post-card .post-thumbnail img{width:100%;height:100%;object-fit:cover;transition:transform var(--ds-dur-slow) var(--ds-ease-out)}
.post-card:hover .post-thumbnail img{transform:scale(1.03)}
.post-card__body{padding:var(--ds-s-5);display:flex;flex-direction:column;gap:var(--ds-s-2);flex:1}
.post-card .entry-title{font-size:1.375rem;line-height:1.3;margin:0;font-family:var(--ds-font-display);font-weight:700}
.post-card .entry-summary,
.post-card .entry-summary p{font-size:.9375rem;line-height:1.55;color:var(--ds-text-2);margin:0}
.post-card .entry-title a{color:var(--ds-text);text-decoration:none}
.post-card .entry-title a:hover{color:var(--ds-accent)}
.entry-meta{font-size:.8125rem;color:var(--ds-text-2);display:flex;align-items:center;gap:var(--ds-s-2);flex-wrap:wrap}
.entry-meta .posted-on{display:inline-flex;align-items:center;gap:var(--ds-s-1)}
.entry-meta .byline{display:inline-flex;align-items:center;gap:var(--ds-s-2)}
.entry-meta .byline__sep{color:var(--ds-text-3);font-weight:700}
.entry-meta__icon{display:inline-block;opacity:.75;flex-shrink:0;vertical-align:-2px}
.entry--single .entry-header{margin-bottom:var(--ds-s-8)}
.entry-meta--single{
	margin-top:var(--ds-s-4);
}
.entry--single .post-thumbnail{margin-bottom:var(--ds-s-10)}
.post-card__more{margin-top:auto;font-weight:500;font-size:.875rem;color:var(--ds-accent)}

/* ==========================================================================
   Unified page header — icon + title + optional subtitle.
   Used by blog archive, category/tag/author/date archives, search, 404, shop.
   ========================================================================== */
.page-header{
	display:flex;align-items:center;flex-wrap:wrap;
	gap:var(--ds-s-3) var(--ds-s-4);
	justify-content:flex-start;
	margin-bottom:var(--ds-s-10);
	padding-bottom:var(--ds-s-5);
	border-bottom:0.5px solid var(--ds-border);
}
.page-header__icon{
	display:inline-flex;align-items:center;justify-content:center;
	width:40px;height:40px;
	color:var(--ds-text);
	opacity:.9;
	flex-shrink:0;
}
.page-header__icon svg{width:22px;height:22px}
.page-header__title{
	margin:0;
	font-family:var(--ds-font-display);
	font-weight:900;
	letter-spacing:-.015em;
	font-size:clamp(1.5rem, 1.8vw + .8rem, 2.25rem);
	line-height:1.15;
	color:var(--ds-text);
}
.page-header__subtitle{
	width:100%;
	margin:var(--ds-s-2) 0 0;
	color:var(--ds-text-2);
	font-size:1rem;
	line-height:1.65;
}

/* ==========================================================================
   Blog home — editorial layout (home.php)
   ========================================================================== */
.section--blog-home{padding-block:var(--ds-s-12) var(--ds-s-16)}

/* Featured (first post on page 1). RTL: image column first = RIGHT. */
.blog-featured{
	display:grid;
	grid-template-columns:minmax(220px, 300px) 1fr;
	gap:var(--ds-s-8);
	align-items:start;
	padding-bottom:var(--ds-s-10);
	margin-bottom:var(--ds-s-10);
	border-bottom:0.5px solid var(--ds-border);
}
.blog-featured__image{
	display:block;
	aspect-ratio:1/1;
	width:100%;
	border-radius:var(--ds-r-panel);
	overflow:hidden;
	background:var(--ds-bg-2);
	border:0.5px solid var(--ds-border);
	position:relative;
	isolation:isolate;
}
.blog-featured__img,.blog-featured__placeholder{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--ds-dur-slow) var(--ds-ease-out)}
.blog-featured__image:hover .blog-featured__img{transform:scale(1.03)}
.blog-featured__body{min-width:0}
.blog-featured__title{
	font-family:var(--ds-font-display);
	font-weight:900;
	letter-spacing:-.015em;
	font-size:clamp(1.5rem, 1.8vw + .8rem, 2.25rem);
	line-height:1.2;
	margin:0 0 var(--ds-s-4);
}
.blog-featured__title a{color:var(--ds-text);text-decoration:none}
.blog-featured__title a:hover{color:var(--ds-accent)}
.blog-featured__excerpt{font-size:1rem;line-height:1.7;color:var(--ds-text-2);margin:0 0 var(--ds-s-5)}

/* Grid (rest of page 1 + all on paginated requests). RTL: image first = RIGHT. */
.blog-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:var(--ds-s-10) var(--ds-s-12);
}
.blog-card{
	display:grid;
	grid-template-columns:140px 1fr;
	gap:var(--ds-s-4);
	align-items:start;
}
.blog-card__body{min-width:0}
.blog-card__title{
	font-family:var(--ds-font-display);
	font-weight:700;
	letter-spacing:-.01em;
	font-size:1.375rem;
	line-height:1.3;
	margin:0 0 var(--ds-s-2);
}
.blog-card__title a{color:var(--ds-text);text-decoration:none}
.blog-card__title a:hover{color:var(--ds-accent)}
.blog-card__excerpt{font-size:.9375rem;line-height:1.55;color:var(--ds-text-2);margin:0 0 var(--ds-s-3)}
.blog-card__image{
	display:block;
	aspect-ratio:1/1;
	width:100%;
	border-radius:var(--ds-r-card);
	overflow:hidden;
	background:var(--ds-bg-2);
	border:0.5px solid var(--ds-border);
}
.blog-card__img,.blog-card__placeholder{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--ds-dur-slow) var(--ds-ease-out)}
.blog-card__image:hover .blog-card__img{transform:scale(1.04)}

/* Meta row */
.blog-meta{
	display:flex;align-items:center;flex-wrap:wrap;
	gap:var(--ds-s-2);
	font-size:.8125rem;color:var(--ds-text-2);
}
.blog-meta__avatar{
	width:24px;height:24px;border-radius:50%;overflow:hidden;
	flex-shrink:0;
	background:var(--ds-bg-3);
	display:inline-flex;align-items:center;justify-content:center;
}
.blog-meta__avatar img,.blog-meta__avatar-img{width:100%;height:100%;object-fit:cover;display:block}
.blog-meta__author{color:var(--ds-accent);font-weight:500;text-decoration:none}
.blog-meta__author:hover{text-decoration:underline}
.blog-meta__category{color:var(--ds-text);text-decoration:none;font-weight:500}
.blog-meta__category:hover{color:var(--ds-accent)}
.blog-meta__sep{color:var(--ds-text-3)}
.blog-meta__date{color:var(--ds-text-2)}

/* Load more */
.blog-load-more-wrap{display:flex;justify-content:center;margin-top:var(--ds-s-12)}

@media (max-width:860px){
	.blog-featured{grid-template-columns:200px 1fr;gap:var(--ds-s-5)}
	.blog-grid{grid-template-columns:1fr;gap:var(--ds-s-6)}
	.blog-card{grid-template-columns:110px 1fr;gap:var(--ds-s-4)}
}
@media (max-width:480px){
	.blog-featured{grid-template-columns:1fr;gap:var(--ds-s-4)}
	.blog-featured__image{max-width:260px}
	.blog-card{grid-template-columns:90px 1fr}
	.blog-card__excerpt{display:none}
}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
	background:linear-gradient(135deg, rgba(var(--ds-accent-rgb),.12), rgba(191,90,242,.12)), var(--ds-bg-2);
	border:0.5px solid var(--ds-border-strong);
	color:var(--ds-text);
	border-radius:var(--ds-r-panel);
	padding:var(--ds-s-10);
	display:flex;align-items:center;justify-content:space-between;gap:var(--ds-s-6);flex-wrap:wrap;
	box-shadow:var(--ds-shadow-md);
}
.cta-band__title{color:var(--ds-text);margin:0 0 var(--ds-s-2)}
.cta-band__subtitle{color:var(--ds-text-2);margin:0}

/* ==========================================================================
   Single post / page (prose uses Thmanyah Serif Text)
   ========================================================================== */
.entry--single .entry-title{font-size:clamp(2rem,2.8vw + .5rem,2.75rem);line-height:1.15}
.entry--single .entry-content,
.container--prose .entry-content{
	font-family:var(--ds-font-serif);
	font-size:1.0625rem;
	line-height:1.8;
	color:var(--ds-text);
}
.entry-content > *{margin-bottom:1.25em}
.entry-content h2,.entry-content h3{margin-top:1.5em;font-family:var(--ds-font-display)}
.entry-content img{border-radius:var(--ds-r-card)}
.entry-content code{background:var(--ds-bg-2);padding:2px var(--ds-s-1);border-radius:var(--ds-r-tag);border:0.5px solid var(--ds-border);font-size:.9em}
.entry-content pre{background:var(--ds-bg-2);padding:var(--ds-s-4);border-radius:var(--ds-r-card);border:0.5px solid var(--ds-border);overflow:auto;font-size:.875rem}

/* Customizer-driven headings (size + optional color) */
.entry-content h1{font-size:var(--muffleap-h1,36px);color:var(--muffleap-h1-color,var(--ds-text))}
.entry-content h2{font-size:var(--muffleap-h2,28px);color:var(--muffleap-h2-color,var(--ds-text))}
.entry-content h3{font-size:var(--muffleap-h3,22px);color:var(--muffleap-h3-color,var(--ds-text))}
.entry-content h4{font-size:var(--muffleap-h4,18px);color:var(--muffleap-h4-color,var(--ds-text))}

/* Beautiful blockquote — matches design system, fully customizable */
.entry-content blockquote{
	position:relative;
	font-family:var(--ds-font-display);
	font-weight:300;
	font-size:var(--muffleap-quote-size,20px);
	line-height:1.6;
	color:var(--muffleap-quote-color,var(--ds-text));
	background:var(--muffleap-quote-bg,transparent);
	border-inline-start:3px solid var(--muffleap-quote-accent,var(--ds-accent));
	border-radius:var(--ds-r-card);
	padding:var(--ds-s-4) var(--ds-s-6) var(--ds-s-4) var(--ds-s-4);
	margin:var(--ds-s-8) 0;
	font-style:normal;
	quotes:"\201C" "\201D" "\2018" "\2019";
}
.entry-content blockquote::before{
	content:open-quote;
	position:absolute;
	font-family:var(--ds-font-display);
	font-size:4rem;
	line-height:1;
	font-weight:700;
	color:var(--muffleap-quote-accent,var(--ds-accent));
	opacity:.35;
	top:-.1em;
	inset-inline-start:var(--ds-s-3);
	pointer-events:none;
}
.entry-content blockquote p{margin:0 0 .5em;font-family:inherit;font-weight:inherit;font-size:inherit;line-height:inherit;color:inherit}
.entry-content blockquote p:last-child{margin:0}
.entry-content blockquote cite{
	display:block;
	margin-top:var(--ds-s-3);
	font-family:var(--ds-font-sans);
	font-style:normal;
	font-size:.875rem;
	font-weight:500;
	color:var(--ds-text-2);
}

/* Italic / emphasis */
.entry-content em,.entry-content i{
	font-weight:var(--muffleap-italic-weight,300);
	font-size:var(--muffleap-italic-size, inherit);
	color:var(--muffleap-italic-color, inherit);
	font-style:italic;
}

.post-thumbnail{margin-bottom:var(--ds-s-6);border-radius:var(--ds-r-card);overflow:hidden}
.post-thumbnail--placeholder{aspect-ratio:2/1}

/* Legacy archive-header styles replaced by .page-header (kept for compatibility) */
.archive-header{margin-bottom:var(--ds-s-10)}

.post-nav{display:flex;justify-content:space-between;gap:var(--ds-s-4);margin-top:var(--ds-s-12);padding-top:var(--ds-s-6);border-top:0.5px solid var(--ds-border)}
.post-nav a{color:var(--ds-text);font-weight:500}
.post-nav a:hover{color:var(--ds-accent);text-decoration:none}

/* ==========================================================================
   Pagination
   ========================================================================== */
.navigation.pagination{margin-top:var(--ds-s-12);display:flex;justify-content:center}
.navigation.pagination .nav-links{display:flex;gap:var(--ds-s-1);flex-wrap:wrap}
.navigation.pagination .page-numbers{
	padding:var(--ds-s-1) var(--ds-s-3);
	border:0.5px solid var(--ds-border);
	border-radius:var(--ds-r-control);
	color:var(--ds-text);font-weight:500;text-decoration:none;
	background:var(--ds-bg-2);font-size:.875rem;
	transition:background var(--ds-dur-fast) var(--ds-ease-out);
}
.navigation.pagination .page-numbers.current{background:var(--ds-accent);color:#fff;border-color:transparent}
.navigation.pagination .page-numbers:hover{text-decoration:none;background:var(--ds-bg-3)}

/* ==========================================================================
   404
   ========================================================================== */
.error-title{
	font-family:var(--ds-font-display);
	font-size:clamp(4rem,12vw,8rem);
	margin:0;
	background:linear-gradient(135deg,var(--ds-accent),var(--ds-purple));
	-webkit-background-clip:text;background-clip:text;color:transparent;
	font-weight:900;letter-spacing:-.03em;
}
.error-text{color:var(--ds-text-2);margin-bottom:var(--ds-s-6)}

/* ==========================================================================
   Forms & Contact Form 7
   ========================================================================== */
input[type=text],input[type=email],input[type=url],input[type=password],input[type=search],input[type=number],input[type=tel],textarea,select{
	width:100%;
	padding:var(--ds-s-2) var(--ds-s-3);
	min-height:32px;
	border:0.5px solid var(--ds-border-strong);
	border-radius:var(--ds-r-control);
	font-family:inherit;font-size:.9375rem;
	background:var(--ds-bg-2);color:var(--ds-text);
	transition:border-color var(--ds-dur-fast) var(--ds-ease-out),box-shadow var(--ds-dur-fast) var(--ds-ease-out),background var(--ds-dur-fast) var(--ds-ease-out);
}
input::placeholder,textarea::placeholder{color:var(--ds-text-3)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--ds-accent);box-shadow:0 0 0 3px rgba(var(--ds-accent-rgb),.25);background:var(--ds-bg)}
.search-form{display:flex;gap:var(--ds-s-2);max-width:520px;margin:var(--ds-s-4) auto}
.search-form input[type=search]{flex:1}

/* Contact Form 7 */
.wpcf7{max-width:var(--ds-prose);margin-inline:auto}
.wpcf7-form p{margin:0 0 var(--ds-s-4)}
.wpcf7-form label{display:block;font-weight:500;font-size:.875rem;color:var(--ds-text-2);margin-bottom:var(--ds-s-1)}
.wpcf7 input[type=submit],.wpcf7-submit{
	background:var(--ds-accent);color:#fff;
	border:0;padding:var(--ds-s-3) var(--ds-s-6);
	font-family:inherit;font-size:.9375rem;font-weight:500;
	border-radius:var(--ds-r-button);cursor:pointer;
	transition:background var(--ds-dur-fast) var(--ds-ease-out),transform var(--ds-dur-fast) var(--ds-ease-out);
	box-shadow:0 0 0 0.5px rgba(0,0,0,.2);
}
.wpcf7 input[type=submit]:hover,.wpcf7-submit:hover{background:var(--ds-accent-hover)}
.wpcf7 input[type=submit]:active,.wpcf7-submit:active{transform:scale(.98)}
.wpcf7-response-output{
	margin-top:var(--ds-s-4)!important;
	padding:var(--ds-s-3) var(--ds-s-4)!important;
	border:0.5px solid var(--ds-border-strong)!important;
	border-radius:var(--ds-r-card)!important;
	background:var(--ds-bg-2);color:var(--ds-text);font-size:.875rem;
}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--ds-green)!important;background:rgba(48,209,88,.08)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output{border-color:var(--ds-red)!important;background:rgba(255,69,58,.08)}
.wpcf7-not-valid-tip{color:var(--ds-red);font-size:.8125rem;margin-top:var(--ds-s-1);display:block}

/* ==========================================================================
   Comments
   ========================================================================== */
.comments-area{margin-top:var(--ds-s-12);padding-top:var(--ds-s-6);border-top:0.5px solid var(--ds-border)}
.comment-list{list-style:none;padding:0}
.comment-list .children{list-style:none;padding-inline-start:var(--ds-s-6)}
.comment-body{
	padding:var(--ds-s-4);
	border:0.5px solid var(--ds-border);
	border-radius:var(--ds-r-card);
	margin-bottom:var(--ds-s-3);
	background:var(--ds-bg-2);
}
.comment-form p{margin-bottom:var(--ds-s-4)}
.comment-form label{display:block;font-weight:500;font-size:.875rem;color:var(--ds-text-2);margin-bottom:var(--ds-s-1)}
.comment-form .required{color:var(--ds-red)}
.comment-form textarea{min-height:140px;resize:vertical}
.form-submit{display:flex;justify-content:flex-start;margin-top:var(--ds-s-4)}
.form-submit .submit,
.comment-form input[type=submit]{
	background:var(--ds-accent);color:#fff;
	border:0;padding:var(--ds-s-3) var(--ds-s-6);
	font-family:inherit;font-size:.9375rem;font-weight:500;
	border-radius:var(--ds-r-button);cursor:pointer;
	transition:background var(--ds-dur-fast) var(--ds-ease-out),transform var(--ds-dur-fast) var(--ds-ease-out),box-shadow var(--ds-dur-fast) var(--ds-ease-out);
	box-shadow:0 0 0 0.5px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.2) inset;
	line-height:1;
}
.form-submit .submit:hover,
.comment-form input[type=submit]:hover{background:var(--ds-accent-hover);box-shadow:0 0 0 0.5px rgba(0,0,0,.2), 0 6px 16px -6px rgba(var(--ds-accent-rgb),.5)}
.form-submit .submit:active,
.comment-form input[type=submit]:active{transform:scale(.98)}

/* ==========================================================================
   Widgets & Sidebar
   ========================================================================== */
.widget{margin-bottom:var(--ds-s-6)}
.widget-title{
	margin-bottom:var(--ds-s-2);
	font-size:.8125rem;
	color:var(--ds-text-2);
	font-weight:500;
	text-transform:uppercase;
	letter-spacing:.04em;
	font-family:var(--ds-font-sans);
}
.widget ul{list-style:none;padding:0;margin:0}
.widget ul li{padding:var(--ds-s-1) 0;border-bottom:0.5px solid var(--ds-border);font-size:.9375rem}
.widget ul li:last-child{border-bottom:0}

/* Social widget ----------------------------------------------------- */
.muffleap-social{
	--social-size:36px;
	display:flex;flex-wrap:wrap;gap:var(--ds-s-2);
	list-style:none;margin:0;padding:0;
}
.muffleap-social li{padding:0!important;border:0!important}
.muffleap-social__link{
	display:inline-flex;align-items:center;justify-content:center;
	width:var(--social-size);height:var(--social-size);
	color:var(--ds-text);
	border-radius:50%;
	transition:background var(--ds-dur-fast) var(--ds-ease-out),color var(--ds-dur-fast) var(--ds-ease-out),transform var(--ds-dur-fast) var(--ds-ease-out),border-color var(--ds-dur-fast) var(--ds-ease-out);
	text-decoration:none;
}
.muffleap-social__link:hover{transform:translateY(-1px);text-decoration:none}
.muffleap-social__link svg{width:calc(var(--social-size) * .45);height:calc(var(--social-size) * .45)}

.muffleap-social--filled .muffleap-social__link{background:var(--ds-bg-3);border:0.5px solid var(--ds-border-strong)}
.muffleap-social--filled .muffleap-social__link:hover{background:var(--ds-accent);color:#fff;border-color:transparent}

.muffleap-social--outline .muffleap-social__link{background:transparent;border:0.5px solid var(--ds-border-strong)}
.muffleap-social--outline .muffleap-social__link:hover{border-color:var(--ds-accent);color:var(--ds-accent)}

.muffleap-social--plain .muffleap-social__link{background:transparent;color:var(--ds-text-2)}
.muffleap-social--plain .muffleap-social__link:hover{color:var(--ds-text)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
	background:#141416;
	color:var(--ds-text-2);
	padding-block:var(--ds-s-16) var(--ds-s-6);
	margin-top:var(--ds-s-16);
	border-top:0.5px solid var(--ds-border);
}
.site-footer a{color:var(--ds-text)}
.site-footer a:hover{color:var(--ds-text);text-decoration:none;opacity:.85}
.site-footer__widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--ds-s-8);margin-bottom:var(--ds-s-8)}
.site-footer .widget-title{color:var(--ds-text-2)}
.site-footer__bottom{
	display:flex;justify-content:space-between;align-items:center;gap:var(--ds-s-4);
	padding-top:var(--ds-s-6);border-top:0.5px solid var(--ds-border);flex-wrap:wrap;
}
.site-footer__bottom--align-justify{justify-content:space-between}
.site-footer__bottom--align-start  {justify-content:flex-start}
.site-footer__bottom--align-end    {justify-content:flex-end}
.site-footer__bottom--align-center {justify-content:center;flex-direction:column;text-align:center}
.site-footer__bottom--align-center .footer-navigation ul{justify-content:center}
.site-footer__bottom--align-start  .site-footer__copy,
.site-footer__bottom--align-end    .site-footer__copy{flex:0 1 auto}
.site-footer__copy{margin:0;font-size:.8125rem}
.footer-navigation ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--ds-s-5);font-size:.8125rem}

/* ==========================================================================
   WooCommerce — design-system override
   ========================================================================== */
.section--woocommerce{padding-block:var(--ds-s-16) var(--ds-s-20)}

/* --- Shop archive header --- */
.woocommerce-products-header{margin-bottom:var(--ds-s-6)}
.woocommerce-products-header .woocommerce-products-header__title,
.muffleap-wc .page-title{
	font-family:var(--ds-font-display);
	font-weight:900;
	letter-spacing:-.02em;
	font-size:clamp(2rem,3vw + .5rem,3rem);
	margin:0 0 var(--ds-s-4);
}
.woocommerce-breadcrumb{color:var(--ds-text-2);font-size:.8125rem;margin-bottom:var(--ds-s-4)}
.woocommerce-breadcrumb a{color:var(--ds-text-2);text-decoration:none}
.woocommerce-breadcrumb a:hover{color:var(--ds-accent)}

/* Neutralize WC's default floats on result-count + ordering, and arrange them
   on one row above the grid with sensible alignment in RTL and LTR. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering{float:none!important;margin:0!important}
.woocommerce-notices-wrapper + .woocommerce-result-count,
.woocommerce-products-header + .woocommerce-result-count,
.woocommerce .woocommerce-result-count{
	color:var(--ds-text-2);font-size:.875rem;
	display:inline-block;
	margin-inline-end:auto!important;
}
.woocommerce .woocommerce-ordering{display:inline-block}
.woocommerce .woocommerce-ordering select{
	background:var(--ds-bg-2);color:var(--ds-text);
	border:0.5px solid var(--ds-border-strong);border-radius:var(--ds-r-control);
	padding:var(--ds-s-2) var(--ds-s-3);font-size:.875rem;
	min-height:36px;
	max-width:260px;
}
/* Place result-count on one side and ordering on the other with a flex row
   injected above the product list via :has() on modern browsers, and a
   clearfix fallback on the container. */
.woocommerce .woocommerce-shop-toolbar,
.woocommerce-page .woocommerce-shop-toolbar{
	display:flex;align-items:center;justify-content:space-between;gap:var(--ds-s-4);
	margin:0 0 var(--ds-s-6);padding:0;
}
/* Fallback when toolbar wrapper isn't present: pull result-count + ordering
   onto one line by clearing floats and flexing the parent. */
.woocommerce::before,.woocommerce::after{content:"";display:table}
.woocommerce::after{clear:both}

/* --- Product grid --- */
.woocommerce ul.products{
	display:grid;
	grid-template-columns:repeat(4, minmax(0,1fr));
	gap:var(--ds-s-5);
	list-style:none;padding:0;margin:var(--ds-s-4) 0 0;
}
.woocommerce ul.products li.product{
	background:var(--ds-elevated);
	border:0.5px solid var(--ds-border);
	border-radius:var(--ds-r-card);
	padding:0;
	margin:0!important;
	list-style:none;width:auto!important;
	overflow:hidden;
	position:relative;
	display:flex;flex-direction:column;
	transition:transform var(--ds-dur-normal) var(--ds-ease-out),border-color var(--ds-dur-normal) var(--ds-ease-out),box-shadow var(--ds-dur-normal) var(--ds-ease-out);
}
.woocommerce ul.products li.product:hover{transform:translateY(-2px);border-color:var(--ds-border-strong);box-shadow:var(--ds-shadow-md)}
.woocommerce ul.products li.product > a{display:block;color:inherit;text-decoration:none}
.woocommerce ul.products li.product img{
	width:100%;height:auto;
	aspect-ratio:1/1;object-fit:cover;
	margin:0!important;border-radius:0;
	background:var(--ds-bg-2);
	transition:transform var(--ds-dur-slow) var(--ds-ease-out);
	display:block;
}
.woocommerce ul.products li.product:hover img{transform:scale(1.03)}
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title{
	font-family:var(--ds-font-display);
	font-weight:700;
	font-size:1.0625rem;
	color:var(--ds-text);
	margin:0;
	padding:var(--ds-s-4) var(--ds-s-4) var(--ds-s-2);
	line-height:1.35;
	min-height:calc(1.35em * 2 + var(--ds-s-4) + var(--ds-s-2));
}
.woocommerce ul.products li.product .price{
	display:block;
	padding:0 var(--ds-s-4) var(--ds-s-4);
	color:var(--ds-accent);
	font-weight:600;font-size:1rem;
	margin:0;
}
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price .woocommerce-Price-amount.amount[aria-hidden="true"]{color:var(--ds-text-3);font-weight:400;opacity:.8;margin-inline-end:var(--ds-s-2)}
.woocommerce ul.products li.product .price ins{text-decoration:none;background:transparent;color:var(--ds-accent)}
.woocommerce ul.products li.product .woocommerce-loop-category__title mark.count,
.woocommerce ul.products li.product .woocommerce-loop-product__title mark.count{
	background:transparent;color:var(--ds-text-2);font-size:.8125rem;margin-inline-start:var(--ds-s-1);
}
/* Pin the action button to the bottom of each card so buttons align across
   the grid regardless of title or price length. Works for both "add to cart"
   and "read more" (for non-purchasable products like 'خدمة'). */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart{
	margin:auto var(--ds-s-4) var(--ds-s-4)!important;
	margin-block-start:auto!important;
	align-self:stretch;
	text-align:center;
	display:block;
}

/* --- Sale badge --- */
.woocommerce span.onsale{
	position:absolute;top:var(--ds-s-3);inset-inline-start:auto;inset-inline-end:var(--ds-s-3);
	background:var(--ds-red);color:#fff;border-radius:999px;
	padding:4px 12px;font-size:.75rem;font-weight:600;
	min-height:0;min-width:0;line-height:1.4;border:0;margin:0;
	box-shadow:0 0 0 0.5px rgba(0,0,0,.2), 0 2px 6px rgba(0,0,0,.25);
	z-index:2;
}

/* --- Buttons (global WC button override) --- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button{
	background:var(--ds-accent)!important;color:#fff!important;
	border:0!important;border-radius:var(--ds-r-button)!important;
	padding:var(--ds-s-2) var(--ds-s-5)!important;
	font-family:inherit!important;font-weight:500!important;font-size:.875rem!important;
	line-height:1!important;
	box-shadow:0 1px 0 rgba(0,0,0,.2) inset, 0 0 0 0.5px rgba(0,0,0,.2)!important;
	transition:background var(--ds-dur-fast) var(--ds-ease-out),transform var(--ds-dur-fast) var(--ds-ease-out)!important;
	cursor:pointer;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover{background:var(--ds-accent-hover)!important}
.woocommerce a.button:active,.woocommerce button.button:active,.woocommerce input.button:active{transform:scale(.98)}

.woocommerce a.button.alt{background:var(--ds-text)!important;color:var(--ds-bg)!important}
.woocommerce a.button.alt:hover{background:#fff!important}

/* --- Single product layout ---
   DOM after our WC hooks:
     <div class="product">
       <div class="muffleap-product-card">
         <div class="woocommerce-product-gallery"> ... </div>
         <div class="summary entry-summary"> ... </div>
       </div>
       <aside class="muffleap-product-sidebar">
         <div class="woocommerce-tabs"> ... </div>
         <section class="upsells products"> ... </section>
         <section class="related products"> ... </section>
       </aside>
     </div>
   Layout is a 2-column grid: card on one side, sidebar on the other. In RTL
   the first child (card) naturally sits on the right, sidebar on the left.
   The product page uses a narrower container (900px) than the theme default
   (1160px) so the card feels compact and readable on wide screens. */
.single-product .section--woocommerce > .container{max-width:960px}

.single-product div.product{
	display:grid;
	grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
	gap:var(--ds-s-5);
	align-items:start;
	padding-block:var(--ds-s-2) var(--ds-s-6);
	max-width:100%;
}

/* --- Main card (gallery + summary wrapped together as one unit) --- */
.muffleap-product-card{
	background:var(--ds-elevated);
	border:1px solid var(--ds-border-strong);
	border-radius:var(--ds-r-panel);
	padding:var(--ds-s-5);
	box-shadow:var(--ds-shadow-md);
	display:flex;flex-direction:column;gap:var(--ds-s-4);
	min-width:0;overflow:hidden;
}

.single-product div.product .images,
.single-product div.product .woocommerce-product-gallery{
	width:100%!important;max-width:100%!important;float:none!important;margin:0!important;
	position:relative;
}
.single-product .woocommerce-product-gallery{overflow:hidden}
.single-product .woocommerce-product-gallery__wrapper{margin:0;display:block;width:100%!important;max-width:100%!important}
.single-product .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__wrapper > a,
.single-product .woocommerce-product-gallery__wrapper > div{margin:0;width:100%!important;max-width:100%!important}
.single-product .woocommerce-product-gallery__wrapper img{
	width:100%!important;max-width:100%!important;
	aspect-ratio:1/1;object-fit:cover;
	border-radius:var(--ds-r-panel);
	border:0.5px solid var(--ds-border);
	background:var(--ds-bg-2);
	display:block;
}
.single-product .woocommerce-product-gallery__trigger{
	position:absolute;top:var(--ds-s-3);inset-inline-end:var(--ds-s-3);
	background:var(--ds-bg-2);color:var(--ds-text);
	border:0.5px solid var(--ds-border-strong);
	border-radius:50%;width:36px;height:36px;
	display:flex;align-items:center;justify-content:center;
	text-indent:-9999px;
	z-index:3;
}
.single-product .woocommerce-product-gallery__trigger::before{
	content:"";position:absolute;inset:0;
	background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23F5F5F7" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>') center/16px no-repeat;
}

.single-product div.product .summary,
.single-product div.product .entry-summary{
	width:100%!important;float:none!important;margin:0!important;
	padding:0;
}
.single-product .product_title{
	font-family:var(--ds-font-display);
	font-weight:900;
	letter-spacing:-.02em;
	font-size:clamp(1.5rem,1.6vw + .6rem,2.125rem);
	line-height:1.2;
	margin:0 0 var(--ds-s-3)!important;
	color:var(--ds-text);
}
.single-product .product .price,
.single-product .product p.price,
.single-product .product span.price{
	font-size:1.75rem;font-weight:800;
	color:var(--ds-accent);
	margin:0 0 var(--ds-s-4);
	font-family:var(--ds-font-display);letter-spacing:-.02em;
}
.single-product .product .price del{
	color:var(--ds-text-3);font-weight:400;opacity:.8;
	margin-inline-end:var(--ds-s-2);font-size:1.125rem;
}
.single-product .product .price ins{text-decoration:none;background:transparent;color:var(--ds-accent);font-weight:800}

.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-product-details__short-description p{
	color:var(--ds-text-2);
	font-family:var(--ds-font-serif);
	font-size:1rem;line-height:1.75;
	margin:0 0 var(--ds-s-5);
}

/* Cart form: quantity stepper (+/-) and "add to cart" on one row. The
   muffleap-qty wrapper is inserted by main.js around the .qty input. */
.single-product form.cart{
	display:flex;align-items:stretch;flex-wrap:wrap;gap:var(--ds-s-3);
	margin:0 0 var(--ds-s-5)!important;
	padding:0;
}
.single-product form.cart .quantity{margin:0!important;display:flex}
.muffleap-qty{
	display:inline-flex;align-items:center;gap:var(--ds-s-1);
	background:var(--ds-bg-2);
	border:0.5px solid var(--ds-border-strong);
	border-radius:var(--ds-r-button);
	padding:4px;
}
.muffleap-qty__btn{
	width:32px;height:32px;border-radius:50%;
	background:rgba(var(--ds-accent-rgb),.12);
	color:var(--ds-accent);
	border:0;
	font-size:1.125rem;font-weight:600;line-height:1;
	cursor:pointer;
	display:inline-flex;align-items:center;justify-content:center;
	transition:background var(--ds-dur-fast) var(--ds-ease-out),transform var(--ds-dur-fast) var(--ds-ease-out);
}
.muffleap-qty__btn:hover{background:rgba(var(--ds-accent-rgb),.2)}
.muffleap-qty__btn:active{transform:scale(.94)}
.muffleap-qty__btn:disabled{opacity:.4;cursor:not-allowed}
.muffleap-qty .qty{
	width:3rem;max-width:none;text-align:center;
	background:transparent!important;
	border:0!important;outline:0!important;
	color:var(--ds-text)!important;
	padding:0!important;
	min-height:0!important;
	font-size:1rem!important;font-weight:600!important;
	-moz-appearance:textfield;
}
.muffleap-qty .qty::-webkit-outer-spin-button,
.muffleap-qty .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.single-product form.cart .single_add_to_cart_button{
	padding:var(--ds-s-3) var(--ds-s-6)!important;
	font-size:.9375rem!important;
	min-height:44px;
	flex:1 1 auto;
}

.single-product .product_meta{
	margin-top:var(--ds-s-4);padding-top:var(--ds-s-4);
	border-top:0.5px solid var(--ds-border);
	font-size:.8125rem;color:var(--ds-text-2);
	display:flex;flex-wrap:wrap;gap:var(--ds-s-3);
}
.single-product .product_meta > span{display:block}
.single-product .product_meta a{color:var(--ds-accent);text-decoration:none}
.single-product .product_meta a:hover{text-decoration:underline}

/* External payment gateways (PayPal Smart Buttons, Stripe etc.) container */
.single-product .product .paypal-buttons,
.single-product .product .wc_payment_methods{margin-top:var(--ds-s-4)}

/* --- Sidebar --- */
.muffleap-product-sidebar{
	display:flex;flex-direction:column;gap:var(--ds-s-4);
	position:sticky;top:var(--ds-s-5);
	min-width:0;
}
.muffleap-product-sidebar:empty{display:none}

/* --- Tabs (now inside the sidebar as a compact panel) --- */
.woocommerce-tabs{
	background:var(--ds-elevated);
	border:1px solid var(--ds-border-strong);
	border-radius:var(--ds-r-panel);
	padding:var(--ds-s-4) var(--ds-s-5);
	margin:0;
	box-shadow:var(--ds-shadow-sm);
}
.woocommerce-tabs ul.tabs.wc-tabs{
	list-style:none;padding:0!important;margin:0 0 var(--ds-s-5)!important;
	display:flex;gap:var(--ds-s-4);
	border-bottom:0.5px solid var(--ds-border);
	background:transparent!important;
}
.woocommerce-tabs ul.tabs.wc-tabs::before,
.woocommerce-tabs ul.tabs.wc-tabs::after,
.woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce-tabs ul.tabs.wc-tabs li::after{display:none!important;border:0!important}
.woocommerce-tabs ul.tabs.wc-tabs li{
	background:transparent!important;
	border:0!important;
	padding:0!important;margin:0!important;
	border-radius:0!important;
}
.woocommerce-tabs ul.tabs.wc-tabs li a{
	display:inline-flex;align-items:center;gap:var(--ds-s-2);
	color:var(--ds-text-2)!important;
	padding:var(--ds-s-3) 0!important;
	border-bottom:2px solid transparent;
	font-weight:500;font-size:.9375rem;
	text-decoration:none;
	transition:color var(--ds-dur-fast) var(--ds-ease-out),border-color var(--ds-dur-fast) var(--ds-ease-out);
}
.woocommerce-tabs ul.tabs.wc-tabs li a:hover{color:var(--ds-text)!important}
.woocommerce-tabs ul.tabs.wc-tabs li.active a{color:var(--ds-text)!important;border-bottom-color:var(--ds-accent)}

/* Tab icons — SF-Symbols-inspired, matching the page-header icon set
   (1.8 stroke, rounded joins). Rendered as currentColor so they follow the
   active/inactive tab color. */
.woocommerce-tabs ul.tabs.wc-tabs li a::before{
	content:"";
	width:18px;height:18px;flex:0 0 18px;
	background:currentColor;
	-webkit-mask-size:18px 18px;mask-size:18px 18px;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
}
.woocommerce-tabs ul.tabs.wc-tabs li.description_tab a::before,
.woocommerce-tabs ul.tabs.wc-tabs li.additional_information_tab a::before{
	-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M15 3v5h5"/><path d="M8 13h8M8 17h8"/></svg>');
	mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M15 3v5h5"/><path d="M8 13h8M8 17h8"/></svg>');
}
.woocommerce-tabs ul.tabs.wc-tabs li.reviews_tab a::before{
	-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1.1 6.1L12 17l-5.5 2.9 1.1-6.1L3.2 9.5l6.1-.9L12 3z"/></svg>');
	mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1.1 6.1L12 17l-5.5 2.9 1.1-6.1L3.2 9.5l6.1-.9L12 3z"/></svg>');
}

.woocommerce-Tabs-panel{color:var(--ds-text)}
.woocommerce-Tabs-panel h2{
	font-family:var(--ds-font-display);font-weight:800;
	font-size:1.5rem;margin:0 0 var(--ds-s-4);
}
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li{font-family:var(--ds-font-serif);line-height:1.8;color:var(--ds-text)}
.woocommerce-Tabs-panel ul,.woocommerce-Tabs-panel ol{padding-inline-start:var(--ds-s-5);margin:0 0 var(--ds-s-5)}

/* --- Related / upsells (now inside the sidebar as compact panels) --- */
.muffleap-product-sidebar .related.products,
.muffleap-product-sidebar .upsells.products{
	background:var(--ds-elevated);
	border:0.5px solid var(--ds-border);
	border-radius:var(--ds-r-panel);
	padding:var(--ds-s-5);
	margin:0;
}
.muffleap-product-sidebar .related.products > h2,
.muffleap-product-sidebar .upsells.products > h2{
	font-family:var(--ds-font-display);font-weight:800;font-size:1.125rem;
	margin:0 0 var(--ds-s-4);
	letter-spacing:-.01em;
}
/* 2-column compact grid for sidebar products */
.muffleap-product-sidebar .related.products ul.products,
.muffleap-product-sidebar .upsells.products ul.products{
	grid-template-columns:repeat(2,minmax(0,1fr))!important;
	gap:var(--ds-s-3);
	margin:0;
}
.muffleap-product-sidebar ul.products li.product h2,
.muffleap-product-sidebar ul.products li.product .woocommerce-loop-product__title{
	font-size:.9375rem;
	padding:var(--ds-s-3) var(--ds-s-3) var(--ds-s-1);
	min-height:0;
}
.muffleap-product-sidebar ul.products li.product .price{
	padding:0 var(--ds-s-3) var(--ds-s-3);
	font-size:.875rem;
}
.muffleap-product-sidebar ul.products li.product .button,
.muffleap-product-sidebar ul.products li.product .added_to_cart{
	margin:auto var(--ds-s-3) var(--ds-s-3)!important;
	font-size:.8125rem!important;
	padding:var(--ds-s-1) var(--ds-s-3)!important;
}
/* Legacy fallback (in case hooks didn't fire; e.g. a plugin replaced them) */
.single-product .product > .related.products,
.single-product .product > .upsells.products{
	grid-column:1 / -1;
	margin-top:var(--ds-s-10);padding-top:var(--ds-s-6);
	border-top:0.5px solid var(--ds-border);
}

/* --- Cart / Checkout tables --- */
.woocommerce-cart table.cart,
.woocommerce-cart table.shop_table,
.woocommerce-checkout table.shop_table{
	width:100%;border:0.5px solid var(--ds-border);border-radius:var(--ds-r-card);
	border-collapse:separate;border-spacing:0;background:var(--ds-elevated);
	overflow:hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
	padding:var(--ds-s-3) var(--ds-s-4);
	border-bottom:0.5px solid var(--ds-border);
	background:transparent;color:var(--ds-text);
}
.woocommerce table.shop_table thead th{background:var(--ds-bg-2);color:var(--ds-text-2);font-weight:500;font-size:.8125rem;text-transform:none}
.woocommerce table.shop_table tbody tr:last-child td,.woocommerce table.shop_table tfoot tr:last-child td{border-bottom:0}
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-cart .form-row input,
.woocommerce-cart .form-row textarea{
	background:var(--ds-bg-2)!important;color:var(--ds-text)!important;
	border:0.5px solid var(--ds-border-strong)!important;border-radius:var(--ds-r-control)!important;
	padding:var(--ds-s-2) var(--ds-s-3)!important;
	min-height:40px;
}

/* --- Messages --- */
.woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews,.woocommerce-no-products-found{
	background:var(--ds-bg-2)!important;color:var(--ds-text)!important;
	border:0.5px solid var(--ds-border-strong)!important;
	border-inline-start:3px solid var(--ds-accent)!important;
	border-radius:var(--ds-r-card)!important;
	padding:var(--ds-s-3) var(--ds-s-4)!important;
	box-shadow:var(--ds-shadow-sm);
	list-style:none;
}
.woocommerce-message{border-inline-start-color:var(--ds-green)!important}
.woocommerce-error{border-inline-start-color:var(--ds-red)!important}
.woocommerce-message a,.woocommerce-info a,.woocommerce-error a{color:var(--ds-accent)}

/* --- Responsive --- */
@media (max-width:1100px){
	.woocommerce ul.products{grid-template-columns:repeat(3,minmax(0,1fr))}
	.single-product div.product{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
@media (max-width:860px){
	.woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ds-s-4)}
	.single-product div.product{grid-template-columns:1fr;gap:var(--ds-s-5)}
	.muffleap-product-sidebar{position:static}
	.muffleap-product-sidebar .related.products ul.products,
	.muffleap-product-sidebar .upsells.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
	.single-product .woocommerce-product-gallery__wrapper img{max-width:520px;margin-inline:auto}
	.woocommerce-tabs ul.tabs.wc-tabs{gap:var(--ds-s-3);flex-wrap:wrap}
}
@media (max-width:480px){
	.woocommerce ul.products{grid-template-columns:1fr}
	.muffleap-product-card{padding:var(--ds-s-4)}
	.muffleap-product-sidebar .related.products ul.products,
	.muffleap-product-sidebar .upsells.products ul.products{grid-template-columns:1fr}
}

/* ==========================================================================
   Block styles — weights & Kashida (registered via inc/block-styles.php)
   Applies to core/paragraph, core/heading, core/list, core/list-item, core/quote.
   ========================================================================== */
.is-style-weight-light   { font-weight:300 !important }
.is-style-weight-regular { font-weight:400 !important }
.is-style-weight-medium  { font-weight:500 !important }
.is-style-weight-bold    { font-weight:700 !important }
.is-style-weight-black   { font-weight:900 !important }

.is-style-kashida{
	text-align:justify;
	text-align-last:start;
	text-justify:inter-word;        /* universal fallback */
	text-justify:kashida;           /* Arabic kashida (Safari/WebKit) */
	word-spacing:0;
	font-feature-settings:"kern" 1, "calt" 1, "liga" 1;
}

/* ==========================================================================
   RTL-specific nudges
   ========================================================================== */
[dir="rtl"] .hero__title,[dir="rtl"] .section-title,[dir="rtl"] .feature-card__title,
[dir="rtl"] .portfolio-card__title,[dir="rtl"] .entry-title{letter-spacing:0}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:860px){
	/* Mobile header: a strict 3-column grid with symmetric side columns so
	   the logo in column 2 is perfectly centered regardless of CTA state.
	     [hamburger 40px] [logo 1fr] [cta 40px]
	   The two side columns are always the same width, so hiding the CTA
	   (visibility, not display) doesn't shift the logo off-center. Logical
	   RTL/LTR column placement is handled by the browser. */
	.site-header__inner{
		display:grid;
		grid-template-columns:40px minmax(0,1fr) 40px;
		align-items:center;
		gap:var(--ds-s-3);
		min-height:56px;
		padding-block:var(--ds-s-2);
	}

	/* Nav wrapper in column 1 (right in RTL). Only the 40×40 hamburger button
	   sits in the grid cell — the dropdown menu escapes via absolute position. */
	.main-navigation{grid-column:1;justify-self:center;position:static;min-width:0;flex:0 0 auto}

	/* Branding in the center column, always horizontally centered. */
	.site-branding{grid-column:2;justify-self:center;min-width:0;overflow:hidden;text-align:center}
	.custom-logo,.site-title{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}

	/* CTA in column 3 (left in RTL) rendered as a 40×40 circle to match the
	   hamburger. On mobile, the text is always hidden (icon-only treatment)
	   regardless of the "full" vs "icon" customizer choice — this keeps the
	   three-item row balanced and predictable. */
	.site-header__cta{grid-column:3;justify-self:center;margin:0}
	.site-header__cta-link{
		width:40px;height:40px;padding:0;
		border-radius:50%;
		justify-content:center;
	}
	.site-header__cta-text{
		position:absolute;width:1px;height:1px;
		padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
	}
	.site-header__cta-icon{display:inline-flex}
	.site-header__cta-icon svg{width:18px;height:18px}

	/* Show hamburger on mobile. */
	.menu-toggle{display:inline-flex}

	/* Menu dropdown overlays below the sticky header. */
	.main-navigation ul{
		display:none;flex-direction:column;gap:0;
		position:absolute;inset-inline:0;top:100%;
		background:rgba(28,28,30,.95);
		backdrop-filter:saturate(180%) blur(20px);
		-webkit-backdrop-filter:saturate(180%) blur(20px);
		border-top:0.5px solid var(--ds-border);
		box-shadow:var(--ds-shadow-md);
		padding:var(--ds-s-2) var(--ds-s-5);
		z-index:49;
	}
	.main-navigation ul li{border-bottom:0.5px solid var(--ds-border)}
	.main-navigation ul li:last-child{border-bottom:0}
	.main-navigation ul a{display:block;padding:var(--ds-s-3) 0}
	.main-navigation ul .sub-menu{position:static;box-shadow:none;border:0;padding:0;margin-top:0;padding-inline-start:var(--ds-s-4);background:transparent;backdrop-filter:none}
	.main-navigation.is-open ul{display:flex}

	/* Hidden CTA: use visibility, not display, so the 40 px column is still
	   occupied and the logo stays centered. Block clicks on the invisible
	   button as well. */
	body[data-mobile-cta="hidden"] .site-header__cta{visibility:hidden;pointer-events:none}

	/* Logo hidden on mobile: keep column 2 in place (empty) so the hamburger
	   and CTA remain anchored to the sides. */
	body[data-mobile-logo="hide"] .site-branding{visibility:hidden}

	.hero{padding-block:var(--ds-s-12) var(--ds-s-16)}
	.hero--split .hero__inner{grid-template-columns:1fr;gap:var(--ds-s-10);text-align:center}
	.hero--split .hero__text{order:2}
	.hero--split .hero__image{order:1}
	.hero--split .hero__actions{justify-content:center}
	.hero__image{--portrait-max:320px}
	.hero__subtitle{max-width:none}
	.featured-in__grid{gap:var(--ds-s-5) var(--ds-s-6)}
	.cta-band{text-align:center;justify-content:center;padding:var(--ds-s-6)}
}

@media (max-width:420px){
	.container{padding-inline:var(--ds-s-4)}
	.site-header__inner{gap:var(--ds-s-2)}
}

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