/* ============================================================
   URBAN CLAVE — utilities.css
   Helpers: Spacing · Text · Color · Display · Overflow · etc.
   urbanclave.com
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   1. DISPLAY
   ──────────────────────────────────────────────────────────── */

.d-none         { display: none !important; }
.d-block        { display: block !important; }
.d-inline       { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex         { display: flex !important; }
.d-inline-flex  { display: inline-flex !important; }
.d-grid         { display: grid !important; }


/* ────────────────────────────────────────────────────────────
   2. SPACING — MARGIN
   ──────────────────────────────────────────────────────────── */

/* Margin all sides */
.m-0    { margin: 0 !important; }
.m-auto { margin: auto !important; }
.m-1    { margin: var(--sp-1) !important; }
.m-2    { margin: var(--sp-2) !important; }
.m-3    { margin: var(--sp-3) !important; }
.m-4    { margin: var(--sp-4) !important; }
.m-5    { margin: var(--sp-5) !important; }
.m-6    { margin: var(--sp-6) !important; }
.m-8    { margin: var(--sp-8) !important; }
.m-10   { margin: var(--sp-10) !important; }

/* Margin top */
.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: var(--sp-1) !important; }
.mt-2  { margin-top: var(--sp-2) !important; }
.mt-3  { margin-top: var(--sp-3) !important; }
.mt-4  { margin-top: var(--sp-4) !important; }
.mt-5  { margin-top: var(--sp-5) !important; }
.mt-6  { margin-top: var(--sp-6) !important; }
.mt-8  { margin-top: var(--sp-8) !important; }
.mt-10 { margin-top: var(--sp-10) !important; }
.mt-12 { margin-top: var(--sp-12) !important; }
.mt-16 { margin-top: var(--sp-16) !important; }
.mt-auto { margin-top: auto !important; }

/* Margin bottom */
.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: var(--sp-1) !important; }
.mb-2  { margin-bottom: var(--sp-2) !important; }
.mb-3  { margin-bottom: var(--sp-3) !important; }
.mb-4  { margin-bottom: var(--sp-4) !important; }
.mb-5  { margin-bottom: var(--sp-5) !important; }
.mb-6  { margin-bottom: var(--sp-6) !important; }
.mb-8  { margin-bottom: var(--sp-8) !important; }
.mb-10 { margin-bottom: var(--sp-10) !important; }
.mb-12 { margin-bottom: var(--sp-12) !important; }
.mb-16 { margin-bottom: var(--sp-16) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Margin left */
.ml-0    { margin-left: 0 !important; }
.ml-1    { margin-left: var(--sp-1) !important; }
.ml-2    { margin-left: var(--sp-2) !important; }
.ml-3    { margin-left: var(--sp-3) !important; }
.ml-4    { margin-left: var(--sp-4) !important; }
.ml-auto { margin-left: auto !important; }

/* Margin right */
.mr-0    { margin-right: 0 !important; }
.mr-1    { margin-right: var(--sp-1) !important; }
.mr-2    { margin-right: var(--sp-2) !important; }
.mr-3    { margin-right: var(--sp-3) !important; }
.mr-4    { margin-right: var(--sp-4) !important; }
.mr-auto { margin-right: auto !important; }

/* Margin x-axis */
.mx-0    { margin-left: 0 !important;    margin-right: 0 !important; }
.mx-1    { margin-inline: var(--sp-1) !important; }
.mx-2    { margin-inline: var(--sp-2) !important; }
.mx-3    { margin-inline: var(--sp-3) !important; }
.mx-4    { margin-inline: var(--sp-4) !important; }
.mx-6    { margin-inline: var(--sp-6) !important; }
.mx-auto { margin-inline: auto !important; }

/* Margin y-axis */
.my-0  { margin-block: 0 !important; }
.my-1  { margin-block: var(--sp-1) !important; }
.my-2  { margin-block: var(--sp-2) !important; }
.my-3  { margin-block: var(--sp-3) !important; }
.my-4  { margin-block: var(--sp-4) !important; }
.my-5  { margin-block: var(--sp-5) !important; }
.my-6  { margin-block: var(--sp-6) !important; }
.my-8  { margin-block: var(--sp-8) !important; }
.my-10 { margin-block: var(--sp-10) !important; }
.my-12 { margin-block: var(--sp-12) !important; }


/* ────────────────────────────────────────────────────────────
   3. SPACING — PADDING
   ──────────────────────────────────────────────────────────── */

/* Padding all sides */
.p-0  { padding: 0 !important; }
.p-1  { padding: var(--sp-1) !important; }
.p-2  { padding: var(--sp-2) !important; }
.p-3  { padding: var(--sp-3) !important; }
.p-4  { padding: var(--sp-4) !important; }
.p-5  { padding: var(--sp-5) !important; }
.p-6  { padding: var(--sp-6) !important; }
.p-8  { padding: var(--sp-8) !important; }
.p-10 { padding: var(--sp-10) !important; }
.p-12 { padding: var(--sp-12) !important; }

/* Padding top */
.pt-0  { padding-top: 0 !important; }
.pt-1  { padding-top: var(--sp-1) !important; }
.pt-2  { padding-top: var(--sp-2) !important; }
.pt-3  { padding-top: var(--sp-3) !important; }
.pt-4  { padding-top: var(--sp-4) !important; }
.pt-5  { padding-top: var(--sp-5) !important; }
.pt-6  { padding-top: var(--sp-6) !important; }
.pt-8  { padding-top: var(--sp-8) !important; }
.pt-10 { padding-top: var(--sp-10) !important; }

/* Padding bottom */
.pb-0  { padding-bottom: 0 !important; }
.pb-1  { padding-bottom: var(--sp-1) !important; }
.pb-2  { padding-bottom: var(--sp-2) !important; }
.pb-3  { padding-bottom: var(--sp-3) !important; }
.pb-4  { padding-bottom: var(--sp-4) !important; }
.pb-5  { padding-bottom: var(--sp-5) !important; }
.pb-6  { padding-bottom: var(--sp-6) !important; }
.pb-8  { padding-bottom: var(--sp-8) !important; }
.pb-10 { padding-bottom: var(--sp-10) !important; }

/* Padding left */
.pl-0 { padding-left: 0 !important; }
.pl-2 { padding-left: var(--sp-2) !important; }
.pl-3 { padding-left: var(--sp-3) !important; }
.pl-4 { padding-left: var(--sp-4) !important; }
.pl-6 { padding-left: var(--sp-6) !important; }

/* Padding right */
.pr-0 { padding-right: 0 !important; }
.pr-2 { padding-right: var(--sp-2) !important; }
.pr-3 { padding-right: var(--sp-3) !important; }
.pr-4 { padding-right: var(--sp-4) !important; }
.pr-6 { padding-right: var(--sp-6) !important; }

/* Padding x-axis */
.px-0  { padding-inline: 0 !important; }
.px-2  { padding-inline: var(--sp-2) !important; }
.px-3  { padding-inline: var(--sp-3) !important; }
.px-4  { padding-inline: var(--sp-4) !important; }
.px-5  { padding-inline: var(--sp-5) !important; }
.px-6  { padding-inline: var(--sp-6) !important; }
.px-8  { padding-inline: var(--sp-8) !important; }
.px-10 { padding-inline: var(--sp-10) !important; }

/* Padding y-axis */
.py-0  { padding-block: 0 !important; }
.py-1  { padding-block: var(--sp-1) !important; }
.py-2  { padding-block: var(--sp-2) !important; }
.py-3  { padding-block: var(--sp-3) !important; }
.py-4  { padding-block: var(--sp-4) !important; }
.py-5  { padding-block: var(--sp-5) !important; }
.py-6  { padding-block: var(--sp-6) !important; }
.py-8  { padding-block: var(--sp-8) !important; }
.py-10 { padding-block: var(--sp-10) !important; }
.py-12 { padding-block: var(--sp-12) !important; }


/* ────────────────────────────────────────────────────────────
   4. GAP (for flex/grid children)
   ──────────────────────────────────────────────────────────── */

.gap-0   { gap: 0 !important; }
.gap-1   { gap: var(--sp-1) !important; }
.gap-2   { gap: var(--sp-2) !important; }
.gap-3   { gap: var(--sp-3) !important; }
.gap-4   { gap: var(--sp-4) !important; }
.gap-5   { gap: var(--sp-5) !important; }
.gap-6   { gap: var(--sp-6) !important; }
.gap-8   { gap: var(--sp-8) !important; }
.gap-10  { gap: var(--sp-10) !important; }
.gap-12  { gap: var(--sp-12) !important; }

.gap-x-2  { column-gap: var(--sp-2) !important; }
.gap-x-3  { column-gap: var(--sp-3) !important; }
.gap-x-4  { column-gap: var(--sp-4) !important; }
.gap-x-6  { column-gap: var(--sp-6) !important; }

.gap-y-2  { row-gap: var(--sp-2) !important; }
.gap-y-3  { row-gap: var(--sp-3) !important; }
.gap-y-4  { row-gap: var(--sp-4) !important; }
.gap-y-6  { row-gap: var(--sp-6) !important; }
.gap-y-8  { row-gap: var(--sp-8) !important; }


/* ────────────────────────────────────────────────────────────
   5. TEXT UTILITIES
   ──────────────────────────────────────────────────────────── */

/* Alignment */
.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Transform */
.uppercase   { text-transform: uppercase !important; }
.lowercase   { text-transform: lowercase !important; }
.capitalize  { text-transform: capitalize !important; }
.normal-case { text-transform: none !important; }

/* Decoration */
.underline    { text-decoration: underline !important; }
.line-through { text-decoration: line-through !important; }
.no-underline { text-decoration: none !important; }

/* Font weight */
.fw-light     { font-weight: var(--fw-light) !important; }
.fw-regular   { font-weight: var(--fw-regular) !important; }
.fw-medium    { font-weight: var(--fw-medium) !important; }
.fw-semibold  { font-weight: var(--fw-semibold) !important; }
.fw-bold      { font-weight: var(--fw-bold) !important; }
.fw-extrabold { font-weight: var(--fw-extrabold) !important; }
.fw-black     { font-weight: var(--fw-black) !important; }

/* Font size */
.fs-xs    { font-size: var(--fs-xs) !important; }
.fs-sm    { font-size: var(--fs-sm) !important; }
.fs-base  { font-size: var(--fs-base) !important; }
.fs-md    { font-size: var(--fs-md) !important; }
.fs-lg    { font-size: var(--fs-lg) !important; }
.fs-xl    { font-size: var(--fs-xl) !important; }
.fs-2xl   { font-size: var(--fs-2xl) !important; }
.fs-3xl   { font-size: var(--fs-3xl) !important; }
.fs-4xl   { font-size: var(--fs-4xl) !important; }

/* Font family */
.font-primary   { font-family: var(--font-primary) !important; }
.font-secondary { font-family: var(--font-secondary) !important; }
.font-mono      { font-family: var(--font-mono) !important; }

/* Line height */
.lh-none    { line-height: var(--lh-none) !important; }
.lh-tight   { line-height: var(--lh-tight) !important; }
.lh-snug    { line-height: var(--lh-snug) !important; }
.lh-normal  { line-height: var(--lh-normal) !important; }
.lh-relaxed { line-height: var(--lh-relaxed) !important; }
.lh-loose   { line-height: var(--lh-loose) !important; }

/* Letter spacing */
.ls-tight   { letter-spacing: var(--ls-tight) !important; }
.ls-normal  { letter-spacing: var(--ls-normal) !important; }
.ls-wide    { letter-spacing: var(--ls-wide) !important; }
.ls-wider   { letter-spacing: var(--ls-wider) !important; }
.ls-widest  { letter-spacing: var(--ls-widest) !important; }

/* Truncation */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Multi-line clamp */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* White space */
.whitespace-nowrap  { white-space: nowrap !important; }
.whitespace-normal  { white-space: normal !important; }
.whitespace-pre     { white-space: pre !important; }
.whitespace-pre-wrap{ white-space: pre-wrap !important; }

/* Word break */
.break-all    { word-break: break-all !important; }
.break-words  { overflow-wrap: break-word !important; }


/* ────────────────────────────────────────────────────────────
   6. TEXT COLORS
   ──────────────────────────────────────────────────────────── */

.text-primary     { color: var(--clr-text) !important; }
.text-secondary   { color: var(--clr-text-secondary) !important; }
.text-tertiary    { color: var(--clr-text-tertiary) !important; }
.text-inverse     { color: var(--clr-text-inverse) !important; }

.text-accent      { color: var(--clr-accent) !important; }
.text-success     { color: var(--clr-success) !important; }
.text-warning     { color: var(--clr-warning) !important; }
.text-error       { color: var(--clr-error) !important; }
.text-info        { color: var(--clr-info) !important; }

.text-white       { color: var(--clr-white) !important; }
.text-black       { color: var(--clr-black) !important; }

.text-gray-400    { color: var(--clr-gray-400) !important; }
.text-gray-500    { color: var(--clr-gray-500) !important; }
.text-gray-600    { color: var(--clr-gray-600) !important; }
.text-gray-700    { color: var(--clr-gray-700) !important; }


/* ────────────────────────────────────────────────────────────
   7. BACKGROUND COLORS
   ──────────────────────────────────────────────────────────── */

.bg-white       { background-color: var(--clr-white) !important; }
.bg-page        { background-color: var(--clr-bg) !important; }
.bg-alt         { background-color: var(--clr-bg-alt) !important; }
.bg-muted       { background-color: var(--clr-bg-muted) !important; }
.bg-gray-50     { background-color: var(--clr-gray-50) !important; }
.bg-gray-100    { background-color: var(--clr-gray-100) !important; }

.bg-primary     { background-color: var(--clr-primary) !important; }
.bg-accent      { background-color: var(--clr-accent) !important; }
.bg-accent-lt   { background-color: var(--clr-accent-light) !important; }
.bg-success     { background-color: var(--clr-success) !important; }
.bg-success-lt  { background-color: var(--clr-success-light) !important; }
.bg-warning     { background-color: var(--clr-warning) !important; }
.bg-warning-lt  { background-color: var(--clr-warning-light) !important; }
.bg-error       { background-color: var(--clr-error) !important; }
.bg-error-lt    { background-color: var(--clr-error-light) !important; }
.bg-info        { background-color: var(--clr-info) !important; }
.bg-info-lt     { background-color: var(--clr-info-light) !important; }
.bg-transparent { background-color: transparent !important; }


/* ────────────────────────────────────────────────────────────
   8. BORDER UTILITIES
   ──────────────────────────────────────────────────────────── */

.border         { border: 1px solid var(--clr-border) !important; }
.border-0       { border: none !important; }
.border-top     { border-top: 1px solid var(--clr-border) !important; }
.border-bottom  { border-bottom: 1px solid var(--clr-border) !important; }
.border-left    { border-left: 1px solid var(--clr-border) !important; }
.border-right   { border-right: 1px solid var(--clr-border) !important; }

.border-accent  { border-color: var(--clr-accent) !important; }
.border-strong  { border-color: var(--clr-border-strong) !important; }
.border-success { border-color: var(--clr-success) !important; }
.border-error   { border-color: var(--clr-error) !important; }

/* Border radius */
.rounded-none { border-radius: var(--radius-none) !important; }
.rounded-xs   { border-radius: var(--radius-xs) !important; }
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.rounded-2xl  { border-radius: var(--radius-2xl) !important; }
.rounded-3xl  { border-radius: var(--radius-3xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Radius per side */
.rounded-t    { border-radius: var(--radius-md) var(--radius-md) 0 0 !important; }
.rounded-b    { border-radius: 0 0 var(--radius-md) var(--radius-md) !important; }
.rounded-l    { border-radius: var(--radius-md) 0 0 var(--radius-md) !important; }
.rounded-r    { border-radius: 0 var(--radius-md) var(--radius-md) 0 !important; }


/* ────────────────────────────────────────────────────────────
   9. SHADOW UTILITIES
   ──────────────────────────────────────────────────────────── */

.shadow-none  { box-shadow: none !important; }
.shadow-xs    { box-shadow: var(--shadow-xs) !important; }
.shadow-sm    { box-shadow: var(--shadow-sm) !important; }
.shadow-md    { box-shadow: var(--shadow-md) !important; }
.shadow-lg    { box-shadow: var(--shadow-lg) !important; }
.shadow-xl    { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl   { box-shadow: var(--shadow-2xl) !important; }
.shadow-inner { box-shadow: var(--shadow-inner) !important; }
.shadow-accent { box-shadow: var(--shadow-accent) !important; }


/* ────────────────────────────────────────────────────────────
   10. OVERFLOW
   ──────────────────────────────────────────────────────────── */

.overflow-hidden  { overflow: hidden !important; }
.overflow-auto    { overflow: auto !important; }
.overflow-scroll  { overflow: scroll !important; }
.overflow-visible { overflow: visible !important; }

.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-auto   { overflow-x: auto !important; }
.overflow-x-scroll { overflow-x: scroll !important; }

.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-auto   { overflow-y: auto !important; }
.overflow-y-scroll { overflow-y: scroll !important; }


/* ────────────────────────────────────────────────────────────
   11. POSITION & Z-INDEX
   ──────────────────────────────────────────────────────────── */

.position-static   { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed    { position: fixed !important; }
.position-sticky   { position: sticky !important; }

.inset-0  { inset: 0 !important; }
.top-0    { top: 0 !important; }
.right-0  { right: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0   { left: 0 !important; }

.z-0    { z-index: 0 !important; }
.z-10   { z-index: var(--z-raised) !important; }
.z-100  { z-index: var(--z-dropdown) !important; }
.z-top  { z-index: var(--z-top) !important; }


/* ────────────────────────────────────────────────────────────
   12. WIDTH & HEIGHT
   ──────────────────────────────────────────────────────────── */

.w-full    { width: 100% !important; }
.w-auto    { width: auto !important; }
.w-screen  { width: 100vw !important; }
.w-fit     { width: fit-content !important; }
.w-min     { width: min-content !important; }
.w-max     { width: max-content !important; }

.h-full    { height: 100% !important; }
.h-auto    { height: auto !important; }
.h-screen  { height: 100dvh !important; }
.h-fit     { height: fit-content !important; }

.min-w-0   { min-width: 0 !important; }
.min-h-0   { min-height: 0 !important; }
.min-h-screen { min-height: 100dvh !important; }

/* Square sizes */
.size-4  { width: var(--sp-4) !important; height: var(--sp-4) !important; }
.size-6  { width: var(--sp-6) !important; height: var(--sp-6) !important; }
.size-8  { width: var(--sp-8) !important; height: var(--sp-8) !important; }
.size-10 { width: var(--sp-10) !important; height: var(--sp-10) !important; }
.size-12 { width: var(--sp-12) !important; height: var(--sp-12) !important; }


/* ────────────────────────────────────────────────────────────
   13. ASPECT RATIO
   ──────────────────────────────────────────────────────────── */

.aspect-square  { aspect-ratio: 1 / 1 !important; }
.aspect-video   { aspect-ratio: 16 / 9 !important; }
.aspect-4-3     { aspect-ratio: 4 / 3 !important; }
.aspect-3-2     { aspect-ratio: 3 / 2 !important; }
.aspect-2-3     { aspect-ratio: 2 / 3 !important; }
.aspect-banner  { aspect-ratio: 5 / 2 !important; }
.aspect-product { aspect-ratio: 1 / 1.1 !important; }


/* ────────────────────────────────────────────────────────────
   14. OBJECT FIT
   ──────────────────────────────────────────────────────────── */

.object-cover    { object-fit: cover !important; }
.object-contain  { object-fit: contain !important; }
.object-fill     { object-fit: fill !important; }
.object-none     { object-fit: none !important; }

.object-top      { object-position: top !important; }
.object-center   { object-position: center !important; }
.object-bottom   { object-position: bottom !important; }


/* ────────────────────────────────────────────────────────────
   15. CURSOR
   ──────────────────────────────────────────────────────────── */

.cursor-pointer   { cursor: pointer !important; }
.cursor-default   { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed !important; }
.cursor-grab      { cursor: grab !important; }
.cursor-zoom-in   { cursor: zoom-in !important; }
.cursor-text      { cursor: text !important; }


/* ────────────────────────────────────────────────────────────
   16. USER SELECT
   ──────────────────────────────────────────────────────────── */

.select-none  { user-select: none !important; }
.select-all   { user-select: all !important; }
.select-text  { user-select: text !important; }
.select-auto  { user-select: auto !important; }


/* ────────────────────────────────────────────────────────────
   17. POINTER EVENTS
   ──────────────────────────────────────────────────────────── */

.pointer-none  { pointer-events: none !important; }
.pointer-auto  { pointer-events: auto !important; }


/* ────────────────────────────────────────────────────────────
   18. VISIBILITY & OPACITY
   ──────────────────────────────────────────────────────────── */

.visible     { visibility: visible !important; }
.invisible   { visibility: hidden !important; }

.opacity-0   { opacity: 0 !important; }
.opacity-25  { opacity: 0.25 !important; }
.opacity-50  { opacity: 0.5 !important; }
.opacity-75  { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }


/* ────────────────────────────────────────────────────────────
   19. TRANSITION
   ──────────────────────────────────────────────────────────── */

.transition-none   { transition: none !important; }
.transition-fast   { transition: all var(--t-fast) !important; }
.transition-base   { transition: all var(--t-base) !important; }
.transition-smooth { transition: all var(--t-smooth) !important; }


/* ────────────────────────────────────────────────────────────
   20. FLEX ALIGN SHORTHANDS
   ──────────────────────────────────────────────────────────── */

.flex-center       { display: flex !important; align-items: center !important; justify-content: center !important; }
.flex-between      { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.flex-start        { display: flex !important; align-items: center !important; justify-content: flex-start !important; }
.flex-end          { display: flex !important; align-items: center !important; justify-content: flex-end !important; }
.flex-col-center   { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }

.self-start  { align-self: flex-start !important; }
.self-center { align-self: center !important; }
.self-end    { align-self: flex-end !important; }
.self-stretch{ align-self: stretch !important; }


/* ────────────────────────────────────────────────────────────
   21. HORIZONTAL SCROLL ROW
   ──────────────────────────────────────────────────────────── */

/* Drag-scrollable horizontal row — used in carousels, brand strips */
.scroll-row {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);
  -webkit-overflow-scrolling: touch;
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* Product row — fixed card widths for clean scroll */
.scroll-row-products {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);
  -webkit-overflow-scrolling: touch;
}
.scroll-row-products::-webkit-scrollbar { display: none; }
.scroll-row-products > * {
  flex: 0 0 clamp(180px, 22vw, 260px);
  scroll-snap-align: start;
}


/* ────────────────────────────────────────────────────────────
   22. PRINT UTILITY OVERRIDES
   ──────────────────────────────────────────────────────────── */

@media print {
  .no-print { display: none !important; }
  .print-only { display: block !important; }
}
.print-only { display: none; }


/* ────────────────────────────────────────────────────────────
   23. RESPONSIVE VISIBILITY
   ──────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .hide-xs { display: none !important; }
}
@media (min-width: 481px) {
  .show-xs-only { display: none !important; }
}
@media (max-width: 640px) {
  .hide-sm { display: none !important; }
}
@media (max-width: 768px) {
  .hide-md { display: none !important; }
}
@media (max-width: 1024px) {
  .hide-lg { display: none !important; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
  .show-mobile-only { display: none !important; }
}
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .show-mobile-only { display: block !important; }
}


/* ────────────────────────────────────────────────────────────
   24. MISC HELPERS
   ──────────────────────────────────────────────────────────── */

/* Clearfix */
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* Visually hidden (accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Not sr-only (undo) */
.not-sr-only {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Smooth image load */
.img-smooth {
  transition: opacity var(--t-smooth);
}
.img-smooth[loading] { opacity: 0; }
.img-smooth.loaded   { opacity: 1; }

/* Placeholder shimmer for lazy loaded images */
.img-placeholder {
  background: linear-gradient(
    90deg,
    var(--clr-gray-100) 25%,
    var(--clr-gray-200) 50%,
    var(--clr-gray-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Divider */
.divider     { height: 1px; background-color: var(--clr-border); margin-block: var(--sp-4); }
.divider-lg  { height: 1px; background-color: var(--clr-border); margin-block: var(--sp-8); }
.divider-v   { width: 1px;  background-color: var(--clr-border); align-self: stretch; }

/* Sticky header offset */
.sticky-offset { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

/* No text select (interactive drag elements) */
.no-select { user-select: none; -webkit-user-select: none; }

/* Fullscreen cover */
.cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Circle shape */
.circle {
  border-radius: 50%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--clr-accent), var(--clr-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Blur background */
.blur-bg { backdrop-filter: blur(8px); }

/* No layout shift — preserve space for async content */
.content-placeholder {
  min-height: 200px;
  background-color: var(--clr-gray-50);
  border-radius: var(--radius-lg);
}

/* Number formatting — tabular nums for prices/stats */
.tabular-nums { font-variant-numeric: tabular-nums; }