/* ==========================================================================
   Diamond — main stylesheet
   Mobile-first, CSS logical properties used throughout so the layout mirrors
   automatically in RTL (Arabic) without duplicating rules; assets/css/rtl.css
   only patches the handful of things logical properties can't cover (icon
   mirroring, background gradients, etc.)
   ========================================================================== */

:root {
	--diamond-onyx: #0e0d0c;
	--diamond-charcoal: #1c1a18;
	--diamond-gold: #c9a15a;
	--diamond-pale-gold: #f3d9a4;
	--diamond-bronze: #9c7a3d;
	--diamond-ivory: #e8e2d6;

	--color-bg: #ffffff;
	--color-text: var(--diamond-charcoal);
	--color-text-muted: #6b645c;
	--color-border: #e7e1d6;
	--color-surface: #faf8f4;

	--font-heading: 'Cormorant Garamond', 'Cairo', serif;
	--font-body: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--container-width: 1240px;
	--radius: 6px;
	--transition: 0.2s ease;
}

html[lang="en"] {
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Cormorant Garamond', sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	line-height: 1.65;
	font-size: 16px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.25; margin: 0 0 0.5em; color: var(--diamond-charcoal); }
p { margin: 0 0 1em; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}
.skip-link:focus {
	position: fixed;
	inset-inline-start: 10px;
	top: 10px;
	width: auto; height: auto;
	background: var(--diamond-onyx);
	color: #fff;
	padding: 10px 16px;
	z-index: 10000;
	border-radius: var(--radius);
}

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

.section { padding-block: 60px; }
.section-title { font-size: 1.9rem; margin-bottom: 6px; }
.section-subtitle { color: var(--color-text-muted); margin-bottom: 30px; }
.section-cta { text-align: center; margin-top: 30px; }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 28px;
	border-radius: var(--radius);
	font-weight: 600;
	font-size: 0.95rem;
	border: 1px solid transparent;
	transition: background var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition);
	cursor: pointer;
}
.btn--gold {
	background: linear-gradient(135deg, var(--diamond-gold), var(--diamond-bronze));
	color: #fff;
}
.btn--gold:hover { opacity: 0.9; }
.btn--outline {
	background: transparent;
	border-color: var(--diamond-charcoal);
	color: var(--diamond-charcoal);
}
.btn--outline:hover { background: var(--diamond-charcoal); color: #fff; }
.btn--small { padding: 8px 16px; font-size: 0.85rem; width: 100%; }
.btn--large { padding: 15px 32px; font-size: 1rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Top bar (contact + social) ---------- */
.site-topbar { background: var(--diamond-charcoal); color: rgba(255, 255, 255, 0.85); font-size: 0.82rem; }
.site-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 8px; flex-wrap: wrap; }
.site-topbar__contact { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.site-topbar__item { display: inline-flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.85); opacity: 1; }
.site-topbar__item:hover { color: var(--diamond-pale-gold); }
.site-topbar__item svg { flex-shrink: 0; }
@media (max-width: 699px) {
	.site-topbar__item span { display: none; }
}

/* ---------- Header ---------- */
.site-header {
	background: var(--diamond-onyx);
	color: #fff;
	position: sticky;
	top: 0;
	z-index: 999;
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding-block: 14px;
}
.site-branding img { max-height: 48px; width: auto; }
.site-branding .site-title { font-family: var(--font-heading); font-size: 1.6rem; color: #fff; }

.primary-navigation { flex: 1; display: none; }
.primary-menu { display: flex; gap: 28px; justify-content: center; }
.primary-menu a { color: #fff; font-weight: 500; opacity: 0.9; }
.primary-menu a:hover { opacity: 1; color: var(--diamond-pale-gold); }
.primary-menu li { position: relative; }
.primary-menu ul { position: absolute; top: 100%; inset-inline-start: 0; background: var(--diamond-charcoal); padding: 10px 0; min-width: 200px; display: none; border-radius: var(--radius); }
.primary-menu li:hover > ul { display: block; }
.primary-menu ul a { display: block; padding: 8px 18px; }

.site-header__actions { display: flex; align-items: center; gap: 14px; }
.header-icon-link { position: relative; color: #fff; display: inline-flex; }
.cart-count {
	position: absolute;
	top: -8px; inset-inline-end: -10px;
	background: var(--diamond-gold);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	border-radius: 50%;
	min-width: 17px; height: 17px;
	display: flex; align-items: center; justify-content: center;
	padding: 2px;
}

.diamond-lang-switcher { display: flex; gap: 10px; font-size: 0.85rem; }
.diamond-lang-switcher a { color: #fff; opacity: 0.7; }
.diamond-lang-switcher li.active a { opacity: 1; color: var(--diamond-pale-gold); font-weight: 600; }

.mobile-menu-toggle {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: none;
	padding: 6px;
}
.mobile-menu-toggle span { width: 22px; height: 2px; background: #fff; display: block; }

@media (min-width: 900px) {
	.primary-navigation { display: block; }
	.mobile-menu-toggle { display: none; }
}
@media (max-width: 899px) {
	.primary-navigation {
		display: block;
		position: fixed;
		inset-block: 0;
		inset-inline-start: -300px;
		width: 280px;
		background: var(--diamond-onyx);
		padding: 90px 20px 20px;
		transition: inset-inline-start var(--transition);
		z-index: 1000;
	}
	.primary-navigation.is-open { inset-inline-start: 0; }
	.primary-menu { flex-direction: column; gap: 4px; align-items: flex-start; }
	.primary-menu ul { position: static; display: block; background: transparent; padding-inline-start: 14px; }
}

/* Fixed floating Call/WhatsApp buttons. Deliberately physical left/right
   (not logical inset-inline-*) — the side is an explicit customizer choice
   meant to stay put regardless of the current text direction. */
.floating-contact {
	position: fixed;
	bottom: 22px;
	z-index: 900;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.floating-contact--right { right: 22px; }
.floating-contact--left { left: 22px; }
.floating-contact__btn {
	width: 56px; height: 56px;
	border-radius: 50%;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.floating-contact__btn svg { width: 26px; height: 26px; }
.floating-contact__btn--whatsapp { background: #25d366; }
.floating-contact__btn--call { background: var(--diamond-gold); color: var(--diamond-onyx); }

/* ---------- Footer ---------- */
.site-footer { background: var(--diamond-onyx); color: rgba(255,255,255,0.8); }
.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-block: 50px;
}
.footer-col .widget-title { color: #fff; font-size: 1.1rem; margin-bottom: 16px; }
.footer-col a { opacity: 0.8; }
.footer-col a:hover { opacity: 1; color: var(--diamond-pale-gold); }
.footer-menu li, .footer-contact-list li { margin-bottom: 10px; }
.footer-contact-list a { display: inline-flex; align-items: center; gap: 8px; }
.footer-brand { font-family: var(--font-heading); font-size: 1.6rem; color: #fff; }
.footer-social { margin-top: 16px; }

/* ---------- Social icon links (topbar, footer, contact page) ---------- */
.social-icons { display: flex; flex-wrap: wrap; gap: 10px; }
.social-icons__link {
	width: 34px; height: 34px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	opacity: 1;
	transition: background var(--transition), color var(--transition);
}
.social-icons__link:hover { background: var(--diamond-gold); color: var(--diamond-onyx); }
.contact-social.social-icons .social-icons__link {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--diamond-charcoal);
}
.contact-social.social-icons .social-icons__link:hover { background: var(--diamond-gold); color: var(--diamond-onyx); }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-block: 18px; font-size: 0.85rem; }
.site-footer__bottom-inner { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
@media (min-width: 700px) {
	.site-footer__bottom-inner { flex-direction: row; justify-content: space-between; text-align: start; }
}

@media (min-width: 700px) {
	.footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

/* ---------- Hero ---------- */
.hero {
	background: linear-gradient(135deg, var(--diamond-onyx), var(--diamond-charcoal));
	background-size: cover;
	background-position: center;
	color: #fff;
	padding-block: 90px;
	text-align: center;
}
.hero__eyebrow { text-transform: uppercase; letter-spacing: 2px; color: var(--diamond-pale-gold); font-size: 0.85rem; }
.hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); color: #fff; margin-bottom: 24px; }

/* ---------- Hero product slider ---------- */
.hero-slider { position: relative; overflow: hidden; }
.hero-slider__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.hero-slider__track::-webkit-scrollbar { display: none; }
.hero-slider__slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 100%;
	scroll-snap-align: start;
	min-height: 420px;
	display: flex;
	align-items: center;
	background: linear-gradient(135deg, var(--diamond-onyx), var(--diamond-charcoal)) center/cover no-repeat;
	color: #fff;
}
.hero-slider__overlay { position: absolute; inset: 0; background: rgba(14, 13, 12, 0.5); }
.hero-slider__content { position: relative; z-index: 1; max-width: 560px; }
.hero-slider__eyebrow { text-transform: uppercase; letter-spacing: 2px; color: var(--diamond-pale-gold); font-size: 0.85rem; margin-bottom: 8px; }
.hero-slider__title { font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; margin-bottom: 10px; }
.hero-slider__price { font-size: 1.3rem; color: var(--diamond-pale-gold); margin-bottom: 24px; font-weight: 600; }

.hero-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px; height: 46px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	z-index: 2;
	transition: background var(--transition);
}
.hero-slider__arrow:hover { background: rgba(255, 255, 255, 0.3); }
.hero-slider__arrow--prev { inset-inline-start: 20px; }
.hero-slider__arrow--next { inset-inline-end: 20px; }
[dir="rtl"] .hero-slider__arrow svg { transform: scaleX(-1); }

.hero-slider__dots {
	position: absolute;
	bottom: 20px;
	inset-inline: 0;
	display: flex;
	gap: 8px;
	justify-content: center;
	z-index: 2;
}
.hero-slider__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.45); border: none; padding: 0; transition: width var(--transition), background var(--transition); }
.hero-slider__dot.active { background: #fff; width: 24px; border-radius: 5px; }

@media (min-width: 700px) { .hero-slider__slide { min-height: 520px; } }
@media (max-width: 699px) { .hero-slider__arrow { display: none; } }

/* ---------- Categories ---------- */
.category-card { display: block; width: 100%; text-align: center; }
.category-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--radius);
	background: var(--color-surface) center/cover no-repeat;
	margin-bottom: 10px;
	border: 1px solid var(--color-border);
}
/* Homepage category slider: show more, smaller slides per row than the
   generic product slider (which is sized for full product cards). */
.categories-section .product-slider__item { flex-basis: calc(33.333% - 16px); }
@media (min-width: 700px) {
	.categories-section .product-slider__item { flex-basis: calc(25% - 18px); }
}
@media (min-width: 1000px) {
	.categories-section .product-slider__item { flex-basis: calc(16.6667% - 20px); }
}
/* Empty-state watermark: a faint diamond glyph so cards without a photo yet
   read as "designed placeholder", not "broken image". */
.category-card__image:not([style*="background-image"]),
.product-card__placeholder,
.product-gallery__placeholder {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='22,32 78,32 50,88' fill='none' stroke='%23c9a15a' stroke-opacity='0.35' stroke-width='2'/%3E%3Cpolyline points='22,32 37,14 63,14 78,32' fill='none' stroke='%23c9a15a' stroke-opacity='0.35' stroke-width='2'/%3E%3Cline x1='37' y1='14' x2='50' y2='88' stroke='%23c9a15a' stroke-opacity='0.25' stroke-width='1.5'/%3E%3Cline x1='63' y1='14' x2='50' y2='88' stroke='%23c9a15a' stroke-opacity='0.25' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 40% 40%;
	background-color: var(--color-surface);
}
.category-card__name { font-weight: 600; }

/* ---------- News ---------- */
.news-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-card { display: flex; flex-direction: column; }
.news-card__image { display: block; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--color-surface); margin-bottom: 14px; }
.news-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.news-card__tag {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	padding: 3px 10px;
	border-radius: 20px;
	color: var(--diamond-bronze);
}
.news-card__title { font-size: 1.1rem; line-height: 1.35; margin-bottom: 8px; }
.news-card__title a:hover { color: var(--diamond-bronze); }
.news-card__excerpt { color: var(--color-text-muted); font-size: 0.92rem; margin-bottom: 10px; }
.news-card__date { color: var(--color-text-muted); font-size: 0.8rem; }

/* ---------- Product grid / cards ---------- */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 700px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Product slider (homepage) ---------- */
.section-header-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 4px;
}
.section-header-row .section-title,
.section-header-row .section-subtitle { margin-bottom: 0; }
.section-header-row .section-subtitle { margin-top: 4px; }

.product-slider__nav { display: none; gap: 10px; flex-shrink: 0; }
.product-slider__nav-btn {
	width: 42px; height: 42px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: #fff;
	display: flex; align-items: center; justify-content: center;
	color: var(--diamond-charcoal);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.product-slider__nav-btn:hover { background: var(--diamond-onyx); border-color: var(--diamond-onyx); color: #fff; }
.product-slider__nav-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }
[dir="rtl"] .product-slider__nav-btn svg { transform: scaleX(-1); }

.product-slider { margin-top: 26px; }
.product-slider__track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline-start: 4px;
	padding-bottom: 6px;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.product-slider__track::-webkit-scrollbar { display: none; }
.product-slider__item {
	scroll-snap-align: start;
	flex: 0 0 calc(50% - 12px);
	min-width: 0;
}
@media (min-width: 700px) {
	.product-slider__item { flex-basis: calc(33.333% - 16px); }
}
@media (min-width: 1000px) {
	.product-slider__item { flex-basis: calc(25% - 18px); }
	.product-slider__nav { display: flex; }
}

.product-slider__item { display: flex; }
.product-card { display: flex; flex-direction: column; height: 100%; width: 100%; }
.product-card__image {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-surface);
	margin-bottom: 12px;
}
.product-card__image img { width: 100%; height: 100%; object-fit: cover; }
.product-card__placeholder { display: block; width: 100%; height: 100%; background: var(--color-surface); }
.product-card__badge {
	position: absolute; top: 10px; inset-inline-start: 10px;
	background: var(--diamond-onyx); color: #fff;
	font-size: 11px; padding: 4px 10px; border-radius: 20px;
}
.product-card__badge--sale { background: var(--diamond-gold); }
.product-card__title {
	font-size: 1rem;
	line-height: 1.3;
	margin-bottom: 6px;
	min-height: calc(1.3em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.product-card__title a:hover { color: var(--diamond-bronze); }
.product-card__price { margin-bottom: 10px; }
.product-card .add-to-cart-btn { margin-top: auto; }
.price--current { font-weight: 700; color: var(--diamond-bronze); }
.price--regular { text-decoration: line-through; color: var(--color-text-muted); margin-inline-end: 8px; font-size: 0.9em; }

/* ---------- About / CTA ---------- */
.about-section { background: var(--color-surface); }
.about-features li { padding-inline-start: 26px; position: relative; margin-bottom: 10px; }
.about-features li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--diamond-gold); font-weight: 700; }
[dir="rtl"] .about-features li::before { transform: scaleX(-1); }

.cta-section { background: var(--diamond-onyx); color: #fff; text-align: center; }
.cta-section h2 { color: #fff; }
.cta-inner { max-width: 560px; margin-inline: auto; }

.page-subtitle { color: var(--color-text-muted); margin-top: -10px; margin-bottom: 20px; }

/* ---------- Page intro (breadcrumb + title band, most inner pages) ---------- */
.page-intro {
	background: linear-gradient(135deg, var(--diamond-onyx), var(--diamond-charcoal));
	color: #fff;
	padding-block: 36px 32px;
	margin-bottom: 40px;
}
.page-intro .breadcrumb,
.about-hero .breadcrumb { justify-content: center; color: rgba(255, 255, 255, 0.55); padding-top: 0; margin-bottom: 16px; }
.page-intro .breadcrumb a,
.about-hero .breadcrumb a { color: rgba(255, 255, 255, 0.75); }
.page-intro .breadcrumb a:hover,
.about-hero .breadcrumb a:hover { color: var(--diamond-pale-gold); }
.page-intro .breadcrumb__current,
.about-hero .breadcrumb__current { color: var(--diamond-pale-gold); }
.page-intro .breadcrumb__sep,
.about-hero .breadcrumb__sep { opacity: 0.4; }
.page-intro__row { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.page-intro__row.has-actions { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; text-align: start; gap: 20px; }
.page-intro .page-title { color: #fff; margin-bottom: 6px; }
.page-intro .page-subtitle { color: rgba(255, 255, 255, 0.72); margin: 0; max-width: 640px; }
.page-intro__actions { flex-shrink: 0; }

/* ---------- About page ---------- */
.about-hero {
	background: linear-gradient(135deg, var(--diamond-onyx), var(--diamond-charcoal));
	color: #fff;
	padding-block: 70px;
	text-align: center;
}
.about-hero .hero__title { color: #fff; }
.about-hero__text { max-width: 640px; margin-inline: auto; color: rgba(255,255,255,0.85); font-size: 1.05rem; }
.values-section { background: var(--color-surface); }
.values-grid { display: grid; grid-template-columns: 1fr; gap: 30px; text-align: center; }
.value-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #fff; color: var(--diamond-bronze); margin-bottom: 14px; }
@media (min-width: 700px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- FAQ page ---------- */
.faq-page { padding-block: 40px; }
.faq-list { border-top: 1px solid var(--color-border); }
.faq-item { border-bottom: 1px solid var(--color-border); padding-block: 6px; }
.faq-item__question {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 16px;
	font-weight: 600;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__icon { font-size: 1.3rem; color: var(--diamond-gold); transition: transform var(--transition); flex-shrink: 0; }
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer { padding-bottom: 18px; color: var(--color-text-muted); }
.faq-cta { text-align: center; margin-top: 50px; padding: 30px; background: var(--color-surface); border-radius: var(--radius); }

/* ---------- Shop layout ---------- */
.shop-layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 40px; }
.shop-sidebar { min-width: 0; }
.shop-sidebar .widget-title { margin-bottom: 14px; font-size: 1.1rem; }
.shop-sidebar-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shop-sidebar-heading-row .widget-title { margin-bottom: 0; }
/* Sidebar slider nav: the opposite visibility of the default .product-slider__nav
   (shown only while the category list is the horizontal mobile pill row; once the
   sidebar switches back to a plain vertical list at the desktop breakpoint there's
   nothing horizontal to navigate, so the arrows disappear). */
.product-slider__nav--sidebar { display: flex; }
.product-slider__nav--sidebar .product-slider__nav-btn { width: 32px; height: 32px; }
@media (min-width: 900px) {
	.product-slider__nav--sidebar { display: none; }
}
.category-filter-list li { margin-bottom: 8px; }
.category-filter-list li.active a, .category-filter-list li a:hover { color: var(--diamond-bronze); font-weight: 600; }
.page-title { font-size: 2rem; }
.shop-results-count { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 20px; }

/* Below the desktop breakpoint the sidebar stacks above the product grid — a
   plain vertical text list there reads as sparse/unstyled and eats vertical
   space, so swap it for a compact, horizontally-scrollable pill row instead. */
@media (max-width: 899px) {
	.category-filter-list {
		display: flex;
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		padding-bottom: 8px;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.category-filter-list::-webkit-scrollbar { display: none; }
	.category-filter-list li { margin-bottom: 0; flex: 0 0 auto; }
	.category-filter-list li a {
		display: inline-block;
		white-space: nowrap;
		padding: 8px 16px;
		border: 1px solid var(--color-border);
		border-radius: 20px;
		background: var(--color-surface);
	}
	.category-filter-list li.active a {
		background: var(--diamond-onyx);
		border-color: var(--diamond-onyx);
		color: #fff;
		font-weight: 600;
	}
	.category-filter-list li a:hover { color: var(--diamond-bronze); }
	.category-filter-list li.active a:hover { color: #fff; }
}

@media (min-width: 900px) {
	.shop-layout { grid-template-columns: 260px 1fr; }
}

.product-filters { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--color-border); }
.product-filters__form .form-row { margin-bottom: 16px; }
.product-filters__form .form-row label { font-size: 0.85rem; }
.product-filters__form input,
.product-filters__form select { font-size: 0.9rem; padding: 9px 12px; }
.product-filters__price-range { display: flex; align-items: center; gap: 8px; }
.product-filters__price-range input { width: 0; flex: 1; }
.product-filters__form .btn { width: 100%; }
.product-filters__clear { display: block; text-align: center; margin-top: 10px; font-size: 0.85rem; color: var(--color-text-muted); text-decoration: underline; }
.product-filters__clear:hover { color: var(--diamond-bronze); }

.pagination { display: flex; gap: 8px; margin-top: 40px; justify-content: center; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.pagination .current { background: var(--diamond-onyx); color: #fff; border-color: var(--diamond-onyx); }

/* ---------- Single product ---------- */
.breadcrumb-bar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); margin-bottom: 10px; }
.breadcrumb-bar .breadcrumb { padding-block: 14px; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 0.85rem; padding-top: 24px; }
.breadcrumb a { opacity: 0.85; }
.breadcrumb a:hover { opacity: 1; color: var(--diamond-bronze); }
.breadcrumb__sep { opacity: 0.6; }
.breadcrumb__current { color: var(--diamond-bronze); font-weight: 600; }
.product-layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 30px; }
@media (min-width: 900px) { .product-layout { grid-template-columns: 1fr 1fr; } }

.product-gallery__main {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	border-radius: var(--radius);
	background: var(--color-surface);
}
.product-gallery__slide { scroll-snap-align: start; flex: 0 0 100%; width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-gallery__placeholder { aspect-ratio: 1; background: var(--color-surface); border-radius: var(--radius); }
.product-gallery__thumbs { display: flex; gap: 10px; margin-top: 10px; }
.product-gallery__thumb { padding: 0; border: 2px solid transparent; border-radius: var(--radius); overflow: hidden; width: 64px; height: 64px; background: none; }
.product-gallery__thumb.active { border-color: var(--diamond-gold); }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-summary__category { color: var(--diamond-bronze); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
.product-summary__title { font-size: 2rem; }
.product-summary__price { font-size: 1.4rem; margin-bottom: 10px; }
.product-summary__stock { font-weight: 600; }
.stock-instock { color: #2e7d32; }
.stock-outofstock { color: #b3261e; }
.product-summary__sku { color: var(--color-text-muted); font-size: 0.85rem; }

.qty-input { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius); }
.qty-input input { width: 50px; text-align: center; border: none; padding: 8px 0; -moz-appearance: textfield; }
.qty-input input::-webkit-outer-spin-button, .qty-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { background: none; border: none; padding: 8px 12px; font-size: 1.1rem; }

.product-order-form { margin-block: 20px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.product-order-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.product-description, .related-products { padding-block: 40px; border-top: 1px solid var(--color-border); }

/* ---------- Forms ---------- */
.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="tel"],
.form-row input[type="password"],
.form-row input[type="date"],
.form-row textarea,
.form-row select {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: #fff;
}
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
	outline: none;
	border-color: var(--diamond-gold);
}
.form-row--checkbox label { display: flex; align-items: center; gap: 8px; font-weight: normal; }
.form-message { padding: 12px 16px; border-radius: var(--radius); margin-block: 16px; font-size: 0.9rem; }
.form-message--error { background: #fdecea; color: #b3261e; }
.form-message--success { background: #e8f5e9; color: #2e7d32; }

/* ---------- Cart page ---------- */
.cart-row {
	display: grid;
	grid-template-columns: 60px 1fr auto auto auto;
	gap: 14px;
	align-items: center;
	padding-block: 16px;
	border-bottom: 1px solid var(--color-border);
}
.cart-row__image img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius); }
.cart-row__name { font-weight: 600; }
.cart-row__unit-price { display: block; color: var(--color-text-muted); font-size: 0.85rem; }
.cart-row__remove { background: none; border: none; font-size: 1.3rem; color: var(--color-text-muted); }
.cart-row__line-total { font-weight: 700; }
.cart-summary { margin-top: 24px; padding: 20px; background: var(--color-surface); border-radius: var(--radius); }
.cart-summary__row { display: flex; justify-content: space-between; margin-bottom: 16px; font-size: 1.1rem; }
.cart-empty { text-align: center; padding: 60px 0; }

/* ---------- Checkout ---------- */
.checkout-layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 30px; }
@media (min-width: 900px) { .checkout-layout { grid-template-columns: 1.5fr 1fr; } }
.checkout-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.checkout-summary {
	background: var(--color-surface);
	padding: 24px;
	border-radius: var(--radius);
	border: 1px solid var(--color-border);
	align-self: start;
}
.checkout-summary .section-title { margin-bottom: 18px; }
@media (min-width: 900px) {
	.checkout-summary { position: sticky; top: 24px; }
}
.checkout-summary-empty { color: var(--color-text-muted); text-align: center; padding: 24px 0; margin: 0; }
.checkout-summary-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.checkout-summary-item { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border); }
.checkout-summary-item:last-child { border-bottom: none; padding-bottom: 0; }
.checkout-summary-item__image {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
}
.checkout-summary-item__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.checkout-summary-item__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.checkout-summary-item__name {
	font-weight: 600;
	font-size: 0.92rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.checkout-summary-item__qty { font-size: 0.82rem; color: var(--color-text-muted); }
.checkout-summary-item__price { flex: 0 0 auto; font-size: 0.92rem; font-weight: 600; color: var(--diamond-bronze); white-space: nowrap; }
.checkout-summary-total {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16px;
	border-top: 2px solid var(--color-border);
	font-size: 1.15rem;
	font-weight: 600;
}
.checkout-summary-total strong { color: var(--diamond-bronze); }
.checkout-success { text-align: center; padding: 60px 0; }

/* ---------- Merchant Orders ---------- */
.merchant-orders-price-note { color: var(--color-text-muted); font-size: 0.9rem; margin-bottom: 16px; }
.merchant-orders-hint { color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 12px; }
.merchant-orders-hint.has-selection { color: var(--diamond-bronze); font-weight: 600; }
.merchant-product-card.is-outofstock { opacity: 0.55; }
.merchant-orders-search { margin-bottom: 18px; }
.merchant-orders-search input[type="search"] {
	width: 100%;
	max-width: 360px;
	padding: 10px 14px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-family: inherit;
	font-size: 0.95rem;
	background: var(--color-bg);
	color: var(--color-text);
}
.merchant-orders-search input[type="search"]:focus { outline: none; border-color: var(--diamond-gold); }

/* ---------- Account ---------- */
.account-header { display: flex; justify-content: space-between; align-items: center; padding-block: 30px 20px; flex-wrap: wrap; gap: 14px; }
.account-header__greeting { font-size: 1.5rem; margin: 0; }
.account-orders-table { width: 100%; border-collapse: collapse; }
.account-orders-table th, .account-orders-table td { padding: 10px; border-bottom: 1px solid var(--color-border); text-align: start; }
.auth-layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 40px; }
@media (min-width: 800px) { .auth-layout { grid-template-columns: 1fr 1fr; } }
.auth-box { background: var(--color-surface); padding: 26px; border-radius: var(--radius); }
.auth-hint { margin-top: 14px; color: var(--color-text-muted); }

.diamond-order-status { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.diamond-status-order-pending { background: #fff3cd; color: #856404; }
.diamond-status-order-confirmed { background: #cce5ff; color: #004085; }
.diamond-status-order-completed { background: #d4edda; color: #155724; }
.diamond-status-order-canceled { background: #f8d7da; color: #721c24; }

/* ---------- Track order ---------- */
.track-order-page { padding-block: 40px; }
.order-result-card { background: var(--color-surface); padding: 24px; border-radius: var(--radius); margin-top: 20px; }

/* ---------- Contact ---------- */
.contact-layout { display: grid; grid-template-columns: 1fr; gap: 40px; padding-block: 30px; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1.4fr; } }
.contact-info__item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 24px; }
.contact-info__item h3 { font-size: 1rem; color: var(--diamond-bronze); margin-bottom: 4px; }
.contact-info__item--social { align-items: center; }
.contact-info__icon {
	flex-shrink: 0;
	width: 40px; height: 40px;
	border-radius: 50%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	display: flex; align-items: center; justify-content: center;
	color: var(--diamond-bronze);
}

/* ---------- Blog ---------- */
.blog-summary { padding-block: 30px; border-bottom: 1px solid var(--color-border); }
.post-meta { color: var(--color-text-muted); font-size: 0.85rem; }

/* ---------- Misc ---------- */
.term-description { margin-bottom: 24px; color: var(--color-text-muted); }
.cart-loading { color: var(--color-text-muted); padding-block: 40px; text-align: center; }