/* =========================================================
   Weaam Theme — main stylesheet
   Uses CSS logical properties so RTL (Arabic) and LTR (English)
   both work correctly without duplicate rule sets.
   ========================================================= */

:root{
	--weaam-primary: #4ec2c2;
	--weaam-primary-light: #c6f0f0;
	--weaam-accent: #bfaa59;
	--weaam-bg: #ffffff;
	--weaam-text: #22292f;
	--weaam-font-body: "Tajawal", sans-serif;
	--weaam-font-heading: "Cairo", sans-serif;
	--weaam-radius: 16px;
	--weaam-shadow: 0 10px 30px rgba(0,0,0,.08);
	--weaam-container: 1200px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; margin: 0; padding: 0; }

body{
	margin: 0;
	background: var(--weaam-bg);
	color: var(--weaam-text);
	font-family: var(--weaam-font-body);
	font-size: 16px;
	line-height: 1.8;
}
/* Explicit, site-wide default alignment per language — a safety net on
 * top of normal direction inheritance, so text reliably reads from the
 * correct side everywhere (elements that intentionally center/justify
 * text elsewhere in this file still win, since they're more specific). */
html[dir="rtl"] body{ text-align: right; }
html[dir="ltr"] body{ text-align: left; }

h1, h2, h3, h4, h5, h6{
	font-family: var(--weaam-font-heading);
	line-height: 1.35;
	margin: 0 0 .6em;
}

p{ margin: 0 0 1em; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ padding-inline-start: 1.2em; }

.container{
	max-width: var(--weaam-container);
	margin-inline: auto;
	padding-inline: 20px;
}

.section{ padding-block: 64px; }
.weaam-bg-light{ background: var(--weaam-primary-light); }
.weaam-bg-primary{ background: var(--weaam-primary); color: #fff; }

.section-title{
	text-align: center;
	font-size: 32px;
	position: relative;
	margin-bottom: 40px;
}
.section-title::after{
	content: "";
	display: block;
	width: 64px;
	height: 4px;
	background: var(--weaam-accent);
	margin: 14px auto 0;
	border-radius: 4px;
}

/* Buttons */
.btn{
	display: inline-block;
	padding: 13px 30px;
	border-radius: 999px;
	font-weight: 700;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
	font-family: var(--weaam-font-body);
}
.btn:hover{ transform: translateY(-2px); }
.btn-primary{ background: var(--weaam-primary); color: #fff; }
.btn-primary:hover{ box-shadow: 0 10px 20px rgba(78,194,194,.35); }
.btn-accent{ background: var(--weaam-accent); color: #fff; }
.btn-outline{ background: transparent; border-color: var(--weaam-primary); color: var(--weaam-primary); }
.btn-outline:hover{ background: var(--weaam-primary); color: #fff; }
.btn-sm{ padding: 8px 18px; font-size: 14px; }

/* ===== Top bar ===== */
.weaam-topbar{ background: var(--weaam-text); color: #fff; font-size: 12px; }
.weaam-topbar__inner{ display: flex; align-items: center; justify-content: space-between; padding-block: 5px; flex-wrap: wrap; gap: 8px; }
.weaam-topbar a{ color: #fff; opacity: .9; }
.weaam-topbar a:hover{ opacity: 1; }
.weaam-topbar__link{ display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 16px; }
.weaam-topbar__icon{ width: 14px; height: 14px; color: #fff; flex-shrink: 0; }
.weaam-topbar__right{ display: flex; align-items: center; gap: 16px; }
.weaam-lang-switcher__link{ display: inline-flex; align-items: center; gap: 6px; font-weight: 700; padding: 3px 12px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; transition: background .2s ease, border-color .2s ease; }
.weaam-lang-switcher__link:hover{ background: rgba(255,255,255,.15); border-color: #fff; opacity: 1; }
.weaam-lang-switcher__flag{ font-size: 15px; line-height: 1; }

/* ===== Header ===== */
/* Always flush to the very top of the viewport while scrolling — no
 * admin-bar offset logic, by explicit request (simpler, no conditions). */
.weaam-header{ background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.05); position: sticky; top: 0 !important; z-index: 100; margin: 0; }
.weaam-topbar, .weaam-header, .weaam-hero-slider{ margin: 0; }
.weaam-header__inner{ display: flex; align-items: center; justify-content: space-between; padding-block: 10px; gap: 20px; }
.weaam-header__logo img{ max-height: 46px; width: auto; display: block; }
img.custom-logo{ height: 75px !important; width: auto !important; }
@media (max-width: 640px){
	.weaam-header__logo img{ max-height: 72px; }
}
@media (min-width: 640px){
	.weaam-header__logo img{ max-height: 76px; width: auto; display: block; }
}
.weaam-logo-text{ font-family: var(--weaam-font-heading); font-size: 22px; font-weight: 800; color: var(--weaam-primary); }
.weaam-nav__list{ display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.weaam-nav__list a{ font-weight: 600; padding: 6px 0; position: relative; }
.weaam-nav__list a:hover{ color: var(--weaam-primary); }
.weaam-nav-toggle{ display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.weaam-nav-toggle span{ width: 24px; height: 2px; background: var(--weaam-text); display: block; }

@media (max-width: 860px){
	.weaam-nav{ position: absolute; inset-inline: 0; top: 100%; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,.08); display: none; }
	.weaam-nav.is-open{ display: block; }
	.weaam-nav__list{ flex-direction: column; gap: 0; padding: 10px 20px; }
	.weaam-nav__list li{ border-bottom: 1px solid #eee; }
	.weaam-nav__list a{ display: block; padding: 12px 0; }
	.weaam-nav-toggle{ display: flex; }
	.weaam-header__inner{ position: relative; }
}

/* Mobile: header needs to be noticeably more compact than desktop —
 * this is the single most impactful fix, since an uploaded custom logo
 * previously had no size constraint at all and could render very large. */
@media (max-width: 640px){
	.weaam-topbar{ font-size: 11px; }
	.weaam-topbar__inner{ padding-block: 4px; gap: 4px; }
	.weaam-topbar__link{ margin-inline-end: 10px; gap: 4px; }
	.weaam-topbar__icon{ width: 12px; height: 12px; }
	.weaam-lang-switcher__link{ padding: 2px 9px; font-size: 12px; }
	.weaam-header__inner{ padding-block: 8px; gap: 10px; }
	.weaam-logo-text{ font-size: 17px; }
	.weaam-nav-toggle{ padding: 6px; }
	.weaam-nav-toggle span{ width: 20px; }
}

/* ===== Hero Slider ===== */
.weaam-hero-slider{ position: relative; overflow: hidden; height: 560px; }
.weaam-hero-slider__track{
	display: flex; height: 100%; direction: ltr;
	will-change: transform;
}
.weaam-hero-slide{
	flex: 0 0 100%; width: 100%; height: 100%;
	position: relative;
	display: flex; align-items: center;
	color: #fff;
}
.weaam-hero-slide__media{
	position: absolute; top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover; background-position: center;
	width: 100%; height: 100%; object-fit: cover;
	background-color: var(--weaam-primary);
}
video.weaam-hero-slide__media{ display: block; }
.weaam-hero-slide__overlay{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(135deg, rgba(34,41,47,.75), rgba(78,194,194,.55)); }
.weaam-hero-slide__content{ position: relative; z-index: 1; width: 100%; text-align: center; max-width: 780px; margin-inline: auto; }
.weaam-hero-slide__content h1{ font-size: 44px; margin-bottom: 20px; color: #fff; }
.weaam-hero-slide__content p{ font-size: 18px; margin-bottom: 30px; }
/* The track is forced direction:ltr so slides always advance in a
 * consistent physical order regardless of page language — but that
 * would also wrongly flip Arabic text inside each slide, so explicitly
 * reset the content's own direction to match the actual page language. */
html[dir="rtl"] .weaam-hero-slide__content{ direction: rtl; }
html[dir="ltr"] .weaam-hero-slide__content{ direction: ltr; }
.weaam-hero__actions{ display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.weaam-hero__actions .btn-outline{ border-color: #fff; color: #fff; }
.weaam-hero__actions .btn-outline:hover{ background: #fff; color: var(--weaam-primary); }

/* Draggable hint: grab cursor on the whole slider */
.weaam-hero-slider{ cursor: grab; touch-action: pan-y; user-select: none; }
.weaam-hero-slider.is-dragging{ cursor: grabbing; }
.weaam-hero-slide__media{ pointer-events: none; }

/* Dot/line indicators — small dot when inactive, elongates into a line when active */
.weaam-hero-slider__dots{ position: absolute; bottom: 22px; inset-inline: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.weaam-hero-slider__dot{
	width: 10px; height: 6px; border-radius: 999px;
	background: rgba(255,255,255,.55); border: none; cursor: pointer; padding: 0;
	transition: width .3s ease, background .3s ease;
}
.weaam-hero-slider__dot.is-active{ width: 30px; background: #fff; }
@media (max-width: 640px){
	.weaam-hero-slide__content h1{ font-size: 30px; }
	.weaam-hero-slider{ height: 440px; }
}

/* ===== About brand teaser ===== */
.weaam-about-teaser__inner{ display: flex; flex-wrap: wrap; gap: 44px; align-items: center; }
.weaam-about-teaser__img{ flex: 1 1 420px; min-height: 340px; border-radius: var(--weaam-radius); background-size: cover; background-position: center; }
.weaam-about-teaser__content{ flex: 1 1 380px; }
.weaam-about-teaser__content h2{ font-size: 30px; }
.weaam-about-teaser__content p{ font-size: 16px; color: #555; margin-bottom: 24px; }

/* ===== About Us page: custom zigzag image + text design ===== */
.weaam-about-custom{ padding-bottom: 10px; }
.weaam-about-row{
	display: flex; flex-wrap: wrap; align-items: center; gap: 48px;
	margin-bottom: 64px;
}
.weaam-about-row:last-child{ margin-bottom: 0; }
.weaam-about-row--reverse{ flex-direction: row-reverse; }
.weaam-about-row__img{
	flex: 1 1 420px; min-height: 380px; border-radius: var(--weaam-radius);
	background-size: cover; background-position: center;
	box-shadow: var(--weaam-shadow);
}
.weaam-about-row__text{ flex: 1 1 380px; }
.weaam-about-row__text h2{ font-size: 30px; margin-bottom: 18px; }
.weaam-about-row__text p{ font-size: 16px; line-height: 1.9; color: #555; }
@media (max-width: 780px){
	.weaam-about-row, .weaam-about-row--reverse{ flex-direction: column; }
	.weaam-about-row__img{ min-height: 260px; width: 100%; }
	.weaam-about-row{ margin-bottom: 40px; }
}

/* ===== Grids & Cards =====
   Flexbox is used instead of CSS Grid for the widest possible browser
   compatibility (works identically in every modern browser). */
.weaam-grid{ display: flex; flex-wrap: wrap; gap: 28px; }
.weaam-grid--2 > *{ flex: 1 1 calc(50% - 14px); min-width: 260px; }
.weaam-grid--3 > *{ flex: 1 1 calc(33.333% - 19px); min-width: 240px; }
.weaam-grid--4 > *{ flex: 1 1 calc(25% - 21px); min-width: 220px; }
@media (max-width: 960px){
	.weaam-grid--3 > *, .weaam-grid--4 > *{ flex: 1 1 calc(50% - 14px); }
}
@media (max-width: 600px){
	.weaam-grid--2 > *, .weaam-grid--3 > *, .weaam-grid--4 > *{ flex: 1 1 100%; }
}

.weaam-card{
	background: #fff;
	border-radius: var(--weaam-radius);
	overflow: hidden;
	box-shadow: var(--weaam-shadow);
	transition: transform .2s ease;
}
.weaam-card:hover{ transform: translateY(-6px); }
.weaam-card__img{ aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: var(--weaam-primary-light); }
.weaam-card__body{ padding: 22px; }
.weaam-card__body h3{ font-size: 20px; }

/* Product cards: uniform height/width regardless of sibling content
 * length, and the description is always clamped to exactly one line
 * with an ellipsis — the visitor has to click "View More" to read more,
 * by design, for a clean and consistent grid. */
.weaam-product-card{
	display: flex; flex-direction: column; height: 100%;
	transition: transform .2s ease;
}
/* The title+description link and the image link: set color/decoration
 * directly on each, rather than relying purely on inheritance, so this
 * holds regardless of any other rule that might otherwise win out.
 * Black by default, no underline ever, switching to the site's main
 * brand color on hover/focus/active. */
.weaam-product-card__text-link,
.weaam-product-card__text-link:visited,
.weaam-product-card__text-link .weaam-card__body h3,
.weaam-product-card__text-link p{
	display: block;
	color: var(--weaam-text) !important;
	text-decoration: none !important;
	transition: color .2s ease;
}
.weaam-product-card__text-link:hover,
.weaam-product-card__text-link:focus,
.weaam-product-card__text-link:active,
.weaam-product-card__text-link:hover h3,
.weaam-product-card__text-link:focus h3,
.weaam-product-card__text-link:active h3,
.weaam-product-card__text-link:hover p,
.weaam-product-card__text-link:focus p,
.weaam-product-card__text-link:active p{
	color: var(--weaam-primary) !important;
	text-decoration: none !important;
}
.weaam-product-card .weaam-card__img{ flex-shrink: 0; display: block; }
.weaam-product-card .weaam-card__body{ display: flex; flex-direction: column; flex: 1 1 auto; }
.weaam-product-card .weaam-card__body h3{ margin-bottom: 8px; }
.weaam-product-card .weaam-card__body p{
	display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
	overflow: hidden; text-overflow: ellipsis; white-space: normal;
	margin-bottom: 16px;
}
.weaam-product-card .weaam-card__body .weaam-product-card__actions{ margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }

/* Smaller product card used inside the homepage slider */
/* Small card uses the same square aspect-ratio image, just smaller text/padding. */
.weaam-product-card--sm .weaam-card__body{ padding: 16px; }
.weaam-product-card--sm .weaam-card__body h3{ font-size: 16px; margin-bottom: 6px; }
.weaam-product-card--sm .weaam-card__body p{ font-size: 13px; margin-bottom: 12px; }

.weaam-why-card{ background: var(--weaam-primary-light); border-radius: var(--weaam-radius); padding: 26px 20px; text-align: center; overflow: hidden; }
.weaam-why-card__dot{ display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--weaam-accent); margin-bottom: 14px; }
.weaam-why-card--has-img{ padding: 0 0 22px; }
.weaam-why-card__img{ width: 100%; aspect-ratio: 4 / 3; background-size: cover; background-position: center; margin-bottom: 16px; }
.weaam-why-card--has-img p{ padding-inline: 18px; }

/* ===== "Why Choose Lavado" redesign: eyebrow + heading + icon-boxed
 * feature grid on one side, a large photo with a floating experience
 * badge on the other. ===== */
.weaam-why-us__layout{ display: flex; align-items: center; gap: 60px; flex-wrap: wrap; }
.weaam-why-us__content{ flex: 1 1 480px; }
.weaam-why-us__eyebrow{ display: block; color: var(--weaam-accent); font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.weaam-why-us__title{ font-size: 32px; line-height: 1.4; margin-bottom: 34px; max-width: 480px; }
.weaam-why-us__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.weaam-why-us__card{
	border: 1px solid #ececec; border-radius: var(--weaam-radius);
	padding: 24px 20px; text-align: center; background: #fff;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.weaam-why-us__card:hover{ transform: translateY(-4px); box-shadow: var(--weaam-shadow); border-color: transparent; }
.weaam-why-us__icon{
	display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
	width: 56px; height: 56px; border-radius: 16px;
	background: color-mix(in srgb, var(--weaam-accent) 16%, white);
	color: var(--weaam-accent);
}
.weaam-why-us__icon svg{ width: 26px; height: 26px; }
.weaam-why-us__card h3{ font-size: 17px; margin-bottom: 8px; }
.weaam-why-us__card p{ font-size: 13.5px; color: #666; line-height: 1.7; margin: 0; }
.weaam-why-us__media{ position: relative; flex: 1 1 360px; max-width: 460px; }
.weaam-why-us__img{
	width: 100%; aspect-ratio: 3 / 4; min-height: 380px; border-radius: 24px;
	background-size: cover; background-position: center; box-shadow: var(--weaam-shadow);
}
.weaam-why-us__badge{
	position: absolute; bottom: 24px; inset-inline-end: -18px;
	display: flex; align-items: center; gap: 12px;
	background: #fff; border-radius: 16px; padding: 14px 18px;
	box-shadow: 0 12px 28px rgba(0,0,0,.15); max-width: 220px;
}
.weaam-why-us__badge-icon{
	flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
	background: var(--weaam-accent); color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 18px;
}
.weaam-why-us__badge b{ display: block; font-size: 17px; color: var(--weaam-text); }
.weaam-why-us__badge span{ font-size: 12.5px; color: #777; line-height: 1.4; }

@media (max-width: 900px){
	.weaam-why-us__layout{ flex-direction: column; gap: 36px; }
	/* Requested mobile order: photo first, then the eyebrow+heading+grid content block. */
	.weaam-why-us__media{ order: -1; max-width: 320px; margin-inline: auto; }
	.weaam-why-us__badge{ inset-inline-end: 8px; }
	.weaam-why-us__title{ font-size: 24px; max-width: none; }
}
@media (max-width: 480px){
	.weaam-why-us__grid{ gap: 12px; }
	.weaam-why-us__card{ padding: 16px 10px; }
	.weaam-why-us__icon{ width: 46px; height: 46px; border-radius: 12px; margin-bottom: 10px; }
	.weaam-why-us__icon svg{ width: 20px; height: 20px; }
	.weaam-why-us__card h3{ font-size: 14.5px; }
	.weaam-why-us__card p{ font-size: 12px; }
}

.weaam-section-cta{ text-align: center; margin-top: 36px; }

.weaam-cta-card{ position: relative; background: var(--weaam-primary-light); border-radius: var(--weaam-radius); padding: 36px; text-align: center; overflow: hidden; background-size: cover; background-position: center; }
.weaam-cta-card--accent{ background-color: color-mix(in srgb, var(--weaam-accent) 18%, white); }
.weaam-cta-card--has-img{ min-height: 320px; display: flex; align-items: flex-end; }
.weaam-cta-card__overlay{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(34,41,47,.15), rgba(34,41,47,.85)); }
.weaam-cta-card__body{ position: relative; z-index: 1; width: 100%; }
.weaam-cta-card--has-img h3, .weaam-cta-card--has-img p{ color: #fff; }

/* ===== Shared drag-slider engine =====
 * Used by both the homepage "Explore our menu" products slider and the
 * customer testimonials slider — same drag/touch mechanics, same brand-
 * colored dot indicators, only the per-item width differs (see the two
 * modifier blocks below). */
.weaam-drag-slider{ position: relative; }
.weaam-drag-slider__track{
	display: flex; gap: 24px; overflow-x: auto; scroll-behavior: smooth;
	scroll-snap-type: x proximity; padding-bottom: 6px;
	-webkit-overflow-scrolling: touch; scrollbar-width: none;
	cursor: grab; user-select: none; touch-action: pan-x;
}
.weaam-drag-slider__track::-webkit-scrollbar{ display: none; }
.weaam-drag-slider.is-dragging .weaam-drag-slider__track{ cursor: grabbing; scroll-snap-type: none; }
.weaam-drag-slider__item{
	scroll-snap-align: start;
	min-width: 0;
	pointer-events: none;
}
.weaam-drag-slider__item a{ pointer-events: auto; }

/* Dot indicators — brand-colored so they read clearly as "this is a
 * slider", not generic gray. Hidden by JS when there's only one page. */
.weaam-drag-slider__dots{ display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.weaam-drag-slider__dots .weaam-drag-slider__dot{
	width: 9px; height: 9px; border-radius: 999px; border: none;
	background: #d8dcdc; cursor: pointer; padding: 0;
	transition: width .3s ease, background .3s ease;
}
.weaam-drag-slider__dots .weaam-drag-slider__dot.is-active{ width: 26px; background: var(--weaam-primary); }

/* Variant: products — 4 visible desktop, 2 visible mobile. */
.weaam-drag-slider--products .weaam-drag-slider__item{ flex: 0 0 calc((100% - 3*24px) / 4); }
@media (max-width: 860px){
	.weaam-drag-slider--products .weaam-drag-slider__item{ flex-basis: calc((100% - 24px) / 2); }
}

/* Variant: testimonials — 3 visible desktop, 1 full + ~20% peek on mobile
 * (the visible sliver signals there's more to drag through). */
.weaam-drag-slider--testimonials .weaam-drag-slider__item{ flex: 0 0 calc((100% - 2*24px) / 3); }
@media (max-width: 860px){
	.weaam-drag-slider--testimonials{ }
	.weaam-drag-slider--testimonials .weaam-drag-slider__track{ gap: 16px; }
	.weaam-drag-slider--testimonials .weaam-drag-slider__item{ flex-basis: calc((100% - 16px) / 1.2); }
}

/* Horizontal testimonial card: avatar on one side, stars + quote + name
 * on the other — direction-aware automatically via flexbox + dir attr. */
.weaam-testimonial-card{
	display: flex; gap: 16px; align-items: flex-start;
	background: #fff; border-radius: var(--weaam-radius); padding: 22px;
	box-shadow: var(--weaam-shadow); height: 100%; box-sizing: border-box;
}
.weaam-testimonial-card__avatar{ width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.weaam-testimonial-card__content{ display: flex; flex-direction: column; min-width: 0; }
.weaam-testimonial-card__stars{ color: var(--weaam-primary-light); font-size: 16px; letter-spacing: 2px; margin-bottom: 8px; }
.weaam-testimonial-card__stars .is-filled{ color: var(--weaam-accent); }
.weaam-testimonial-card__text{ color: #444; font-size: 14px; line-height: 1.75; margin-bottom: 12px; }
.weaam-testimonial-card__name{ font-size: 14px; }
.weaam-testimonial-card__role{ font-size: 12px; color: #888; }

/* ===== Branches teaser (image + text) ===== */
.weaam-branches-teaser__inner{ display: flex; flex-wrap: wrap; gap: 44px; align-items: center; }
.weaam-branches-teaser__img{ flex: 1 1 420px; min-height: 320px; border-radius: var(--weaam-radius); background-size: cover; background-position: center; }
.weaam-branches-teaser__content{ flex: 1 1 360px; text-align: start; }
.weaam-branches-teaser__content .section-title{ text-align: start; }
.weaam-branches-teaser__content .section-title::after{ margin: 14px 0 0; }

/* ===== Products catalog ===== */

/* Search box: wide and centered above the category tabs. */
.weaam-catalog__search{ display: flex; justify-content: center; margin-bottom: 30px; }
.weaam-search-box{ position: relative; width: 100%; max-width: 640px; }
.weaam-search-box__icon{
	position: absolute; inset-inline-start: 20px; top: 50%; transform: translateY(-50%);
	width: 22px; height: 22px; color: #9aa3a3; pointer-events: none;
}
.weaam-search-box__input{
	width: 100%; padding-block: 17px; padding-inline: 52px 20px;
	border: 2px solid #ececec; border-radius: 999px;
	font-family: var(--weaam-font-body); font-size: 16px; color: var(--weaam-text);
	background: #fff; box-shadow: var(--weaam-shadow);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.weaam-search-box__input:focus{
	outline: none; border-color: var(--weaam-primary);
	box-shadow: 0 0 0 4px var(--weaam-primary-light), var(--weaam-shadow);
}
.weaam-search-box__input::placeholder{ color: #9aa3a3; }
.weaam-search-box__results{
	position: absolute; z-index: 20; top: calc(100% + 8px); inset-inline: 0;
	background: #fff; border-radius: var(--weaam-radius); box-shadow: var(--weaam-shadow);
	max-height: 380px; overflow-y: auto; padding: 8px;
}
.weaam-search-box__result{
	display: flex; align-items: center; gap: 12px;
	padding: 8px; border-radius: 10px; text-decoration: none; color: var(--weaam-text);
	transition: background .15s ease;
}
.weaam-search-box__result:hover,
.weaam-search-box__result:focus{ background: var(--weaam-primary-light); }
.weaam-search-box__result-img{
	flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px;
	background-size: cover; background-position: center; background-color: var(--weaam-primary-light);
}
.weaam-search-box__result-title{ font-weight: 600; font-size: 14.5px; }
.weaam-search-box__empty{ padding: 16px; text-align: center; color: #999; font-size: 14px; }

.weaam-catalog__tabs-wrap{ position: relative; margin-bottom: 34px; }
.weaam-catalog__tabs{
	display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity;
	padding: 4px 4px 12px; margin: 0 -4px;
	scrollbar-width: none; -ms-overflow-style: none;
}
.weaam-catalog__tabs::-webkit-scrollbar{ display: none; }
.weaam-catalog__tabs-wrap::before,
.weaam-catalog__tabs-wrap::after{
	content: ""; position: absolute; top: 0; bottom: 12px; width: 28px;
	pointer-events: none; z-index: 1; transition: opacity .2s ease;
}
.weaam-catalog__tabs-wrap::before{
	inset-inline-start: 0;
	background: linear-gradient(to var(--weaam-fade-dir-start, right), #fff, transparent);
}
.weaam-catalog__tabs-wrap::after{
	inset-inline-end: 0;
	background: linear-gradient(to var(--weaam-fade-dir-end, left), #fff, transparent);
}
.weaam-catalog__tabs-wrap.is-at-start::before{ opacity: 0; }
.weaam-catalog__tabs-wrap.is-at-end::after{ opacity: 0; }
.weaam-tab{
	background: var(--weaam-primary-light);
	border: none;
	padding: 10px 22px;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 700;
	font-family: var(--weaam-font-body);
	color: var(--weaam-text);
	text-decoration: none;
	display: inline-block;
	white-space: nowrap; flex-shrink: 0;
	scroll-snap-align: start;
	transition: background .2s ease, color .2s ease;
}
.weaam-tab.is-active{ background: var(--weaam-primary); color: #fff; }

/* Infinite-scroll loader shown at the bottom of the products grid while
 * the next batch of 12 is being fetched. */
.weaam-catalog__loader{
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 32px 0; color: #888; font-size: 14px;
}
.weaam-catalog__spinner{
	width: 20px; height: 20px; border-radius: 50%;
	border: 3px solid var(--weaam-primary-light); border-top-color: var(--weaam-primary);
	animation: weaam-spin .8s linear infinite;
}
@keyframes weaam-spin{ to{ transform: rotate(360deg); } }

/* Shared pagination style (products catalog + blog) */
.weaam-pagination{ display: flex; justify-content: center; gap: 8px; margin-top: 44px; flex-wrap: wrap; }
.weaam-pagination .page-numbers{
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 10px;
	border-radius: 10px; background: var(--weaam-primary-light);
	color: var(--weaam-text); font-weight: 700; text-decoration: none;
	transition: background .2s ease, color .2s ease;
}
.weaam-pagination .page-numbers:hover{ background: var(--weaam-primary); color: #fff; }
.weaam-pagination .page-numbers.current{ background: var(--weaam-primary); color: #fff; }
.weaam-pagination .page-numbers.dots{ background: transparent; }

/* Fixed 4 columns desktop / 2 columns mobile — never collapses to 1,
 * even on small phones, per the catalog page spec. */
.weaam-catalog__grid--4col{ display: flex; flex-wrap: wrap; gap: 24px; }
.weaam-catalog__grid--4col > *{ flex: 0 1 calc(25% - 18px); min-width: 0; }
@media (max-width: 860px){
	.weaam-catalog__grid--4col > *{ flex: 0 1 calc(50% - 12px); }
}
@media (max-width: 420px){
	.weaam-catalog__grid--4col{ gap: 14px; }
	.weaam-catalog__grid--4col > *{ flex: 0 1 calc(50% - 7px); }
}

/* ===== Branches (tabs + map) ===== */
.weaam-branches__tabs{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.weaam-branches__panel{ display: none; }
.weaam-branches__panel.is-active{ display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap; }
.weaam-branches__panel.is-active .weaam-branches__map{ flex: 1.4 1 380px; }
.weaam-branches__panel.is-active .weaam-branches__info{ flex: 1 1 280px; }
.weaam-branches__map iframe{ width: 100%; height: 360px; border: 0; border-radius: var(--weaam-radius); }
.weaam-map-placeholder{ background: var(--weaam-primary-light); border-radius: var(--weaam-radius); height: 200px; display: flex; align-items: center; justify-content: center; }
.weaam-branches__info{ background: #fff; border: 1px solid #eee; border-radius: var(--weaam-radius); padding: 26px; }
.weaam-branch-detail{
	display: flex; align-items: flex-start; gap: 10px;
	margin-bottom: 14px;
}
.weaam-branch-detail__icon{
	flex-shrink: 0; width: 22px; height: 22px;
	color: var(--weaam-primary);
	overflow: hidden;
}
.weaam-branch-detail__icon svg{ display: block; width: 22px; height: 22px; }
.weaam-branch-detail__icon svg{ width: 100%; height: 100%; }
.weaam-branch-detail--hours{ color: #1f9d55; font-weight: 700; }
.weaam-branch-detail--hours .weaam-branch-detail__icon{ color: #1f9d55; }

/* ===== Forms ===== */
.weaam-form-wrap{ max-width: 720px; margin-inline: auto; }
.weaam-required{ color: #ff6b6b; font-weight: 700; }

/* ===== CV / resume upload widget: idle → uploading (progress) → done (green + checkmark) ===== */
.weaam-cv-upload__dropzone{
	position: relative; border: 1px solid #ddd; border-radius: 10px;
	padding: 14px; background: #fff; box-sizing: border-box;
}
.weaam-cv-upload__input{ width: 100%; font-size: 14px; }
.weaam-cv-upload__progress-wrap{ display: flex; flex-direction: column; gap: 8px; }
.weaam-cv-upload__progress-bar{
	width: 100%; height: 8px; border-radius: 999px; background: var(--weaam-primary-light);
	overflow: hidden;
}
.weaam-cv-upload__progress-bar span{
	display: block; height: 100%; width: 0%; background: var(--weaam-primary);
	border-radius: 999px; transition: width .2s ease;
}
.weaam-cv-upload__status{ font-size: 13px; color: #666; display: flex; justify-content: space-between; }
.weaam-cv-upload__pct{ color: var(--weaam-primary); }
.weaam-cv-upload__done{
	display: flex; align-items: center; gap: 10px;
	background: #eafaf0; border: 1px solid #b7ecc9; border-radius: 8px;
	padding: 10px 12px; color: #1f9d55; font-weight: 600;
}
.weaam-cv-upload__check{
	flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
	background: #1f9d55; color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 14px; font-weight: 700;
}
.weaam-cv-upload__filename{ flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weaam-cv-upload__remove{
	flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; border: none;
	background: rgba(31,157,85,.12); color: #1f9d55; font-size: 16px; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.weaam-cv-upload__remove:hover{ background: rgba(31,157,85,.22); }
.weaam-form__honeypot{ position: absolute; inset-inline-start: -9999px; }

/* ===== Split form-page layout: form fixed to the physical LEFT (40%),
 * supporting a smaller image/text side panel (40%) — the form is the
 * larger, dominant element as requested. This is a deliberate fixed
 * left/right split, not a logical start/end one, so it stays consistent
 * regardless of Arabic or English. ===== */
.weaam-split-form{
	display: flex; direction: ltr; min-height: 560px;
	border-radius: var(--weaam-radius); overflow: hidden;
	box-shadow: var(--weaam-shadow);
}
.weaam-split-form__form{
	flex: 0 0 60%; box-sizing: border-box;
	padding: 56px 48px; direction: rtl;
	display: flex; align-items: center;
}
html[dir="ltr"] .weaam-split-form__form{ direction: ltr; }
.weaam-split-form__form .weaam-form-wrap{ width: 100%; max-width: 520px; margin-inline: 0; }
.weaam-split-form__side{
	flex: 0 0 40%; box-sizing: border-box; background: #f7f9f9;
	padding: 40px; display: flex; flex-direction: column; gap: 28px;
	direction: rtl;
}
html[dir="ltr"] .weaam-split-form__side{ direction: ltr; }

/* Framed image card with a creative brand-colored accent border along
 * the bottom, plus up to two floating "badge" labels overlapping its
 * edges — matching the reference design. */
.weaam-split-form__image-wrap{
	position: relative; margin-top: 20px; margin-bottom: 12px;
}
.weaam-split-form__image{
	aspect-ratio: 4 / 3; min-height: 260px; border-radius: 22px;
	background-size: cover; background-position: center;
	box-shadow: var(--weaam-shadow);
	border-bottom: 7px solid var(--weaam-primary);
	position: relative;
}
.weaam-split-form__badge{
	position: absolute; z-index: 2;
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; border-radius: 999px; padding: 10px 18px;
	box-shadow: 0 10px 24px rgba(0,0,0,.14);
	font-weight: 700; font-size: 13px; white-space: nowrap; color: var(--weaam-text);
}
.weaam-split-form__badge-icon{
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--weaam-primary-light); color: var(--weaam-primary); font-size: 12px;
}
.weaam-split-form__badge--top-start{ top: -14px; inset-inline-start: -14px; }
.weaam-split-form__badge--top-end{ top: -14px; inset-inline-end: -14px; }
.weaam-split-form__badge--bottom-start{ bottom: 6px; inset-inline-start: -14px; }
.weaam-split-form__badge--bottom-end{ bottom: 6px; inset-inline-end: -14px; }

.weaam-split-form__side-content h2{ font-size: 26px; margin-bottom: 14px; }
.weaam-split-form__side-content p{ font-size: 15px; line-height: 1.85; color: #555; margin-bottom: 22px; }
.weaam-split-form__features{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.weaam-split-form__features li{ display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.weaam-split-form__features li span{
	flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
	background: var(--weaam-primary-light); color: var(--weaam-primary);
	display: flex; align-items: center; justify-content: center;
	font-size: 12px; margin-top: 2px;
}
.weaam-split-form__features--grid{
	display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px;
}
@media (max-width: 900px){
	.weaam-split-form{ flex-direction: column; margin-inline: 0; min-height: 0; }
	.weaam-split-form__form, .weaam-split-form__side{ flex-basis: auto; }
	.weaam-split-form__form{ padding: 32px 20px; order: 2; }
	.weaam-split-form__side{ order: 1; padding: 28px 20px; }
	.weaam-split-form__form .weaam-form-wrap{ max-width: 100%; }
	.weaam-split-form__form .weaam-form{ grid-template-columns: 1fr; }
	.weaam-split-form__features--grid{ grid-template-columns: 1fr; }
	.weaam-split-form__badge{ font-size: 12px; padding: 8px 14px; }
}
@media (max-width: 480px){
	.weaam-split-form__form{ padding: 24px 16px; }
	.weaam-split-form__image-wrap{ margin-top: 14px; }
	.weaam-split-form__badge--top-start, .weaam-split-form__badge--top-end{ top: -10px; }
}

/* ===== Contact page: dedicated design (form + text panel), matching
 * the reference layout. Deliberately NOT fixed to a physical side —
 * normal DOM/flex order lets it mirror naturally: Arabic (RTL) shows
 * the text panel (first in the markup) on the right and the form on
 * the left; English (LTR) mirrors automatically to text-left/form-right. */
.weaam-contact-split{
	display: flex; flex-wrap: wrap; gap: 64px; align-items: flex-start;
}
.weaam-contact-split__side{ flex: 1 1 380px; }
.weaam-contact-split__side h2{ font-size: 30px; margin-bottom: 18px; }
.weaam-contact-split__side > p{ font-size: 16px; line-height: 1.9; color: #555; margin-bottom: 40px; }
.weaam-contact-split__block{ margin-bottom: 32px; }
.weaam-contact-split__block h3{
	font-size: 17px; display: inline-block; position: relative; padding-bottom: 8px; margin-bottom: 12px;
}
.weaam-contact-split__block h3::after{
	content: ""; position: absolute; bottom: 0; inset-inline-start: 0;
	width: 100%; height: 3px; background: var(--weaam-accent); border-radius: 2px; opacity: .6;
}
.weaam-contact-split__value{ display: block; color: #666; font-size: 15px; direction: ltr; text-align: end; }
.weaam-contact-split__block .weaam-social-links{ margin-top: 4px; }
.weaam-contact-split__form{ flex: 1 1 420px; }
.weaam-contact-split__form .weaam-form-wrap{ background: #f7f9f9; border-radius: var(--weaam-radius); padding: 40px; }
.weaam-contact-split__form .weaam-form{ grid-template-columns: 1fr; }
@media (max-width: 780px){
	.weaam-contact-split{ gap: 40px; }
	.weaam-contact-split__form .weaam-form-wrap{ padding: 24px; }
}
.weaam-form{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.weaam-form__row{ display: flex; flex-direction: column; gap: 6px; }
.weaam-form__row--full{ grid-column: 1 / -1; }
.weaam-form label{ font-weight: 700; font-size: 14px; }
.weaam-form input, .weaam-form textarea, .weaam-form select{
	padding: 12px 14px;
	border: 1px solid #ddd;
	border-radius: 10px;
	font-family: var(--weaam-font-body);
	font-size: 15px;
	width: 100%;
	box-sizing: border-box;
	background: #fff;
}
.weaam-form select{
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
	padding-inline-start: 40px;
}
html[dir="ltr"] .weaam-form select{
	background-position: right 14px center;
	padding-inline-start: 14px;
	padding-inline-end: 40px;
}
.weaam-form input:focus, .weaam-form textarea:focus, .weaam-form select:focus{ outline: 2px solid var(--weaam-primary); border-color: var(--weaam-primary); }
/* Explicit alignment/direction for every form field and label — a
 * direct, unambiguous guarantee independent of inheritance, since forms
 * sit inside several nested wrappers (including the split-form layout's
 * forced-ltr outer shell) where relying purely on inherited direction
 * is more fragile. */
html[dir="rtl"] .weaam-form,
html[dir="rtl"] .weaam-form label,
html[dir="rtl"] .weaam-form input,
html[dir="rtl"] .weaam-form textarea,
html[dir="rtl"] .weaam-form select{ text-align: right; direction: rtl; }
html[dir="ltr"] .weaam-form,
html[dir="ltr"] .weaam-form label,
html[dir="ltr"] .weaam-form input,
html[dir="ltr"] .weaam-form textarea,
html[dir="ltr"] .weaam-form select{ text-align: left; direction: ltr; }
.weaam-form input.weaam-form__readonly{
	background: #eaf7ea;
	border-color: #cbe8cb;
	color: #2f6f3f;
	cursor: default;
	font-size: 14px;
	direction: ltr;
	text-align: end;
}
.weaam-form input.weaam-form__readonly::placeholder{ color: #6a9b78; }
@media (max-width: 640px){ .weaam-form{ grid-template-columns: 1fr; } }

.weaam-notice{ grid-column: 1 / -1; padding: 14px 18px; border-radius: 10px; margin-bottom: 10px; font-weight: 700; }
.weaam-notice--success{ background: #e6f8e6; color: #1e7a1e; }
.weaam-notice--error{ background: #fdeaea; color: #b32020; }

.weaam-email-badge{ margin-top: 26px; text-align: center; background: color-mix(in srgb, var(--weaam-accent) 15%, white); border: 1px solid var(--weaam-accent); border-radius: var(--weaam-radius); padding: 20px; }
.weaam-email-badge a{ display: block; font-size: 22px; font-weight: 800; color: var(--weaam-accent); margin-top: 6px; }
.weaam-split-form__extra{ margin-top: 32px; }
.weaam-split-form__extra .weaam-email-badge{ margin-top: 0; max-width: 560px; margin-inline: auto; }

/* ===== Page header / breadcrumb ===== */
.weaam-breadcrumb{ padding-block: 16px; font-size: 14px; color: #777; }
.weaam-page-title{ text-align: center; padding-block: 30px 10px; }
.weaam-page-title h1{ font-size: 34px; }
.weaam-page-content{ padding-bottom: 60px; }
.weaam-page-content.container{ padding-top: 10px; }

/* Any hyperlink inserted into actual page/article body content (Privacy
 * Policy, Terms, blog articles, and any future text-content page) is
 * styled consistently: the site's main brand color, underlined, so
 * it's always clearly recognizable as a link — regardless of which
 * specific page it's added to, now or later. */
.weaam-page-content a:not(.btn),
.weaam-post-content a:not(.btn){
	color: var(--weaam-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color .2s ease;
}
.weaam-page-content a:not(.btn):hover,
.weaam-post-content a:not(.btn):hover{
	color: var(--weaam-accent);
}

/* ===== Blog ===== */
.weaam-blog-grid{ margin-top: 30px; }
/* Blog cards always keep their "3 across" width even when there are
 * fewer than 3 posts on a page — same fixed-size fix as the product grid. */
.weaam-blog-grid.weaam-grid--3 > *{ flex: 0 1 calc(33.333% - 19px); min-width: 240px; }
@media (max-width: 960px){ .weaam-blog-grid.weaam-grid--3 > *{ flex: 0 1 calc(50% - 14px); } }
@media (max-width: 600px){ .weaam-blog-grid.weaam-grid--3 > *{ flex: 0 1 100%; } }
.weaam-post-card .weaam-card__img{ display: block; aspect-ratio: 10 / 6; min-height: 180px; }
.weaam-single-post{ max-width: 820px; }
.weaam-single-post__img img{ border-radius: var(--weaam-radius); margin-bottom: 24px; }
.weaam-post-meta{ color: #888; margin-bottom: 20px; }

/* ===== Single product ===== */
.weaam-single-product__grid{ display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; padding-block: 40px; }
.weaam-single-product__grid > *{ flex: 1 1 320px; }
.weaam-single-product__img{ background-size: cover; background-position: center; border-radius: var(--weaam-radius); aspect-ratio: 1/1; }
.weaam-price-note{ color: var(--weaam-accent); font-weight: 800; font-size: 18px; }
.weaam-currency-symbol{
	height: 1em; width: auto; display: inline-block;
	vertical-align: -0.08em; margin-inline-start: 4px;
	color: inherit;
}
.weaam-product-facts{ display: flex; flex-wrap: wrap; gap: 20px; margin: 18px 0; }
.weaam-product-facts__item{ display: flex; align-items: center; gap: 8px; }
.weaam-product-facts__icon{
	flex-shrink: 0; width: 26px; height: 26px; color: var(--weaam-primary);
}
.weaam-product-facts__icon svg{ width: 100%; height: 100%; }

/* ===== 404 ===== */
.weaam-404{ text-align: center; padding-block: 100px; }
.weaam-404 h1{ font-size: 90px; color: var(--weaam-primary-light); margin: 0; }

/* ===== Footer ===== */
.weaam-footer{ background: var(--weaam-text); color: #d7dade; padding-top: 64px; }
.weaam-footer__grid{ display: flex; flex-wrap: wrap; gap: 36px; padding-bottom: 40px; }
.weaam-footer__grid > *{ flex: 1 1 220px; }
.weaam-footer__col--brand{ flex: 1.3 1 260px; }
.weaam-footer h3, .weaam-footer h4{ color: #fff; }
.weaam-footer h4{ font-size: 17px; margin-bottom: 18px; position: relative; padding-bottom: 10px; }
.weaam-footer h4::after{ content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 40px; height: 3px; background: var(--weaam-primary); border-radius: 3px; }
.weaam-footer a{ opacity: .85; color: #d7dade; }
.weaam-footer a:hover{ opacity: 1; color: var(--weaam-primary-light); }
.weaam-footer__logo-text{ font-family: var(--weaam-font-heading); color: #fff; font-size: 24px; }
.weaam-footer__desc{ margin-block: 14px 18px; font-size: 14px; line-height: 1.9; opacity: .85; max-width: 320px; }
.weaam-footer__menu{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }

/* Social icons — circular, brand-colored on hover */
.weaam-social-links{ display: flex; gap: 14px; flex-wrap: wrap; }
.weaam-social-links__icon{
	width: 26px; height: 26px;
	display: flex; align-items: center; justify-content: center;
	transition: color .2s ease, transform .2s ease;
}
.weaam-social-links__icon svg{ width: 100%; height: 100%; }
/* Footer sits on a dark background — icons default to a soft off-white,
 * shifting to the brand teal on hover/focus/active (no background
 * shape behind them, just the icon itself changing color). */
.weaam-social-links__icon{ color: rgba(255,255,255,.82); }
.weaam-social-links__icon:hover,
.weaam-social-links__icon:focus-visible,
.weaam-social-links__icon:active{ color: var(--weaam-primary); transform: translateY(-3px) scale(1.08); }

/* Distinct variant for light backgrounds (e.g. the Contact page) —
 * icons show the brand teal by default, shifting to the brand gold
 * accent on hover/focus/active for a clean, identity-forward look. */
.weaam-social-links--brand{ justify-content: flex-start; }
.weaam-social-links--brand .weaam-social-links__icon{ color: var(--weaam-primary); }
.weaam-social-links--brand .weaam-social-links__icon:hover,
.weaam-social-links--brand .weaam-social-links__icon:focus-visible,
.weaam-social-links--brand .weaam-social-links__icon:active{ color: var(--weaam-accent); }
@media (max-width: 640px){
	.weaam-social-links.weaam-social-links--brand{ justify-content: flex-start !important; }
}

/* Column 4: trust badges (CR / VAT) */
.weaam-footer__badges{ display: flex; flex-direction: column; gap: 18px; }
.weaam-footer__badge{ display: flex; align-items: center; gap: 12px; }
.weaam-footer__badge img{ width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: #fff; padding: 4px; }
.weaam-footer__badge-icon{ width: 44px; height: 44px; border-radius: 8px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.weaam-footer__badge span{ display: flex; flex-direction: column; font-size: 13px; }
.weaam-footer__badge b{ color: #fff; font-size: 13px; margin-bottom: 3px; }

.weaam-footer__contact-info{ margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 12px; }
.weaam-footer__contact-link{
	display: flex; align-items: center; gap: 10px; color: #fff; font-size: 14px;
	transition: color .2s ease, transform .2s ease;
}
.weaam-footer__contact-link:hover{ color: var(--weaam-primary); transform: translateX(-2px); }
html[dir="ltr"] .weaam-footer__contact-link:hover{ transform: translateX(2px); }
.weaam-footer__contact-icon{
	flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
	background: rgba(255,255,255,.1); color: var(--weaam-primary);
	display: flex; align-items: center; justify-content: center;
}
.weaam-footer__contact-icon svg{ width: 16px; height: 16px; }

.weaam-footer__bottom{ border-top: 1px solid rgba(255,255,255,.12); padding-block: 18px; font-size: 14px; opacity: .8; }
.weaam-footer__bottom-inner{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.weaam-footer__legal a{ margin-inline-start: 18px; }
@media (max-width: 560px){
	.weaam-footer__bottom-inner{ justify-content: center; text-align: center; }
	.weaam-footer__legal a{ margin-inline: 9px; }
}

/* Mobile footer layout: brand block centered on its own row, the two
 * menu columns sit side-by-side as a pair, badges centered below —
 * matches natural DOM order via flex-basis percentages, no reordering
 * needed. */
@media (max-width: 640px){
	.weaam-footer__grid{ gap: 30px 16px; }
	.weaam-footer__col--brand{
		flex-basis: 100%; text-align: center;
		display: flex; flex-direction: column; align-items: center;
	}
	.weaam-footer__desc{ margin-inline: auto; }
	.weaam-social-links{ justify-content: center; }
	.weaam-footer__grid > .weaam-footer__col:not(.weaam-footer__col--brand):not(.weaam-footer__col--badges){
		flex-basis: calc(50% - 8px);
		flex-grow: 0;
	}
	.weaam-footer__col--badges{
		flex-basis: 100%; text-align: center;
	}
	.weaam-footer__badges{ align-items: center; }
	.weaam-footer__badge{ max-width: 260px; }
	.weaam-footer__contact-info{ align-items: center; }
}

/* ===== Site-wide scroll-reveal: elements fade + slide up smoothly as
 * they enter the viewport (professional, subtle — matches the feel of
 * major international marketing sites). JS (theme.js) auto-applies the
 * .weaam-reveal class to common content patterns and toggles
 * .is-visible via IntersectionObserver; this stays inert (does nothing)
 * if JavaScript is unavailable, since the base state is only applied
 * once JS confirms it can also reveal the element again. */
.weaam-reveal{
	opacity: 0; transform: translateY(28px);
	transition: opacity .7s cubic-bezier(.25,.46,.45,.94), transform .7s cubic-bezier(.25,.46,.45,.94);
}
.weaam-reveal.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
	.weaam-reveal{ opacity: 1; transform: none; transition: none; }
}

/* ===== Consistent, subtle hover feedback across interactive elements ===== */
.btn{ transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease; }
.btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.12); }
.btn:active{ transform: translateY(0); }
.weaam-catalog__item .weaam-card,
.weaam-drag-slider__item .weaam-card{ transition: transform .3s ease, box-shadow .3s ease; }
.weaam-catalog__item .weaam-card:hover,
.weaam-drag-slider__item .weaam-card:hover{ box-shadow: 0 20px 40px rgba(0,0,0,.1); }
.weaam-nav__list a{ transition: color .2s ease; }
.weaam-lang-switcher__link{ transition: transform .2s ease, background .2s ease; }
.weaam-lang-switcher__link:hover{ transform: translateY(-1px); }
.weaam-why-us__icon{ transition: transform .3s ease; }
.weaam-why-us__card:hover .weaam-why-us__icon{ transform: scale(1.1) rotate(-4deg); }
.weaam-branches__info a[href^="tel:"]{ transition: color .2s ease; }