/*
Theme Name: طفلي – My Child by Diana
Theme URI: https://www.instagram.com/mychild.bydiana/
Author: Active Digit
Description: قالب ووردبريس عربي (RTL) لمتجر ملابس وإكسسوارات أطفال، مبني على WooCommerce. ألوان باستيل ناعمة، تخصيص باسم الطفل، دليل مقاسات، طلب عبر واتساب، أدوات إتاحة وصفحات معلومات جاهزة.
Version: 1.1.0
Requires at least: 6.3
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mychild
Tags: e-commerce, rtl-language-support, custom-logo, custom-menu, featured-images, theme-options
WC requires at least: 8.0
*/

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
	--bg: #fbf7f1;
	--surface: #ffffff;
	--sand: #f4ebe0;
	--peach: #f6dccb;
	--blush: #f3d5d1;
	--sky: #d7e4ed;
	--sage-l: #dfe6d5;
	--sage: #9aab89;
	--caramel: #c58a5c;
	--caramel-d: #8b5733;
	--cocoa: #3d302a;
	--text: #3d302a;
	--muted: #6f6157;
	--line: #eadfd3;
	--sale: #b8433b;
	--wa: #1c8a4c;

	--f-display: "Baloo Bhaijaan 2", "Tajawal", system-ui, sans-serif;
	--f-body: "Tajawal", system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-latin: "Cormorant Garamond", Georgia, serif;

	--fs-hero: clamp(2.3rem, 1.5rem + 3.2vw, 4rem);
	--fs-h2: clamp(1.75rem, 1.25rem + 1.6vw, 2.6rem);
	--fs-body: 1.0625rem;

	--r-sm: 10px;
	--r-md: 18px;
	--r-lg: 28px;
	--shadow: 0 18px 40px -24px rgba(61, 48, 42, .35);
	--gutter: 16px;
	--max: 1240px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 768px) {
	:root { --gutter: 28px; }
}

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

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--f-body);
	font-size: var(--fs-body);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }

a { color: var(--caramel-d); text-underline-offset: 3px; }
a:hover { color: var(--cocoa); }

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 600;
	line-height: 1.3;
	color: var(--cocoa);
	margin: 0 0 .5em;
}

p { margin: 0 0 1em; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
	outline: 3px solid var(--caramel-d);
	outline-offset: 3px;
	border-radius: 4px;
}

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

.skip-link {
	position: absolute;
	inset-inline-start: 12px;
	top: -100px;
	z-index: 1000;
	background: var(--cocoa);
	color: #fff;
	padding: 10px 18px;
	border-radius: var(--r-sm);
	text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }

.nowrap, .nis { white-space: nowrap; }
.nis { unicode-bidi: isolate; display: inline-block; }

.icon { flex-shrink: 0; }

/* ==========================================================================
   Buttons & labels
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 12px 26px;
	border-radius: 999px;
	border: 1.5px solid transparent;
	font-family: var(--f-body);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--cocoa); color: #fff; }
.btn--primary:hover { background: var(--caramel-d); color: #fff; }
.btn--ghost { border-color: var(--cocoa); color: var(--cocoa); background: transparent; }
.btn--ghost:hover { background: var(--cocoa); color: #fff; }
.btn--light { background: #fff; color: var(--cocoa); }
.btn--light:hover { background: var(--cocoa); color: #fff; }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: #156c3b; color: #fff; }

.eyebrow {
	font-family: var(--f-latin);
	font-style: italic;
	font-weight: 500;
	font-size: 1.05rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--caramel-d);
	margin: 0 0 .35em;
}

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--cocoa);
	cursor: pointer;
	position: relative;
	text-decoration: none;
	transition: background .2s;
}
.icon-btn:hover { background: var(--sand); color: var(--cocoa); }

/* ==========================================================================
   Announcement + header
   ========================================================================== */
.announce {
	background: var(--cocoa);
	color: #f6eee6;
	font-size: .875rem;
	text-align: center;
	padding: 8px var(--gutter);
}
.announce__text { margin: 0; display: block; }

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(251, 247, 241, .94);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s, box-shadow .3s;
}
.site-header.is-stuck { border-color: var(--line); box-shadow: 0 6px 24px -18px rgba(61, 48, 42, .4); }

.header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	min-height: 76px;
}
.header__side { display: flex; align-items: center; gap: 2px; }
.header__side--end { justify-content: flex-end; }

.brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	line-height: 1;
	padding-block: 6px;
}
.brand__ar {
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 2.3rem;
	color: var(--caramel);
	line-height: 1;
}
.brand__en {
	font-family: var(--f-latin);
	font-weight: 500;
	font-size: .72rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--cocoa);
	margin-top: 4px;
	direction: ltr;
}
.brand__en em { font-style: italic; text-transform: lowercase; letter-spacing: .1em; }
.custom-logo { max-height: 70px; width: auto; }

.cart-count {
	position: absolute;
	top: 4px;
	inset-inline-end: 2px;
	min-width: 19px;
	height: 19px;
	padding-inline: 5px;
	border-radius: 999px;
	background: var(--caramel);
	color: #fff;
	font-size: .7rem;
	font-weight: 700;
	line-height: 19px;
	text-align: center;
}
.cart-count.is-empty { display: none; }

.nav { border-top: 1px solid var(--line); }
.nav__list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav__list > li { position: relative; }
.nav__list a {
	display: block;
	padding: 13px 0;
	color: var(--cocoa);
	font-weight: 500;
	font-size: .98rem;
	text-decoration: none;
	position: relative;
}
.nav__list > li > a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 8px;
	height: 2px;
	background: var(--caramel);
	transform: scaleX(0);
	transition: transform .3s var(--ease);
}
.nav__list > li > a:hover::after,
.nav__list > .current-menu-item > a::after { transform: scaleX(1); }
.nav__list .sub-menu {
	position: absolute;
	inset-inline-start: -16px;
	top: 100%;
	min-width: 200px;
	list-style: none;
	margin: 0;
	padding: 10px 16px;
	background: var(--surface);
	border-radius: var(--r-md);
	box-shadow: var(--shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: .2s var(--ease);
}
.nav__list li:hover > .sub-menu,
.nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav__list .sub-menu a { padding: 6px 0; }

.menu-toggle { display: none; }

.search-panel { border-top: 1px solid var(--line); padding-block: 16px; background: var(--bg); }

.search-form {
	display: flex;
	align-items: center;
	max-width: 620px;
	margin-inline: auto;
	background: var(--surface);
	border: 1.5px solid var(--line);
	border-radius: 999px;
	padding-inline: 20px 6px;
}
.search-form:focus-within { border-color: var(--caramel); }
.search-form__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 12px 0;
	outline: none;
}
.search-form__btn {
	width: 44px; height: 44px;
	border: 0; border-radius: 50%;
	background: var(--cocoa); color: #fff;
	display: grid; place-items: center;
	cursor: pointer;
}

@media (max-width: 899px) {
	.menu-toggle { display: inline-grid; }
	.nav { display: none; }
	.hide-mobile { display: none; }
	.header__bar { min-height: 66px; }
	.brand__ar { font-size: 1.9rem; }
	.brand__en { font-size: .6rem; }
}

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 100; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(61, 48, 42, .45); animation: fade .25s var(--ease); }
.drawer__panel {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: min(86vw, 380px);
	background: var(--bg);
	display: flex;
	flex-direction: column;
	padding: 16px 22px 24px;
	overflow-y: auto;
	animation: slide-in .32s var(--ease);
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drawer__head .brand { align-items: flex-start; }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list a {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--cocoa);
	text-decoration: none;
}
.drawer__list .sub-menu { list-style: none; padding-inline-start: 16px; margin: 0; }
.drawer__list .sub-menu a { font-family: var(--f-body); font-size: 1rem; font-weight: 500; }
.drawer__foot { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; }
.drawer__foot a { display: flex; align-items: center; gap: 10px; color: var(--cocoa); text-decoration: none; font-weight: 500; }

@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { transform: translateX(100%); } }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: clamp(56px, 7vw, 104px); }
.section--tint { background: var(--surface); }
.section__head { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.section__head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	text-align: start;
}
.section__title { font-size: var(--fs-h2); margin: 0; }

.link-more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--cocoa);
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	padding-bottom: 2px;
	white-space: nowrap;
}

/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 70% at 85% 10%, rgba(246, 220, 203, .8), transparent 70%),
		radial-gradient(50% 60% at 10% 90%, rgba(215, 228, 237, .7), transparent 70%),
		var(--bg);
	padding-block: clamp(36px, 6vw, 88px);
}
.hero__grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.hero__title {
	font-size: var(--fs-hero);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: .4em;
}
.hero__text { font-size: 1.15rem; color: var(--muted); max-width: 34em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 36px;
	list-style: none;
	margin: 40px 0 0;
	padding: 24px 0 0;
	border-top: 1px solid var(--line);
}
.hero__facts li { display: flex; flex-direction: column; line-height: 1.3; }
.hero__facts strong { font-family: var(--f-display); font-size: 1.7rem; color: var(--caramel-d); font-weight: 700; }
.hero__facts li > span { font-size: .92rem; color: var(--muted); }

.hero__media { position: relative; justify-self: center; width: min(100%, 470px); }
.hero__arch {
	border-radius: 999px 999px var(--r-lg) var(--r-lg);
	overflow: hidden;
	background: var(--peach);
	aspect-ratio: 4 / 5;
	box-shadow: var(--shadow);
	outline: 1.5px solid var(--caramel);
	outline-offset: 10px;
}
.hero__arch img { width: 100%; height: 100%; object-fit: cover; }
.hero__badge {
	position: absolute;
	bottom: 28px;
	inset-inline-start: -22px;
	width: 118px;
	height: 118px;
	border-radius: 50%;
	background: var(--surface);
	box-shadow: var(--shadow);
	display: grid;
	place-items: center;
	text-align: center;
	padding: 14px;
	font-family: var(--f-latin);
	font-size: 1rem;
	line-height: 1.1;
	color: var(--cocoa);
	direction: ltr;
	animation: bob 5s ease-in-out infinite;
}
.hero__badge em { display: block; font-size: 1.35rem; color: var(--caramel-d); }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-4deg); } }

@media (max-width: 899px) {
	.hero__grid { grid-template-columns: 1fr; }
	.hero__media { order: -1; width: min(78%, 360px); }
	.hero__copy { text-align: center; }
	.hero__text { margin-inline: auto; }
	.hero__actions, .hero__facts { justify-content: center; }
	.hero__badge { width: 92px; height: 92px; font-size: .85rem; inset-inline-start: -12px; bottom: 18px; }
	.hero__badge em { font-size: 1.1rem; }
}

/* Shop by age */
.ages__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 3vw, 40px);
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 900px;
}
.age {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--c);
	text-decoration: none;
	color: var(--cocoa);
	position: relative;
	transition: transform .35s var(--ease);
}
.age::after {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	border: 1.5px dashed var(--c);
	filter: brightness(.85);
	transition: transform .5s var(--ease);
}
.age:hover { transform: translateY(-6px); color: var(--cocoa); }
.age:hover::after { transform: rotate(40deg); }
.age__num { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, .9rem + 1.8vw, 2.3rem); line-height: 1; }
.age__unit { font-size: clamp(.8rem, .7rem + .4vw, 1rem); font-weight: 500; }

/* Category tiles */
.cats__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(12px, 2vw, 24px);
}
.cat { text-decoration: none; color: var(--cocoa); display: block; }
.cat__img {
	display: block;
	aspect-ratio: 2 / 3;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--sand);
}
.cat__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.cat:hover .cat__img img { transform: scale(1.05); }
.cat__body { display: block; padding: 14px 4px 0; }
.cat__title { display: block; font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; line-height: 1.3; }
.cat__text { display: block; color: var(--muted); font-size: .95rem; line-height: 1.5; }
.cat__cta { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-weight: 700; font-size: .92rem; color: var(--caramel-d); }
.cat:hover .cat__cta .icon { transform: translateX(-4px); }
.cat__cta .icon { transition: transform .3s var(--ease); }

@media (max-width: 899px) {
	.cats__grid { grid-template-columns: repeat(2, 1fr); }
	.cat__title { font-size: 1.15rem; }
	.cat__text { font-size: .85rem; }
}

/* Personalised */
.personal { background: linear-gradient(180deg, var(--bg), var(--sky) 220%); }
.personal__grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: clamp(28px, 6vw, 88px);
	align-items: center;
}
.personal__media {
	border-radius: var(--r-lg);
	overflow: hidden;
	aspect-ratio: 2 / 3;
	max-width: 440px;
	width: 100%;
	justify-self: center;
	background: var(--sky);
	box-shadow: var(--shadow);
}
.personal__media img { width: 100%; height: 100%; object-fit: cover; }
.personal__copy > p { font-size: 1.1rem; color: var(--muted); max-width: 32em; }
.steps { list-style: none; margin: 24px 0 32px; padding: 0; display: grid; gap: 14px; }
.steps li { display: flex; align-items: center; gap: 14px; font-weight: 500; font-size: 1.05rem; }
.steps span {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--surface);
	border: 1.5px solid var(--caramel);
	color: var(--caramel-d);
	font-family: var(--f-display);
	font-weight: 700;
	flex-shrink: 0;
}

/* Story */
.story { background: var(--sand); }
.story__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 6vw, 88px);
	align-items: center;
}
.story__media { margin: 0; }
.story__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 140px;
	box-shadow: var(--shadow);
}
.story__media figcaption { margin-top: 12px; font-size: .9rem; color: var(--muted); }
.story__copy p { font-size: 1.08rem; }
.story__sign { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; color: var(--caramel-d); margin-top: 1.2em; }

@media (max-width: 899px) {
	.personal__grid, .story__grid { grid-template-columns: 1fr; }
	.personal__media { max-width: 420px; width: 100%; margin-inline: auto; }
	.story__media { max-width: 420px; width: 100%; margin-inline: auto; }
}

/* Gift banner */
.gift-banner { padding-block: 0; }
.gift-banner__box {
	display: flex;
	align-items: center;
	gap: 24px;
	background: var(--sage-l);
	border-radius: var(--r-lg);
	padding: clamp(24px, 4vw, 44px) clamp(24px, 5vw, 56px);
	color: var(--cocoa);
	margin-top: clamp(56px, 7vw, 104px);
}
.gift-banner__box h2 { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin: 0; }
.gift-banner__box p { margin: 0; color: var(--muted); }
.gift-banner__box .btn { margin-inline-start: auto; }
.gift-banner__box > .icon { color: var(--sage); stroke: #6d7f5e; }
@media (max-width: 699px) {
	.gift-banner__box { flex-direction: column; text-align: center; }
	.gift-banner__box .btn { margin-inline-start: 0; }
}

/* Visit */
.visit__grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}
.visit__list { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 18px; }
.visit__list li { display: flex; gap: 14px; align-items: flex-start; }
.visit__list .icon {
	width: 44px; height: 44px;
	padding: 10px;
	border-radius: 50%;
	background: var(--peach);
	color: var(--caramel-d);
}
.visit__list div { display: flex; flex-direction: column; line-height: 1.5; }
.visit__list strong { font-size: .95rem; }
.visit__list span, .visit__list a { color: var(--muted); }
.visit__list a { text-decoration: none; text-align: start; unicode-bidi: isolate; }
.visit__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.visit__map iframe {
	width: 100%;
	height: clamp(320px, 40vw, 460px);
	border: 0;
	border-radius: var(--r-lg);
	box-shadow: var(--shadow);
	background: var(--sand);
}
@media (max-width: 899px) { .visit__grid { grid-template-columns: 1fr; } }

/* Instagram */
.insta { padding-top: 0; }
.insta__box {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: clamp(36px, 5vw, 64px) var(--gutter);
	border: 1.5px dashed var(--caramel);
	border-radius: var(--r-lg);
	max-width: 860px;
	color: var(--caramel-d);
}
.insta__box p { color: var(--muted); }

/* Perks */
.perks { background: var(--surface); border-top: 1px solid var(--line); padding-block: 36px; }
.perks__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.perk { display: flex; align-items: center; gap: 14px; }
.perk .icon { color: var(--caramel-d); }
.perk div { display: flex; flex-direction: column; line-height: 1.4; }
.perk strong { font-size: 1rem; }
.perk span { font-size: .88rem; color: var(--muted); }
@media (max-width: 899px) {
	.perks__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
	.perk { flex-direction: column; text-align: center; gap: 8px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--cocoa); color: #eadfd4; padding-top: clamp(48px, 6vw, 80px); }
.site-footer a { color: #f7efe7; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 40px;
}
.footer__brand .brand { align-items: flex-start; }
.footer__brand .brand__ar { color: #e9b98f; }
.footer__brand .brand__en { color: #eadfd4; }
.footer__brand p { margin-top: 16px; font-size: .95rem; max-width: 26em; color: #d9ccc0; }
.footer__title { font-family: var(--f-body); font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.footer__list, .footer__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .95rem; }
.footer__contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact .icon { margin-top: 4px; color: #e9b98f; }
.footer__contact a { unicode-bidi: isolate; }
.social { display: flex; gap: 8px; margin-top: 18px; }
.social a {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .25);
}
.social a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; }
.footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.payments { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; direction: ltr; }
.payments li {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 5px 10px;
	border-radius: 6px;
	background: rgba(255, 255, 255, .1);
	color: #f7efe7;
}
.footer__copy { margin: 0; font-size: .85rem; color: #cbbdb1; }
@media (max-width: 899px) {
	.footer__grid { grid-template-columns: 1fr 1fr; }
	.footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 479px) {
	.footer__grid { grid-template-columns: 1fr; gap: 28px; }
	.footer__bottom { flex-direction: column; align-items: flex-start; padding-bottom: 96px; }
}

/* WhatsApp float + accessibility */
.wa-float {
	position: fixed;
	bottom: 20px;
	inset-inline-end: 20px;
	z-index: 60;
	width: 58px; height: 58px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--wa);
	color: #fff;
	box-shadow: 0 10px 24px -8px rgba(28, 138, 76, .6);
	transition: transform .25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); color: #fff; }

.a11y { position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 60; }
.a11y__toggle {
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 0;
	background: #2f5d8a;
	color: #fff;
	display: grid; place-items: center;
	cursor: pointer;
	box-shadow: var(--shadow);
}
.a11y__panel {
	position: absolute;
	bottom: 60px;
	inset-inline-start: 0;
	width: 220px;
	background: var(--surface);
	border-radius: var(--r-md);
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .45);
	padding: 14px;
	display: grid;
	gap: 6px;
}
.a11y__panel[hidden] { display: none; }
.a11y__title { font-weight: 700; margin: 0 0 4px; }
.a11y__panel button, .a11y__panel a {
	text-align: start;
	padding: 9px 12px;
	border-radius: var(--r-sm);
	border: 1px solid var(--line);
	background: var(--bg);
	cursor: pointer;
	font-size: .92rem;
	color: var(--cocoa);
	text-decoration: none;
}
.a11y__panel [aria-pressed="true"] { background: var(--cocoa); color: #fff; border-color: var(--cocoa); }

html.a11y-contrast { --bg: #fff; --surface: #fff; --sand: #fff; --text: #000; --cocoa: #000; --muted: #222; --caramel-d: #5a2d0c; --line: #000; }
html.a11y-contrast body { background: #fff; }
html.a11y-contrast .site-footer, html.a11y-contrast .announce { background: #000; }
html.a11y-links a { text-decoration: underline !important; text-decoration-thickness: 2px !important; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

@media (max-width: 599px) {
	.wa-float { width: 50px; height: 50px; bottom: 14px; inset-inline-end: 14px; }
	.wa-float .icon { width: 24px; height: 24px; }
	.a11y { bottom: 14px; inset-inline-start: 14px; }
	.a11y__toggle { width: 40px; height: 40px; }
	.a11y__panel { bottom: 52px; }
}

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

/* ==========================================================================
   Pages & posts
   ========================================================================== */
.page-head {
	background: var(--sand);
	text-align: center;
	padding-block: clamp(36px, 5vw, 64px);
}
.page-title { font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); margin: 0; }
.page-body { padding-block: clamp(36px, 5vw, 72px); }
.page-body--wide { padding-block: 0; }
.page-body--wide .entry-content > :not(.section) { max-width: 820px; margin-inline: auto; padding-inline: var(--gutter); }
.entry-content h2, .entry-content h3 { margin-top: 1.6em; }
.entry-content ul, .entry-content ol { padding-inline-start: 1.3em; }
.entry-content li { margin-bottom: .4em; }
.entry-content li::marker { color: var(--caramel); }
.entry-thumb { margin: 0 0 32px; }
.entry-thumb img { border-radius: var(--r-lg); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 32px; }
.post-card__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-md); background: var(--sand); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; }
.post-card__title { font-size: 1.3rem; margin-top: 14px; }
.post-card__title a { color: var(--cocoa); text-decoration: none; }
.post-card__excerpt { color: var(--muted); }

.empty { text-align: center; display: grid; justify-items: center; gap: 16px; }
.empty .search-form { width: 100%; }
.empty--404 img { width: 160px; border-radius: var(--r-lg); }

.nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.nav-links .page-numbers {
	min-width: 44px; height: 44px;
	display: grid; place-items: center;
	padding-inline: 12px;
	border-radius: 999px;
	border: 1px solid var(--line);
	text-decoration: none;
	color: var(--cocoa);
}
.nav-links .current { background: var(--cocoa); color: #fff; border-color: var(--cocoa); }