/* =====================================================================
   VELO storefront — design system
   Brand tokens (--velo-ink / --velo-accent / --velo-bg) are injected
   inline from Settings, so the palette is editable without touching CSS.
   ===================================================================== */

:root {
	--velo-ink: #111111;
	--velo-accent: #c8a46a;
	--velo-bg: #faf9f7;
	--velo-muted: #6f6f6f;
	--velo-line: #e6e3de;
	--velo-white: #ffffff;
	--velo-danger: #b3261e;
	--velo-success: #1f7a4d;
	--velo-radius: 2px;
	--velo-max: 1280px;
	--velo-ease: cubic-bezier(.22,.61,.36,1);
}

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

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

body.velo {
	margin: 0;
	background: var(--velo-bg);
	color: var(--velo-ink);
	font-family: "Tajawal", "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.8;
	direction: rtl;
	text-align: right;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.velo-wrap {
	max-width: var(--velo-max);
	margin: 0 auto;
	padding: 0 24px;
}

/* --- Display type ----------------------------------------------------
   Arabic is cursive: letter-spacing pulls letters out of their joins and
   text-transform does nothing useful. Both are therefore reserved for
   .velo-latin, used only on genuinely Latin strings (the wordmark, the
   payment badges). Arabic headings also need far more leading than a
   Latin display face — 1.05 clips descenders and the hamza.
   ------------------------------------------------------------------ */
.velo-display {
	font-family: "Tajawal", "IBM Plex Sans Arabic", sans-serif;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
}
/* Latin-only: safe to track out and uppercase. */
.velo-latin {
	font-family: "Archivo", sans-serif;
	text-transform: uppercase;
	letter-spacing: .18em;
	line-height: 1.15;
}
.velo-eyebrow {
	font-size: 13px;
	letter-spacing: 0;
	color: var(--velo-muted);
	font-weight: 700;
}
.velo-eyebrow.velo-latin {
	font-size: 11px;
	letter-spacing: .22em;
}

/* --- Announcement bar ------------------------------------------------ */
.velo-announce {
	background: var(--velo-ink);
	color: #fff;
	font-size: 13px;
	letter-spacing: .04em;
	text-align: center;
	padding: 9px 16px;
}

/* --- Header ---------------------------------------------------------- */
.velo-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(250,249,247,.88);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--velo-line);
}
.velo-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 74px;
}
.velo-logo {
	font-family: "Archivo", "Tajawal", sans-serif;
	font-weight: 800;
	font-size: 21px;
	letter-spacing: .22em;
	white-space: nowrap;
}
.velo-logo img { height: 30px; width: auto; }
.velo-nav {
	display: flex;
	gap: 26px;
	font-size: 16px;
	font-weight: 500;
}
.velo-nav a { position: relative; padding: 4px 0; }
.velo-nav a::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 0;
	height: 1.5px;
	background: var(--velo-ink);
	transition: width .35s var(--velo-ease);
}
.velo-nav a:hover::after { width: 100%; }

.velo-header-actions { display: flex; align-items: center; gap: 18px; }
.velo-cart-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
}
.velo-cart-count {
	min-width: 20px;
	height: 20px;
	border-radius: 999px;
	background: var(--velo-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}

/* --- Buttons --------------------------------------------------------- */
.velo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 30px;
	background: var(--velo-ink);
	color: #fff;
	border: 1px solid var(--velo-ink);
	border-radius: var(--velo-radius);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.5;
	cursor: pointer;
	transition: transform .25s var(--velo-ease), opacity .25s var(--velo-ease);
	font-family: inherit;
}
.velo-btn:hover { transform: translateY(-2px); opacity: .92; }
.velo-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.velo-btn-ghost { background: transparent; color: var(--velo-ink); }
.velo-btn-ghost:hover { background: var(--velo-ink); color: #fff; }
.velo-btn-accent { background: var(--velo-accent); border-color: var(--velo-accent); color: #1a1a1a; }
.velo-btn-block { width: 100%; }
.velo-btn-sm { padding: 10px 18px; font-size: 12px; }

/* --- Hero -------------------------------------------------------------
   The banner image is a real <img> rather than a CSS background: it can't
   silently fail on a style/escaping issue, the browser can prioritise it
   as the LCP element, and it still crops correctly via object-fit. With
   no image uploaded the gradient below stands on its own.
   ------------------------------------------------------------------ */
.velo-hero {
	position: relative;
	min-height: 84vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: linear-gradient(145deg, #23221f 0%, #12110f 55%, #1d1b17 100%);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.velo-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
/* The mobile image only exists in the DOM when one is uploaded; it stays
   hidden until a small screen, where it replaces the desktop image. */
.velo-hero-img-mobile { display: none; }
/* An even, slightly stronger overlay so centered copy stays readable over
   any image (top/bottom vignette + a gentle wash across the middle). */
.velo-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,.28) 30%, rgba(0,0,0,.3) 60%, rgba(0,0,0,.62) 100%);
}
/* No banner uploaded: a quiet diagonal texture keeps it from looking broken. */
.velo-hero-placeholder::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 22px);
}
.velo-hero-content {
	position: relative;
	z-index: 2;
	padding: 80px 0;
	max-width: 620px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.velo-hero .velo-eyebrow { color: rgba(255,255,255,.82); }
.velo-hero h1 { font-size: clamp(34px, 5.6vw, 62px); margin: 16px 0 18px; line-height: 1.28; }
.velo-hero p { font-size: clamp(16px, 1.5vw, 19px); opacity: .94; margin: 0 auto 32px; max-width: 44ch; line-height: 1.75; }
.velo-hero .velo-btn { min-width: 200px; }

/* --- Marquee strip -----------------------------------------------------
   A single smooth, infinite ticker line. Items are duplicated in the markup
   so the -50% loop is seamless. Distinct from the icon benefits row below,
   so the two never read as a duplicated block. --------------------------- */
.velo-strip {
	background: var(--velo-ink);
	color: #fff;
	padding: 13px 0;
	overflow: hidden;
}
.velo-strip-track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: velo-marquee 34s linear infinite;
}
.velo-strip:hover .velo-strip-track { animation-play-state: paused; }
.velo-strip-item { font-size: 14px; font-weight: 500; opacity: .92; padding: 0 4px; }
.velo-strip-sep { color: var(--velo-accent); opacity: .8; padding: 0 20px; font-size: 11px; }
@keyframes velo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.velo-strip-track { animation: none; flex-wrap: wrap; justify-content: center; white-space: normal; gap: 4px 6px; }
}

/* --- Section headers ------------------------------------------------- */
.velo-section { padding: 84px 0; }
.velo-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
	flex-wrap: wrap;
}
.velo-section-head h2 { font-size: clamp(24px, 2.8vw, 34px); margin: 6px 0 0; line-height: 1.35; }

/* --- Filters --------------------------------------------------------- */
.velo-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.velo-chip {
	padding: 9px 18px;
	border: 1px solid var(--velo-line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	background: transparent;
	transition: all .25s var(--velo-ease);
}
.velo-chip:hover { border-color: var(--velo-ink); }
.velo-chip.is-active { background: var(--velo-ink); color: #fff; border-color: var(--velo-ink); }

/* --- Product grid ---------------------------------------------------- */
.velo-grid {
	display: grid;
	/* auto-fit (not auto-fill) collapses unused tracks instead of leaving a
	   dead empty column when there are only a few items.
	   The max here is 1fr, not a fixed px value: when a minmax() track's max
	   is a fixed length, the browser sizes the *column count* itself off
	   that max (not the min) — so a 300px cap silently required ~950px of
	   real grid width for 3 columns, which the catalogue page's 250px
	   sidebar rarely leaves on an ordinary desktop window. With 1fr as the
	   max, the column count is decided by the min (170px) alone, and the
	   cap on how wide any one card is allowed to grow moves to .velo-card's
	   own max-width below — decoupling "how many columns" from "how wide
	   is a column" fixes both the sidebar-cramped case and the few-items
	   case at once. */
	/* A fixed 3-up grid: exactly three products per row on desktop and
	   tablet/iPad. With explicit tracks a lone card is always one 1fr cell
	   (never a huge stretched block), so the column count no longer depends
	   on the leftover width beside the catalogue sidebar. Phones drop to a
	   roomy 2-up in the responsive block below. */
	grid-template-columns: repeat(3, 1fr);
	gap: 34px 24px;
}
.velo-card {
	position: relative;
	max-width: 440px;
	/* Resolves to the same edge as the RTL heading above the grid; a lone
	   card in a wide leftover track sits there at its capped width instead
	   of stretching to fill it. */
	justify-self: start;
	width: 100%;
}
.velo-card-media {
	position: relative;
	aspect-ratio: 3 / 4;
	background: #ece9e4;
	overflow: hidden;
	border-radius: var(--velo-radius);
	margin-bottom: 14px;
}
.velo-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .55s var(--velo-ease), transform .9s var(--velo-ease);
}
.velo-card-media img.velo-hover-img { position: absolute; inset: 0; opacity: 0; }
.velo-card:hover .velo-card-media img.velo-base-img { opacity: 0; }
.velo-card:hover .velo-card-media img.velo-hover-img { opacity: 1; }
.velo-card:hover .velo-card-media img { transform: scale(1.04); }
.velo-card-media-empty {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	color: #b9b3aa; font-size: 13px; letter-spacing: .2em;
	font-family: "Archivo", sans-serif;
}
.velo-badge {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	background: var(--velo-accent);
	color: #1a1a1a;
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: var(--velo-radius);
	z-index: 2;
}
.velo-badge-out { background: #1a1a1a; color: #fff; }
.velo-card-title { font-size: 17px; font-weight: 700; margin: 0 0 5px; line-height: 1.5; }
.velo-card-meta { font-size: 14px; color: var(--velo-muted); margin: 0 0 6px; line-height: 1.6; }
.velo-price { font-size: 16px; font-weight: 700; }
.velo-price-from { font-size: 12px; color: var(--velo-muted); font-weight: 500; }

.velo-swatches { display: flex; gap: 6px; margin-top: 8px; }
.velo-swatch {
	width: 15px; height: 15px; border-radius: 50%;
	border: 1px solid rgba(0,0,0,.18);
}

/* --- Product detail -------------------------------------------------- */
.velo-pdp { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; padding: 48px 0 90px; }
.velo-gallery-main {
	aspect-ratio: 3 / 4;
	background: #ece9e4;
	overflow: hidden;
	border-radius: var(--velo-radius);
	margin-bottom: 12px;
}
.velo-gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.velo-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.velo-thumb {
	width: 74px; height: 96px;
	object-fit: cover;
	border-radius: var(--velo-radius);
	cursor: pointer;
	opacity: .55;
	border: 1px solid transparent;
	transition: opacity .25s var(--velo-ease), border-color .25s var(--velo-ease);
}
.velo-thumb:hover, .velo-thumb.is-active { opacity: 1; border-color: var(--velo-ink); }

.velo-pdp-title { font-size: clamp(24px, 2.9vw, 36px); margin: 10px 0 14px; line-height: 1.35; }
.velo-pdp-price { font-size: 25px; font-weight: 800; margin-bottom: 6px; }
.velo-pdp-desc { color: #3a3a3a; margin: 22px 0; }
.velo-pdp-desc p { margin: 0 0 14px; }
.velo-pdp-desc ul { padding-inline-start: 20px; margin: 0 0 14px; }

.velo-option-group { margin: 22px 0; }
.velo-option-label {
	display: flex; justify-content: space-between; align-items: center;
	font-size: 14px; font-weight: 700; margin-bottom: 11px;
}
.velo-options { display: flex; flex-wrap: wrap; gap: 9px; }
.velo-option {
	min-width: 52px;
	padding: 11px 16px;
	border: 1px solid var(--velo-line);
	background: #fff;
	border-radius: var(--velo-radius);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: all .2s var(--velo-ease);
}
.velo-option:hover:not(:disabled) { border-color: var(--velo-ink); }
.velo-option.is-selected { background: var(--velo-ink); color: #fff; border-color: var(--velo-ink); }
.velo-option:disabled {
	opacity: .35;
	cursor: not-allowed;
	text-decoration: line-through;
}

.velo-qty { display: inline-flex; align-items: center; border: 1px solid var(--velo-line); border-radius: var(--velo-radius); background: #fff; }
.velo-qty button {
	width: 42px; height: 46px; border: 0; background: transparent;
	font-size: 18px; cursor: pointer; font-family: inherit; color: var(--velo-ink);
}
.velo-qty input {
	width: 52px; height: 46px; border: 0; text-align: center;
	font-size: 15px; font-weight: 700; font-family: inherit;
	background: transparent; -moz-appearance: textfield;
}
.velo-qty input::-webkit-outer-spin-button,
.velo-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.velo-stock-line { font-size: 13px; margin-top: 10px; }
.velo-stock-low { color: var(--velo-danger); font-weight: 600; }
.velo-stock-ok { color: var(--velo-success); font-weight: 600; }

.velo-trust { display: grid; gap: 14px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--velo-line); }
.velo-trust-item { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.velo-trust-item strong { display: block; font-size: 14px; }
.velo-trust-item span { color: var(--velo-muted); font-size: 13px; }

/* --- Accordion ------------------------------------------------------- */
.velo-acc { border-top: 1px solid var(--velo-line); margin-top: 26px; }
.velo-acc details { border-bottom: 1px solid var(--velo-line); }
.velo-acc summary {
	cursor: pointer; padding: 16px 0; font-weight: 700; font-size: 14px;
	list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.velo-acc summary::-webkit-details-marker { display: none; }
.velo-acc summary::after { content: "+"; font-size: 18px; font-weight: 400; }
.velo-acc details[open] summary::after { content: "−"; }
.velo-acc .velo-acc-body { padding: 0 0 18px; font-size: 14px; color: #444; }

/* --- Tables / cart --------------------------------------------------- */
.velo-cart-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; align-items: start; padding: 42px 0 90px; }
.velo-line {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid var(--velo-line);
	align-items: center;
}
.velo-line-img { width: 96px; height: 122px; object-fit: cover; background: #ece9e4; border-radius: var(--velo-radius); }
.velo-line-title { font-weight: 700; font-size: 15px; margin: 0 0 4px; }
.velo-line-meta { font-size: 13px; color: var(--velo-muted); margin: 0 0 10px; }
.velo-line-remove { font-size: 13px; color: var(--velo-danger); background: none; border: 0; cursor: pointer; padding: 0; font-family: inherit; }

.velo-summary {
	background: #fff;
	border: 1px solid var(--velo-line);
	border-radius: var(--velo-radius);
	padding: 28px;
	position: sticky;
	top: 92px;
}
.velo-summary h3 { margin: 0 0 20px; font-size: 15px; font-weight: 700; }
.velo-summary-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 15px; }
.velo-summary-row.velo-muted { color: var(--velo-muted); font-size: 14px; }
.velo-summary-row.velo-save { color: var(--velo-success); font-weight: 600; }
.velo-summary-total {
	display: flex; justify-content: space-between;
	border-top: 1px solid var(--velo-line);
	margin-top: 14px; padding-top: 16px;
	font-size: 19px; font-weight: 800;
}

/* --- Forms ----------------------------------------------------------- */
.velo-field { margin-bottom: 18px; }
.velo-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.velo-field input, .velo-field select, .velo-field textarea {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--velo-line);
	border-radius: var(--velo-radius);
	background: #fff;
	font-size: 15px;
	font-family: inherit;
	color: var(--velo-ink);
	transition: border-color .2s var(--velo-ease);
}
.velo-field input:focus, .velo-field select:focus, .velo-field textarea:focus {
	outline: none;
	border-color: var(--velo-ink);
}
.velo-field .velo-hint { font-size: 12px; color: var(--velo-muted); margin-top: 5px; }
.velo-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.velo-pay-option {
	display: flex; gap: 14px; align-items: flex-start;
	border: 1px solid var(--velo-line);
	border-radius: var(--velo-radius);
	padding: 16px 18px;
	margin-bottom: 12px;
	cursor: pointer;
	background: #fff;
	transition: border-color .2s var(--velo-ease), box-shadow .2s var(--velo-ease);
}
.velo-pay-option:hover { border-color: #bdb8b0; }
.velo-pay-option.is-selected { border-color: var(--velo-ink); box-shadow: 0 0 0 1px var(--velo-ink) inset; }
.velo-pay-option input { margin-top: 4px; accent-color: var(--velo-ink); }
.velo-pay-option strong { display: block; font-size: 15px; }
.velo-pay-option span { font-size: 13px; color: var(--velo-muted); }

/* --- Notices --------------------------------------------------------- */
.velo-notice {
	padding: 14px 18px;
	border-radius: var(--velo-radius);
	margin-bottom: 18px;
	font-size: 14px;
	border: 1px solid;
}
.velo-notice-error { background: #fdf2f1; border-color: #f0c9c5; color: #8c1d16; }
.velo-notice-success { background: #f0f8f3; border-color: #bfe0cd; color: #17603c; }
.velo-notice ul { margin: 6px 0 0; padding-inline-start: 20px; }

/* --- Order received -------------------------------------------------- */
.velo-confirm { max-width: 720px; margin: 0 auto; padding: 70px 0 100px; text-align: center; }
.velo-confirm-icon {
	width: 68px; height: 68px; border-radius: 50%;
	background: var(--velo-success); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 32px; margin: 0 auto 22px;
}
.velo-confirm-icon.is-pending { background: var(--velo-accent); color: #1a1a1a; }
.velo-confirm-icon.is-failed { background: var(--velo-danger); }
.velo-order-box {
	background: #fff; border: 1px solid var(--velo-line);
	border-radius: var(--velo-radius); padding: 28px;
	text-align: start; margin-top: 30px;
}
.velo-order-box h3 { margin: 0 0 16px; font-size: 15px; font-weight: 700; }

/* --- Footer ---------------------------------------------------------- */
.velo-footer { background: var(--velo-ink); color: #fff; padding: 64px 0 30px; margin-top: 40px; }
.velo-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.velo-footer h4 { font-size: 14px; font-weight: 700; margin: 0 0 16px; opacity: .75; }
.velo-footer a { display: block; padding: 5px 0; font-size: 14px; opacity: .85; }
.velo-footer a:hover { opacity: 1; }
.velo-footer-bottom {
	margin-top: 44px; padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.14);
	display: flex; justify-content: space-between; gap: 16px;
	font-size: 12px; opacity: .6; flex-wrap: wrap;
}
.velo-pay-icons { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.velo-pay-icons span {
	font-size: 12px;
	border: 1px solid rgba(255,255,255,.3); border-radius: 3px; padding: 5px 11px;
}

/* --- Floating WhatsApp ---------------------------------------------- */
.velo-wa {
	position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 60;
	width: 52px; height: 52px; border-radius: 50%;
	background: #25d366; color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 22px rgba(0,0,0,.22);
	transition: transform .25s var(--velo-ease);
}
.velo-wa:hover { transform: scale(1.08); }

/* --- Empty state ----------------------------------------------------- */
.velo-empty { text-align: center; padding: 90px 20px; }
.velo-empty h2 { font-size: 26px; margin: 0 0 10px; }
.velo-empty p { color: var(--velo-muted); margin: 0 0 26px; }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 980px) {
	.velo-pdp { grid-template-columns: 1fr; gap: 34px; }
	.velo-cart-layout { grid-template-columns: 1fr; }
	.velo-summary { position: static; }
	.velo-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	.velo-wrap { padding: 0 16px; }
	.velo-nav { display: none; }
	.velo-section { padding: 56px 0; }
	.velo-hero { min-height: 78vh; }
	.velo-hero-content { padding: 60px 0; }
	/* Swap to the dedicated portrait image on phones when one was uploaded. */
	.velo-hero--has-mobile .velo-hero-img-desktop { display: none; }
	.velo-hero--has-mobile .velo-hero-img-mobile { display: block; }
	.velo-field-row { grid-template-columns: 1fr; }
	.velo-footer-grid { grid-template-columns: 1fr; }
	.velo-line { grid-template-columns: 76px 1fr; }
	.velo-line-img { width: 76px; height: 98px; }
	.velo-line-price { grid-column: 2; }
}

/* Tablet / iPad: keep three per row but tighten the gap a little so the
   cards keep a comfortable size in portrait. */
@media (max-width: 900px) {
	.velo-grid { gap: 24px 14px; }
}

/* Phones: one large product per row — big, clear imagery and a premium feel
   for a boutique catalogue. Cards fill the full width. */
@media (max-width: 600px) {
	.velo-grid { grid-template-columns: 1fr; gap: 30px; }
	.velo-grid .velo-card { max-width: 100%; }
	.velo-grid .velo-card-title { font-size: 17px; line-height: 1.5; }
	.velo-grid .velo-price { font-size: 16px; }
	.velo-grid .velo-card-meta { font-size: 13px; }
	.velo-grid .velo-qa { font-size: 13px; padding: 12px 14px; gap: 8px; }
	.velo-grid .velo-badge { font-size: 11px; padding: 5px 10px; }
}

/* =====================================================================
   About page
   ===================================================================== */
.velo-about-hero {
	padding: 86px 0 58px;
	border-bottom: 1px solid var(--velo-line);
}
.velo-about-intro {
	font-size: clamp(17px, 1.8vw, 21px);
	line-height: 1.85;
	color: #3a3a3a;
	max-width: 62ch;
	margin: 0;
}

.velo-stats { border-bottom: 1px solid var(--velo-line); }
.velo-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 40px 24px;
}
.velo-stat { text-align: center; }
.velo-stat-num {
	display: block;
	font-family: "Archivo", "Tajawal", sans-serif;
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.1;
}
.velo-stat-label {
	display: block;
	font-size: 14px;
	color: var(--velo-muted);
	margin-top: 6px;
}

.velo-about-split {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 56px;
	align-items: center;
}
.velo-about-body { color: #3a3a3a; font-size: 17px; }
.velo-about-body p { margin: 0 0 16px; }
.velo-about-media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--velo-radius);
	background: #ece9e4;
}
.velo-about-media img { width: 100%; height: 100%; object-fit: cover; }

.velo-mission { background: var(--velo-ink); color: #fff; }
.velo-mission-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}
.velo-mission-card p {
	font-size: clamp(17px, 1.7vw, 20px);
	line-height: 1.8;
	margin: 12px 0 0;
	opacity: .92;
}

.velo-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.velo-value {
	border-top: 2px solid var(--velo-ink);
	padding-top: 20px;
}
.velo-value-num {
	font-size: 13px;
	color: var(--velo-accent);
	font-weight: 800;
}
.velo-value h3 { font-size: 19px; margin: 10px 0 8px; font-weight: 700; }
.velo-value p { margin: 0; color: var(--velo-muted); font-size: 15px; line-height: 1.75; }

.velo-cta-band {
	background: var(--velo-accent);
	color: #1a1a1a;
	text-align: center;
	padding: 66px 0;
}
.velo-cta-band .velo-btn { background: #111; border-color: #111; color: #fff; }

@media (max-width: 980px) {
	.velo-about-split { grid-template-columns: 1fr; gap: 32px; }
	.velo-mission-grid { grid-template-columns: 1fr; gap: 28px; }
	.velo-values { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 720px) {
	.velo-about-hero { padding: 54px 0 38px; }
	.velo-stats-grid { padding: 28px 16px; gap: 12px; }
}

/* =====================================================================
   Storefront v3 — search, filtering, quick-view, cart feedback
   ===================================================================== */

/* --- Header icon button + search panel ------------------------------- */
.velo-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: var(--velo-ink);
	cursor: pointer;
	border-radius: 999px;
	transition: background .2s var(--velo-ease);
}
.velo-icon-btn:hover { background: rgba(0,0,0,.06); }

.velo-search-panel {
	border-bottom: 1px solid var(--velo-line);
	background: rgba(250,249,247,.98);
	backdrop-filter: saturate(180%) blur(14px);
	animation: velo-slide-down .25s var(--velo-ease);
}
@keyframes velo-slide-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.velo-search-form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
}
.velo-search-form svg { color: var(--velo-muted); flex: none; }
.velo-search-form input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 18px;
	color: var(--velo-ink);
	padding: 8px 0;
}
.velo-search-form input[type="search"]:focus { outline: none; }

/* --- Catalog toolbar ------------------------------------------------- */
.velo-catalog-section { padding-top: 56px; }
.velo-toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.velo-result-count { font-size: 14px; color: var(--velo-muted); font-weight: 600; }
.velo-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--velo-muted);
	font-weight: 600;
}
.velo-sort select {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--velo-ink);
	border: 1px solid var(--velo-line);
	border-radius: var(--velo-radius);
	background: #fff;
	padding: 9px 30px 9px 12px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236f6f6f' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 10px center;
}
.velo-sort select:focus { outline: none; border-color: var(--velo-ink); }
.velo-filter-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	border: 1px solid var(--velo-line);
	background: #fff;
	color: var(--velo-ink);
	border-radius: 999px;
	padding: 9px 16px;
	cursor: pointer;
}

/* --- Shop layout: sidebar + results ---------------------------------- */
.velo-shop-layout {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 44px;
	align-items: start;
}
.velo-sidebar { position: sticky; top: 92px; }
.velo-sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--velo-line);
}
.velo-sidebar-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.velo-clear-filters { font-size: 13px; color: var(--velo-danger); font-weight: 600; }
.velo-sidebar-close { display: none; }

.velo-facet { padding: 18px 0; border-bottom: 1px solid var(--velo-line); }
.velo-facet:last-of-type { border-bottom: 0; }
.velo-facet h4 { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.velo-facet-body { display: flex; flex-direction: column; gap: 10px; }

.velo-facet-radio { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; color: #3a3a3a; }
.velo-facet-radio input { accent-color: var(--velo-ink); width: 16px; height: 16px; }
.velo-facet-radio:hover { color: var(--velo-ink); }

.velo-facet-chips { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.velo-facet-chip { position: relative; cursor: pointer; }
.velo-facet-chip input { position: absolute; opacity: 0; pointer-events: none; }
.velo-facet-chip span {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--velo-line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	color: #3a3a3a;
	transition: all .2s var(--velo-ease);
}
.velo-facet-chip:hover span { border-color: var(--velo-ink); }
.velo-facet-chip input:checked + span { background: var(--velo-ink); color: #fff; border-color: var(--velo-ink); }

.velo-price-inputs { flex-direction: row; align-items: center; gap: 8px; }
.velo-price-inputs input {
	width: 100%;
	min-width: 0;
	padding: 10px 10px;
	border: 1px solid var(--velo-line);
	border-radius: var(--velo-radius);
	font-family: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--velo-ink);
}
.velo-price-inputs input:focus { outline: none; border-color: var(--velo-ink); }
.velo-price-inputs span { color: var(--velo-muted); }

.velo-facet-switch { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; cursor: pointer; }
.velo-facet-switch input { accent-color: var(--velo-ink); width: 16px; height: 16px; }
.velo-sidebar .velo-btn { margin-top: 22px; }

/* --- Product card actions (quick add / quick view) ------------------- */
.velo-card-media-link { display: block; width: 100%; height: 100%; }
.velo-card-info { display: block; }
.velo-card-media { box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: box-shadow .35s var(--velo-ease); }
.velo-card:hover .velo-card-media { box-shadow: 0 18px 40px -18px rgba(0,0,0,.4); }

.velo-card-actions {
	position: absolute;
	inset-inline: 10px;
	bottom: 10px;
	z-index: 3;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .3s var(--velo-ease), transform .3s var(--velo-ease);
}
.velo-card:hover .velo-card-actions,
.velo-card:focus-within .velo-card-actions { opacity: 1; transform: none; }
.velo-qa {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 12px 14px;
	border: 0;
	border-radius: var(--velo-radius);
	background: rgba(255,255,255,.96);
	backdrop-filter: blur(6px);
	color: var(--velo-ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 18px -8px rgba(0,0,0,.5);
	transition: background .2s var(--velo-ease), color .2s var(--velo-ease);
}
.velo-qa:hover { background: var(--velo-ink); color: #fff; }
.velo-qa:disabled { background: rgba(255,255,255,.9); color: var(--velo-muted); cursor: not-allowed; }
.velo-qa.is-loading { opacity: .7; cursor: wait; }
.velo-qa-form { margin: 0; }
/* Touch devices can't hover, so always show the action bar there. */
@media (hover: none) {
	.velo-card-actions { opacity: 1; transform: none; }
}

/* An explicit display: value beats the UA [hidden] rule, so restore it. */
.velo-modal[hidden],
.velo-cart-count[hidden],
.velo-search-panel[hidden] { display: none !important; }

/* --- Quick-view modal ------------------------------------------------ */
.velo-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.velo-modal-overlay { position: absolute; inset: 0; background: rgba(15,14,12,.55); opacity: 0; transition: opacity .3s var(--velo-ease); backdrop-filter: blur(2px); }
.velo-modal.is-open .velo-modal-overlay { opacity: 1; }
.velo-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 860px;
	max-height: 92vh;
	overflow-y: auto;
	background: var(--velo-bg);
	border-radius: 6px;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,.55);
	transform: translateY(16px) scale(.98);
	opacity: 0;
	transition: transform .3s var(--velo-ease), opacity .3s var(--velo-ease);
}
.velo-modal.is-open .velo-modal-dialog { transform: none; opacity: 1; }
.velo-modal-close {
	position: absolute;
	top: 12px;
	inset-inline-end: 14px;
	z-index: 4;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.9);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--velo-ink);
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.velo-modal-close:hover { background: #fff; }
.velo-modal-loading { padding: 90px 20px; text-align: center; color: var(--velo-muted); }
body.velo-modal-open { overflow: hidden; }

.velo-qv { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.velo-qv-gallery { background: #ece9e4; padding: 22px; }
.velo-qv-main { aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--velo-radius); background: #e2ded7; }
.velo-qv-main img { width: 100%; height: 100%; object-fit: cover; }
.velo-qv-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.velo-qv-thumb { width: 56px; height: 72px; object-fit: cover; border-radius: var(--velo-radius); cursor: pointer; opacity: .55; border: 1px solid transparent; transition: opacity .2s, border-color .2s; }
.velo-qv-thumb:hover, .velo-qv-thumb.is-active { opacity: 1; border-color: var(--velo-ink); }
.velo-qv-info { padding: 40px 34px 34px; }
.velo-qv-title { font-size: clamp(21px, 2.4vw, 28px); margin: 8px 0 12px; line-height: 1.35; }
.velo-qv-price { font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.velo-qv-desc { color: #3a3a3a; font-size: 15px; margin: 0 0 8px; }
.velo-qv-note { font-size: 13px; color: var(--velo-muted); margin: 12px 0 0; }
.velo-qv-full { display: inline-block; margin-top: 20px; font-size: 14px; font-weight: 700; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* --- Toasts ---------------------------------------------------------- */
.velo-toast-wrap {
	position: fixed;
	inset-inline-start: 20px;
	bottom: 20px;
	z-index: 300;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}
.velo-toast {
	pointer-events: auto;
	min-width: 220px;
	max-width: 340px;
	padding: 14px 18px;
	border-radius: var(--velo-radius);
	background: var(--velo-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	box-shadow: 0 12px 30px -10px rgba(0,0,0,.5);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .3s var(--velo-ease), transform .3s var(--velo-ease);
}
.velo-toast.is-in { opacity: 1; transform: none; }
.velo-toast-success { background: var(--velo-success); }
.velo-toast-error { background: var(--velo-danger); }

/* --- Homepage: shop by category -------------------------------------- */
.velo-cats-section { padding-bottom: 40px; }
.velo-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 260px));
	gap: 16px;
}
.velo-cat-tile { position: relative; display: block; border-radius: var(--velo-radius); overflow: hidden; }
.velo-cat-media { aspect-ratio: 4 / 5; background: #ece9e4; }
.velo-cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--velo-ease); }
.velo-cat-tile:hover .velo-cat-media img { transform: scale(1.06); }
.velo-cat-tile::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.05) 55%, transparent 100%);
}
.velo-cat-label {
	position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
	padding: 16px; color: #fff;
	display: flex; flex-direction: column; gap: 2px;
}
.velo-cat-label span { font-size: 17px; font-weight: 800; }
.velo-cat-label small { font-size: 12px; opacity: .85; }

/* --- Homepage: featured + benefits ----------------------------------- */
.velo-featured-section { padding-top: 40px; }
.velo-benefits { border-block: 1px solid var(--velo-line); background: #fff; }
.velo-benefits-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding-block: 40px;
}
.velo-benefit { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.velo-benefit svg { color: var(--velo-accent); margin-bottom: 4px; }
.velo-benefit strong { font-size: 15px; font-weight: 800; }
.velo-benefit span { font-size: 13px; color: var(--velo-muted); }

/* --- Product page: breadcrumb ---------------------------------------- */
.velo-breadcrumb {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
	font-size: 13px; color: var(--velo-muted);
	padding: 22px 0 4px;
}
.velo-breadcrumb a:hover { color: var(--velo-ink); }
.velo-breadcrumb-current { color: var(--velo-ink); font-weight: 600; }

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 980px) {
	.velo-benefits-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
	.velo-shop-layout { grid-template-columns: 1fr; }
	.velo-filter-toggle { display: inline-flex; }
	.velo-sidebar {
		position: fixed;
		top: 0;
		inset-inline-end: 0;
		z-index: 210;
		width: min(340px, 88vw);
		height: 100%;
		background: var(--velo-bg);
		padding: 22px 22px 40px;
		overflow-y: auto;
		box-shadow: -20px 0 60px -20px rgba(0,0,0,.5);
		transform: translateX(-110%);
		transition: transform .3s var(--velo-ease);
	}
	.velo-sidebar.is-open { transform: none; }
	.velo-sidebar-close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px; height: 34px;
		border: 0; background: transparent;
		font-size: 26px; line-height: 1; cursor: pointer; color: var(--velo-ink);
	}
	.velo-qv { grid-template-columns: 1fr; }
	.velo-qv-gallery { padding: 16px; }
	.velo-qv-main { aspect-ratio: 4 / 3; }
	.velo-qv-info { padding: 24px; }
}
@media (max-width: 720px) {
	.velo-toolbar { width: 100%; justify-content: space-between; }
	.velo-toast-wrap { inset-inline: 12px; }
	.velo-toast { max-width: none; }
	.velo-cat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.velo-cat-media { aspect-ratio: 1 / 1; }
	.velo-cat-label { padding: 12px; }
	.velo-cat-label span { font-size: 15px; }
	.velo-benefits-grid { grid-template-columns: 1fr 1fr; gap: 18px 14px; padding-block: 30px; }
}

/* --- Per-product size guide (v2.13) ----------------------------------- */
.velo-size-guide-link { font-weight: 600; font-size: 13px; color: var(--velo-ink, #111); text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; }
.velo-size-table-wrap { overflow-x: auto; margin: 4px 0 12px; -webkit-overflow-scrolling: touch; }
.velo-size-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: center; min-width: 320px; }
.velo-size-table th, .velo-size-table td { border: 1px solid var(--velo-line, #e5e5e5); padding: 8px 10px; white-space: nowrap; }
.velo-size-table thead th { background: #f4f3f0; font-weight: 700; }
.velo-size-table tbody th { font-weight: 700; background: #faf9f7; }
.velo-size-image { display: block; max-width: 100%; height: auto; margin: 6px 0 12px; border-radius: 6px; }