/* AdaWall Theme — luxury wallpaper catalog. Mobile-first, RTL.
 * Palette: royal blue (primary buttons), deep navy (secondary), ivory/white surfaces,
 * warm beige & champagne backgrounds, calm gold details. Logo colours: #185BA9 / #211E1F.
 */
:root {
	--royal: #185BA9;
	--royal-2: #2D74C9;
	--navy: #0F2A52;
	--navy-2: #1B3F72;
	--ink: #211E1F;
	--text: #2B2724;
	--muted: #7C7369;
	--white: #FFFFFF;
	--ivory: #FBF8F2;
	--cream: #F5EDE0;
	--beige: #EADCC5;
	--champagne: #E2CBA4;
	--gold: #B08A48;
	--gold-2: #D4B57A;
	--gold-soft: #F4E9D4;
	--wa: #1DA851;
	--wa-2: #0E7C3A;
	--line: #EADFCD;
	--radius: 24px;
	--radius-sm: 16px;
	--shadow: 0 1px 2px rgba(80, 60, 30, .06), 0 14px 34px rgba(80, 60, 30, .12);
	--shadow-lg: 0 24px 60px rgba(60, 42, 18, .22);
	--bar-h: 84px;
	--font: "Segoe UI", "Noto Kufi Arabic", "Noto Sans Arabic", "SF Arabic", "Geeza Pro", Tahoma, system-ui, sans-serif;
	--font-latin: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
	--ease: cubic-bezier(.22, .8, .24, 1);
	/* Legacy aliases used by other templates. */
	--brand: var(--royal); --brand-2: var(--royal-2); --brand-deep: var(--navy); --logo-ink: var(--ink); --deep: var(--navy);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font);
	color: var(--text);
	background-color: var(--cream);
	background-image:
		radial-gradient(1200px 600px at 100% -10%, rgba(255, 255, 255, .9), transparent 60%),
		radial-gradient(900px 700px at -10% 40%, rgba(226, 203, 164, .45), transparent 65%),
		linear-gradient(165deg, var(--ivory) 0%, var(--cream) 40%, var(--beige) 100%);
	background-attachment: fixed;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	padding-bottom: calc(var(--bar-h) + 18px + env(safe-area-inset-bottom));
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--royal-2); outline-offset: 3px; border-radius: 8px; }
.awt-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.awt-skip { position: absolute; inset-inline-start: -9999px; z-index: 100; }
.awt-skip:focus { inset-inline-start: 12px; top: 12px; background: #fff; padding: 8px 12px; border-radius: 8px; color: var(--ink); }
.awt-ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ---------- Header ---------- */
.awt-header {
	position: sticky; top: 0; z-index: 30;
	background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(251, 248, 242, .9));
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom-left-radius: 26px; border-bottom-right-radius: 26px;
	box-shadow: 0 10px 30px rgba(80, 60, 30, .10);
	transition: transform .35s var(--ease);
}
.awt-header.is-up { transform: translateY(-110%); }
.awt-header-inner {
	max-width: 760px; margin: 0 auto;
	display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; align-items: center;
	padding: 10px 16px; gap: 10px; min-height: 76px;
}
.awt-brand { justify-self: center; text-decoration: none; display: flex; align-items: center; min-width: 0; max-width: 100%; }
.awt-logo { display: block; line-height: 0; }
.awt-logo-img { display: block; width: auto; height: auto; }
.awt-logo-img--header { height: 56px; width: auto; max-width: 52vw; object-fit: contain; }
.awt-round-btn {
	width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
	background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none;
	box-shadow: 0 4px 12px rgba(80, 60, 30, .08); transition: transform .2s var(--ease), background .2s;
}
.awt-round-btn:hover { background: var(--gold-soft); }
.awt-round-btn:active { transform: scale(.94); }
.awt-round-btn .awt-ico { width: 22px; height: 22px; }

.awt-preview-bar { background: var(--royal); color: #fff; text-align: center; font-size: 13px; padding: 6px 12px; font-weight: 600; }
.awt-preview-bar a { text-decoration: underline; color: #fff; }

/* ---------- Section chips ---------- */
.awt-chips { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px 2px; max-width: 760px; margin: 0 auto; scrollbar-width: none; }
.awt-chips::-webkit-scrollbar { display: none; }
.awt-chip { flex: none; padding: 7px 16px; border-radius: 999px; color: var(--text); text-decoration: none; font-size: 14px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); white-space: nowrap; }
.awt-chip.is-on { background: var(--royal); color: #fff; border-color: var(--royal); }
.awt-section-title { color: var(--ink); text-align: center; margin: 16px 0 0; font-weight: 700; font-size: 20px; }

/* ---------- Catalog feed ---------- */
.awt-main { max-width: 760px; margin: 0 auto; padding: 18px 16px 8px; }
.awt-feed { display: grid; gap: 22px; }
.awt-card {
	position: relative; border-radius: var(--radius); overflow: hidden;
	background: #fff; padding: 8px;
	box-shadow: var(--shadow);
	border: 1px solid rgba(255, 255, 255, .9);
	animation: awt-rise .6s var(--ease) both;
}
.awt-card:nth-child(2) { animation-delay: .06s; } .awt-card:nth-child(3) { animation-delay: .12s; }
@keyframes awt-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.awt-card-media { display: block; border-radius: 18px; overflow: hidden; background: var(--cream); }
.awt-card-media img { width: 100%; height: auto; transition: transform .7s var(--ease); }
.awt-card:hover .awt-card-media img { transform: scale(1.02); }
.awt-fav {
	position: absolute; top: 20px; inset-inline-start: 20px; z-index: 2;
	width: 46px; height: 46px; border-radius: 50%; border: 0;
	display: grid; place-items: center; color: #fff;
	background: rgba(33, 30, 31, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7);
	transition: transform .2s var(--ease), background .2s;
}
.awt-fav .awt-ico { width: 24px; height: 24px; }
.awt-fav[aria-pressed="true"] { background: #fff; color: #C0392B; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); }
.awt-fav[aria-pressed="true"] .awt-ico { fill: currentColor; }
.awt-fav:active { transform: scale(.9); }
.awt-code {
	position: absolute; top: 22px; inset-inline-end: 20px; z-index: 2;
	background: rgba(255, 255, 255, .92); color: var(--ink); font-family: var(--font-latin);
	font-weight: 700; font-size: 12px; letter-spacing: .5px; padding: 4px 12px; border-radius: 999px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.awt-hidden-badge { position: absolute; top: 60px; inset-inline-end: 20px; background: var(--royal); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; }
.awt-card-cta {
	position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 2;
	display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
	padding: 8px; padding-inline-start: 22px; min-height: 52px; border-radius: 999px;
	color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
	background: linear-gradient(135deg, var(--royal-2), var(--royal) 50%, var(--navy));
	box-shadow: 0 10px 26px rgba(15, 42, 82, .35), inset 0 0 0 1.5px rgba(255, 255, 255, .45);
	transition: transform .25s var(--ease), box-shadow .25s;
}
.awt-card-cta:hover { transform: translateX(-50%) translateY(-2px); box-shadow: 0 14px 30px rgba(15, 42, 82, .45), inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.awt-card-cta-arrow { width: 36px; height: 36px; border-radius: 50%; background: #fff; color: var(--royal); display: grid; place-items: center; }
.awt-card-cta-arrow .awt-ico { width: 18px; height: 18px; stroke-width: 2.2; }
.awt-favs-empty { text-align: center; color: var(--muted); padding: 30px 10px; }

/* ---------- Buttons ---------- */
.awt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 50px; padding: 0 20px; border-radius: 16px; border: 0;
	font-weight: 700; font-size: 15px; text-decoration: none; text-align: center;
	transition: transform .15s var(--ease), box-shadow .2s, background .2s;
}
.awt-btn:active { transform: scale(.98); }
.awt-btn--block { width: 100%; }
.awt-btn--lg { min-height: 58px; font-size: 17px; border-radius: 18px; }
.awt-btn--brand { background: linear-gradient(135deg, var(--royal-2), var(--royal) 55%, var(--navy)); color: #fff; box-shadow: 0 10px 24px rgba(24, 91, 169, .30); }
.awt-btn--navy { background: linear-gradient(135deg, var(--navy-2), var(--navy)); color: #fff; }
.awt-btn--light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.awt-btn--light:hover { background: var(--ivory); }
.awt-btn--dark { background: var(--ink); color: #fff; }
.awt-btn--ghost { background: transparent; color: var(--navy); }
.awt-btn--wa { background: linear-gradient(120deg, var(--wa) 0%, #179A57 40%, var(--royal) 100%); color: #fff; box-shadow: 0 12px 26px rgba(24, 91, 169, .28); }
.awt-btn--wa .awt-ico { width: 24px; height: 24px; }
.awt-icon-btn { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--ivory); display: grid; place-items: center; color: var(--muted); flex: none; }
.awt-icon-btn:hover { color: #B4232F; background: #FBEDEC; }

/* ---------- Bottom bar ---------- */
.awt-bar {
	position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
	bottom: calc(10px + env(safe-area-inset-bottom));
	width: min(560px, calc(100% - 20px));
	display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: 8px;
	padding: 8px; border-radius: 26px;
	background: rgba(255, 255, 255, .82); backdrop-filter: saturate(150%) blur(16px); -webkit-backdrop-filter: saturate(150%) blur(16px);
	box-shadow: 0 16px 40px rgba(60, 42, 18, .22), inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.awt-bar-btn {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	min-height: 66px; border-radius: 18px; border: 0; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 6px 14px rgba(0, 0, 0, .12);
	transition: transform .15s var(--ease), filter .2s;
}
.awt-bar-btn .awt-ico { width: 26px; height: 26px; }
.awt-bar-btn:active { transform: scale(.95); }
.awt-bar-btn:hover { filter: brightness(1.06); }
.awt-bar-btn--wa { background: linear-gradient(160deg, #2BC16A, var(--wa) 50%, var(--wa-2)); }
.awt-bar-btn--navy { background: linear-gradient(160deg, var(--navy-2), var(--navy)); }
.awt-bar-btn--royal { background: linear-gradient(160deg, var(--royal-2), var(--royal) 55%, #134C8F); }
.awt-bar-btn--gold { background: linear-gradient(160deg, #C9A15E, var(--gold) 55%, #8E6C33); }
.awt-badge { position: absolute; top: 6px; inset-inline-end: 10px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #fff; color: var(--navy); font-size: 11px; font-weight: 800; display: grid; place-items: center; font-family: var(--font-latin); }

/* ---------- Sheets ---------- */
body.awt-lock { overflow: hidden; }
.awt-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(33, 24, 12, .42); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: awt-fade .2s ease both; }
@keyframes awt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes awt-up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes awt-side { from { transform: translateX(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.awt-sheet-panel {
	position: relative; width: min(620px, 100%); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
	background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
	border-radius: 28px 28px 0 0; padding: 26px 18px calc(22px + env(safe-area-inset-bottom));
	box-shadow: var(--shadow-lg);
	animation: awt-up .28s var(--ease) both;
}
.awt-sheet-panel::before { content: ""; position: absolute; top: 9px; left: 50%; width: 42px; height: 4px; border-radius: 4px; background: var(--beige); transform: translateX(-50%); }
@media (min-width: 700px) { .awt-sheet { align-items: center; } .awt-sheet-panel { border-radius: 28px; max-height: 86vh; } .awt-sheet-panel::before { display: none; } }
.awt-sheet-close { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); display: grid; place-items: center; color: var(--ink); }
.awt-sheet-title { font-size: 21px; margin: 4px 0 2px; padding-inline-end: 48px; color: var(--ink); }
.awt-sheet-sub { color: var(--muted); margin: 0 0 16px; font-size: 14px; }
.awt-sheet-note { color: var(--muted); font-size: 14px; display: flex; gap: 6px; align-items: center; justify-content: center; margin: 14px 0 0; }

.awt-sheet--side { justify-content: flex-start; align-items: stretch; }
.awt-sheet--side .awt-sheet-panel { width: min(340px, 86vw); max-height: none; height: 100%; border-radius: 28px 0 0 28px; padding-top: 22px; animation: awt-side .28s var(--ease) both; }
.awt-sheet--side .awt-sheet-panel::before { display: none; }
.awt-menu-logo { display: flex; justify-content: center; margin: 18px 0; }
.awt-menu-logo .awt-logo-img--footer { width: 190px; }
.awt-menu-list { display: grid; gap: 6px; }
.awt-menu-list a, .awt-menu-list button {
	display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
	padding: 13px 14px; border-radius: 14px; border: 0; background: transparent; text-decoration: none; font-size: 16px; font-weight: 600; color: var(--ink);
}
.awt-menu-list a:hover, .awt-menu-list button:hover { background: var(--gold-soft); }
.awt-menu-list .awt-ico { color: var(--gold); width: 22px; height: 22px; }

.awt-sheet--top { align-items: flex-start; }
.awt-sheet--top .awt-sheet-panel { border-radius: 0 0 28px 28px; max-height: 80vh; animation: awt-fade .2s ease both; }
.awt-sheet--top .awt-sheet-panel::before { display: none; }
.awt-search-field { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0 14px; min-height: 54px; margin: 10px 0 12px; }
.awt-search-field:focus-within { border-color: var(--royal); box-shadow: 0 0 0 3px rgba(24, 91, 169, .14); }
.awt-search-field .awt-ico { color: var(--gold); }
.awt-search-field input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; min-width: 0; }

.awt-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.awt-list-item { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 18px; padding: 8px; box-shadow: 0 2px 10px rgba(80, 60, 30, .07); }
.awt-list-link { flex: 1; display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; }
.awt-list-link img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; background: var(--cream); flex: none; }
.awt-list-txt { min-width: 0; }
.awt-list-txt strong { display: block; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.awt-list-txt small { display: block; color: var(--muted); font-family: var(--font-latin); direction: ltr; text-align: end; }
.awt-list-empty { text-align: center; color: var(--muted); padding: 18px 8px; }

/* Contacts */
.awt-contacts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.awt-contact {
	display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
	padding: 14px 6px; border-radius: 18px; background: #fff; text-decoration: none; min-height: 116px;
	box-shadow: 0 2px 10px rgba(80, 60, 30, .07); transition: transform .15s, box-shadow .2s;
}
.awt-contact:hover { box-shadow: 0 8px 20px rgba(80, 60, 30, .14); }
.awt-contact:active { transform: scale(.97); }
.awt-contact-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--navy); }
.awt-contact-ico .awt-ico { width: 24px; height: 24px; }
.awt-contact-txt strong { display: block; font-size: 14px; color: var(--ink); }
.awt-contact-txt small { display: block; color: var(--muted); font-size: 11px; line-height: 1.3; }
.awt-contact--whatsapp .awt-contact-ico { background: #25D366; }
.awt-contact--phone .awt-contact-ico { background: var(--royal); }
.awt-contact--email .awt-contact-ico { background: var(--navy-2); }
.awt-contact--instagram .awt-contact-ico { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); }
.awt-contact--facebook .awt-contact-ico { background: #1877F2; }
.awt-contact--tiktok .awt-contact-ico { background: #111; }
.awt-contact--youtube .awt-contact-ico { background: #E62117; }
.awt-contact--pinterest .awt-contact-ico { background: #E60023; }
.awt-contact--telegram .awt-contact-ico { background: #229ED9; }
.awt-contact--snapchat .awt-contact-ico { background: #FFFC00; color: #111; }
.awt-contact--website .awt-contact-ico, .awt-contact--other .awt-contact-ico { background: var(--gold); }
.awt-contact--map .awt-contact-ico { background: var(--navy); }
@media (max-width: 359px) { .awt-contacts { grid-template-columns: repeat(2, 1fr); } }

/* Save / share / QR */
.awt-steps { background: #fff; border-radius: 18px; padding: 14px 16px; margin: 0 0 12px; font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.awt-steps ol { margin: 6px 0 0; padding-inline-start: 20px; }
.awt-steps li { margin: 4px 0; }
.awt-steps strong { color: var(--navy); }
.awt-save-install { margin-bottom: 12px; }
.awt-share-url input { width: 100%; min-height: 48px; border-radius: 14px; border: 1px solid var(--line); padding: 0 12px; font-family: var(--font-latin); background: #fff; }
.awt-share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.awt-qr-panel { text-align: center; }
.awt-qr-box { width: min(280px, 78vw); margin: 4px auto 10px; padding: 14px; background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.awt-qr-box canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.awt-qr-url { font-family: var(--font-latin); font-weight: 700; color: var(--navy); margin: 0 0 6px; word-break: break-all; }

/* ---------- Details ---------- */
.awt-sheet--details .awt-sheet-panel { padding: 0 0 calc(18px + env(safe-area-inset-bottom)); width: min(680px, 100%); max-height: 94vh; background: linear-gradient(180deg, #fff 0%, var(--ivory) 70%, var(--cream) 100%); }
.awt-sheet--details .awt-sheet-panel::before { z-index: 4; background: rgba(255, 255, 255, .8); }
.awt-detail { color: var(--text); }
.awt-detail--page { max-width: 680px; margin: 0 auto; background: linear-gradient(180deg, #fff, var(--ivory)); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.awt-gal { padding: 12px 12px 0; }
.awt-gal-tabs { display: flex; gap: 8px; padding: 26px 4px 12px; }
.awt-sheet--details .awt-gal-tabs { padding-inline-end: 52px; }
.awt-gal-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: 14px; border: 0; background: #fff; color: var(--text); font-weight: 700; font-size: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.awt-gal-tab .awt-ico { width: 18px; height: 18px; color: var(--gold); }
.awt-gal-tab.is-on { background: linear-gradient(135deg, var(--royal-2), var(--royal)); color: #fff; box-shadow: 0 8px 18px rgba(24, 91, 169, .28); }
.awt-gal-tab.is-on .awt-ico { color: #fff; }
.awt-gal-stage { position: relative; border-radius: 22px; overflow: hidden; background: var(--cream); box-shadow: 0 10px 26px rgba(80, 60, 30, .14); }
.awt-sheet--details .awt-gal > .awt-gal-stage:first-child { margin-top: 0; }
.awt-gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.awt-gal-track::-webkit-scrollbar { display: none; }
.awt-gal-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; display: grid; place-items: center; max-height: 62vh; background: var(--cream); }
.awt-gal-slide img { width: 100%; max-height: 62vh; object-fit: contain; cursor: zoom-in; }
.awt-gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.awt-gal-prev { right: 10px; } .awt-gal-next { left: 10px; }
.awt-gal-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 4px 8px; border-radius: 999px; background: rgba(33, 30, 31, .25); }
.awt-gal-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .6); transition: width .2s, background .2s; }
.awt-gal-dot.is-on { width: 18px; border-radius: 4px; background: #fff; }
.awt-gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; scrollbar-width: none; }
.awt-gal-thumb { flex: 0 0 78px; height: 78px; padding: 0; border-radius: 14px; overflow: hidden; border: 2px solid transparent; background: var(--cream); opacity: .75; transition: opacity .2s, border-color .2s; }
.awt-gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.awt-gal-thumb.is-on { border-color: var(--gold); opacity: 1; }
.awt-gal-main { margin: 0; }

.awt-detail-body { padding: 16px 18px 6px; display: grid; gap: 14px; }
.awt-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.awt-detail-title { margin: 0; font-size: 26px; line-height: 1.25; color: var(--ink); font-weight: 800; }
.awt-detail-ref { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.awt-detail-ref span { font-family: var(--font-latin); font-weight: 700; color: var(--text); }
.awt-avail { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; background: #E7F6EC; color: #157A3E; }
.awt-avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.awt-avail--limited { background: #FFF3DC; color: #9A6200; }
.awt-avail--order { background: #EAF1FB; color: var(--royal); }
.awt-avail--out { background: #FBEAEA; color: #B4232F; }

.awt-specs { list-style: none; margin: 0; padding: 4px 0; display: grid; gap: 2px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.awt-spec { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.awt-spec + .awt-spec { border-top: 1px dashed var(--line); }
.awt-spec-ico { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold); }
.awt-spec-ico .awt-ico { width: 24px; height: 24px; }
.awt-spec strong { display: block; color: var(--ink); font-size: 15px; }
.awt-spec span { display: block; color: var(--muted); font-size: 14px; }

.awt-price-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(135deg, #FFF8EC, var(--gold-soft)); box-shadow: inset 0 0 0 1px #EEDDBD; margin: 0; }
.awt-price-card small { display: block; color: var(--muted); font-size: 13px; }
.awt-price-card strong { display: block; font-size: 24px; color: var(--gold); font-weight: 800; }
.awt-price-ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: var(--gold); background: #fff; }
.awt-price-ico .awt-ico { width: 26px; height: 26px; }

/* Calculator */
.awt-calc { background: linear-gradient(180deg, #F3F7FD, #EAF1FB); border-radius: 22px; padding: 16px; box-shadow: inset 0 0 0 1px #DCE6F4; }
.awt-calc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.awt-calc-head h3 { margin: 0; font-size: 17px; color: var(--navy); }
.awt-calc-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; color: var(--royal); }
.awt-calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.awt-calc-field span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.awt-calc-field input { width: 100%; min-height: 50px; border-radius: 14px; border: 1px solid #CFDCEE; padding: 0 14px; font-size: 18px; font-weight: 700; background: #fff; font-family: var(--font-latin); }
.awt-calc-field input:focus { outline: 0; border-color: var(--royal); box-shadow: 0 0 0 3px rgba(24, 91, 169, .15); }
.awt-calc-mode { margin-top: 12px; }
.awt-calc-mode-lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; font-family: var(--font-latin); letter-spacing: .3px; }
.awt-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px #DCE6F4; }
.awt-seg-btn { min-height: 42px; border: 0; border-radius: 11px; background: transparent; font-weight: 700; font-size: 14px; color: var(--text); }
.awt-seg-btn.is-on { background: var(--navy); color: #fff; box-shadow: 0 4px 12px rgba(15, 42, 82, .25); }
.awt-calc-out { display: grid; margin-top: 12px; }
.awt-calc-out > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px dashed #D3DEEC; font-size: 14.5px; }
.awt-calc-out b, .awt-calc-out strong { direction: ltr; unicode-bidi: plaintext; color: var(--ink); }
.awt-calc-out .is-total { border-bottom: 0; padding-top: 12px; }
.awt-calc-out .is-total span { font-weight: 700; color: var(--navy); }
.awt-calc-out .is-total strong { font-size: 22px; color: var(--royal); }
.awt-calc-hint { margin: 4px 0; color: var(--muted); font-size: 13.5px; }
.awt-calc-note { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); }

.awt-detail-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.awt-detail-row .awt-btn { padding: 0 10px; font-size: 14px; white-space: nowrap; }
.awt-detail-row [data-fav] .awt-ico { color: #C0392B; }
.awt-detail-row [data-fav][aria-pressed="true"] .awt-ico { fill: currentColor; }

.awt-extra { display: grid; gap: 12px; padding-top: 6px; }
.awt-extra-title { margin: 6px 0 0; font-size: 19px; color: var(--ink); }
.awt-closeups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.awt-closeup { padding: 0; border: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 1; background: var(--cream); box-shadow: 0 6px 16px rgba(80, 60, 30, .12); }
.awt-closeup img { width: 100%; height: 100%; object-fit: cover; }
.awt-accs { background: #fff; border-radius: 20px; box-shadow: 0 2px 12px rgba(80, 60, 30, .08); overflow: hidden; }
.awt-acc + .awt-acc { border-top: 1px solid var(--line); }
.awt-acc summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 15px 16px; cursor: pointer; font-weight: 700; color: var(--ink); }
.awt-acc summary::-webkit-details-marker { display: none; }
.awt-acc-ico { color: var(--gold); display: grid; }
.awt-acc-title { flex: 1; }
.awt-acc-chev { color: var(--muted); display: grid; transition: transform .25s var(--ease); }
.awt-acc[open] .awt-acc-chev { transform: rotate(180deg); }
.awt-acc-body { padding: 0 16px 14px; padding-inline-start: 52px; color: #4F4740; font-size: 14.5px; }
.awt-acc-body p { margin: 0 0 6px; }
.awt-desc { color: #4F4740; font-size: 15px; }

/* Zoom */
.awt-zoom { position: fixed; inset: 0; z-index: 80; background: rgba(15, 12, 8, .94); display: grid; place-items: center; overflow: auto; touch-action: pinch-zoom; animation: awt-fade .2s ease both; }
.awt-zoom img { max-width: 100%; max-height: 100vh; object-fit: contain; }

/* ---------- Toast ---------- */
.awt-toast { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar-h) + 30px + env(safe-area-inset-bottom)); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); max-width: calc(100% - 32px); text-align: center; }

/* ---------- Empty / generic ---------- */
.awt-empty { color: var(--ink); text-align: center; margin: 10vh auto; width: min(560px, 100%); padding: 34px 22px; display: flex; flex-direction: column; align-items: center; gap: 16px; background: linear-gradient(180deg, #FFFFFF, var(--ivory)); border-radius: var(--radius); box-shadow: var(--shadow); }
.awt-empty p { margin: 0; color: #5B534A; }
.awt-empty .awt-logo-img--footer { width: 220px; }
.awt-empty-title { margin: 0; font-size: 24px; }
.awt-page { color: var(--text); padding: 24px 18px; }
.awt-page a { color: var(--royal); }

/* ---------- Catalog end ---------- */
.awt-end { padding: 30px 16px 26px; }
.awt-end-inner {
	max-width: 640px; margin: 0 auto; text-align: center; color: var(--ink);
	background: linear-gradient(180deg, #FFFFFF 0%, var(--ivory) 100%);
	border-radius: 28px; padding: 30px 20px 22px; box-shadow: var(--shadow);
	border: 1px solid rgba(255, 255, 255, .9);
}
.awt-end-logo { display: flex; justify-content: center; margin-bottom: 14px; }
.awt-logo-img--footer { width: 230px; max-width: 70%; height: auto; }
.awt-end-title { font-size: 19px; margin: 0 0 6px; color: var(--ink); }
.awt-end-sub { margin: 0 0 18px; color: var(--muted); font-size: 14px; }
.awt-end-block { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 8px; }
.awt-end-h { font-size: 15px; margin: 0 0 12px; color: var(--gold); font-weight: 700; }
.awt-socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.awt-social { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--ink); transition: transform .2s; box-shadow: 0 6px 14px rgba(0, 0, 0, .12); }
.awt-social:hover { transform: translateY(-2px); }
.awt-social .awt-ico { width: 22px; height: 22px; }
.awt-social--whatsapp { background: #25D366; } .awt-social--instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 50%, #8134AF); }
.awt-social--facebook { background: #1877F2; } .awt-social--tiktok { background: #111; } .awt-social--youtube { background: #E62117; }
.awt-social--pinterest { background: #E60023; } .awt-social--telegram { background: #229ED9; } .awt-social--snapchat { background: #FFFC00; color: #111; }
.awt-social--website, .awt-social--other { background: var(--gold); }
.awt-end-lines { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.awt-end-lines li { display: flex; align-items: center; justify-content: center; gap: 8px; }
.awt-end-lines a { color: var(--ink); text-decoration: none; font-family: var(--font-latin); font-weight: 700; }
.awt-end-lines .awt-ico { color: var(--gold); }
.awt-end-shop { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 18px; display: grid; gap: 14px; text-align: start; }
.awt-end-row { display: flex; gap: 12px; align-items: flex-start; }
.awt-end-row .awt-ico { color: var(--gold); width: 24px; height: 24px; margin-top: 2px; }
.awt-end-row strong { color: var(--ink); }
.awt-end-row p { margin: 2px 0 0; color: #5B534A; font-size: 14px; }
.awt-end .awt-btn--light { background: var(--navy); color: #fff; box-shadow: none; }
.awt-copy { margin: 22px 0 0; color: #8A8178; font-size: 12px; }

/* Admin login (opens /ada-admin, which asks for login when needed) */
.awt-admin-login {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	margin: 22px auto 0; padding: 9px 18px; min-height: 42px; border-radius: 999px;
	font-size: 13px; font-weight: 700; text-decoration: none; letter-spacing: .2px;
	color: var(--royal); background: #fff; border: 1px solid rgba(24, 91, 169, .35);
	box-shadow: 0 4px 14px rgba(24, 91, 169, .10);
	transition: background .2s, color .2s, transform .2s;
}
.awt-admin-login .awt-ico { width: 17px; height: 17px; }
.awt-admin-login:hover, .awt-admin-login:focus-visible { background: var(--royal); color: #fff; transform: translateY(-1px); }

@media (min-width: 900px) {
	.awt-feed { gap: 28px; }
	.awt-detail-body { padding: 18px 24px 10px; }
}