/* ========================================================================== JStore Spacing — Task 1 + Task 2 Gap between cards driven by CSS custom properties set by jstore.spacing.js. Mobile card width matched to header width via --adg-header-width. ========================================================================== */ /* ── CSS custom property defaults (overridden by JS at runtime) ───── */ :root { --adg-card-gap-desktop: 2rem; --adg-card-gap-tablet: 1.5rem; --adg-card-gap-mobile: 1rem; --adg-header-width: 100%; } /* ── Desktop gap ──────────────────────────────────────────────────── */ .adg-grid, .view-content .adg-grid, [class*="adg-view"] .adg-grid { gap: var(--adg-card-gap-desktop); } /* ── Tablet ───────────────────────────────────────────────────────── */ @media (max-width: 1023px) { .adg-grid { gap: var(--adg-card-gap-tablet); } } /* ── Mobile ───────────────────────────────────────────────────────── */ @media (max-width: 767px) { .adg-grid { gap: var(--adg-card-gap-mobile); } /* Task 2: card width = header container width */ .adg-card { width: var(--adg-header-width); max-width: var(--adg-header-width); margin-left: auto; margin-right: auto; } } /* ── Compact mode overrides (set by JStore on ) ────────────── */ body.spacing-compact .adg-grid { gap: var(--adg-card-gap-desktop); } body.spacing-compact .adg-card { margin-bottom: 0; } body.spacing-compact .adg-card__body { padding: 8px 14px 4px; } body.spacing-compact .adg-card__footer{ padding: 6px 14px 12px; } body.spacing-compact .adg-card__thumb { height: 120px; } @media (max-width: 1023px) { body.spacing-compact .adg-grid { gap: var(--adg-card-gap-tablet); } } @media (max-width: 767px) { body.spacing-compact .adg-grid { gap: var(--adg-card-gap-mobile); } } /* ── Relaxed mode (explicit rules for clarity) ────────────────────── */ body.spacing-relaxed .adg-card__body { padding: 12px 18px 8px; } body.spacing-relaxed .adg-card__footer { padding: 10px 18px 20px; } body.spacing-relaxed .adg-card__thumb { height: 160px; } @media (max-width: 767px) { body.spacing-relaxed .adg-card { margin-bottom: 0.5rem; } } /* ── Spacing toggle button ────────────────────────────────────────── */ .adg-spacing-toggle { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--adg-muted); padding: 5px 12px; border: 1px solid var(--adg-bdr); border-radius: var(--r-pill); cursor: pointer; background: none; transition: all 180ms ease; } .adg-spacing-toggle:hover { color: var(--adg-text); border-color: var(--adg-bdr-h); } .adg-spacing-toggle[aria-pressed="true"] { color: var(--adg-gold); border-color: rgba(196,146,10,.3); background: var(--adg-gold-dim); }