/* Gear & Wardrobe page styles — single source of truth (loaded via @push('custom_css') on gear pages).
   Theme-aware: falls back to dark-friendly values when the store's CSS vars are undefined. */

/* Prevent Alpine-controlled elements flashing before Alpine initialises */
[x-cloak] { display: none !important; }

/* Tab bar — wraps instead of horizontal-scrolling so all category tabs stay visible */
.gear-tab-bar { display: flex; flex-wrap: wrap; gap: 0 0.25rem; border-bottom: 2px solid var(--borderColor, rgba(255,255,255,0.15)); }
.gear-tab { padding: 0.6rem 1rem; font-size: 0.875rem; font-weight: 600; color: var(--textMuted, #9aa3af); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; }
.gear-tab-active { color: var(--mainColor, #e50000); border-bottom-color: var(--mainColor, #e50000); }

/* Subcategory grid — bottom spacing via padding (NOT margin) so it stays inside the .page container
   and doesn't collapse out, which would leave a body-coloured bar above the footer. */
.gear-subcategory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin-top: 1.5rem; padding-bottom: 2.5rem; }
.gear-subcategory-card { display: block; border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--borderColor, rgba(255,255,255,0.15)); background: var(--cardBg, rgba(255,255,255,0.07)); text-decoration: none; color: inherit; transition: box-shadow 0.15s; padding: 0.625rem; }
.gear-subcategory-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
.gear-subcategory-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.4rem; margin-bottom: 0.625rem; }
.gear-subcategory-body { padding: 0; }
.gear-subcategory-name { font-size: 0.875rem; font-weight: 600; }
.gear-subcategory-count { font-size: 0.75rem; color: var(--textMuted, #9aa3af); margin-top: 0.125rem; }

/* Item grid */
.gear-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 1rem; margin-top: 1.5rem; padding-bottom: 2.5rem; }
.gear-item-card { border-radius: 0.75rem; overflow: hidden; border: 1px solid var(--borderColor, rgba(255,255,255,0.15)); background: var(--cardBg, rgba(255,255,255,0.07)); padding: 0.625rem; }
.gear-item-card a[data-fancybox] { display: block; cursor: zoom-in; }
.gear-item-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0.4rem; margin-bottom: 0.625rem; }
.gear-item-title { padding: 0; font-size: 0.875rem; font-weight: 600; }
.gear-item-description { padding: 0; margin-top: 0.25rem; font-size: 0.75rem; color: var(--textMuted, #9aa3af); line-height: 1.4; }
.gear-item-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.gear-item-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; letter-spacing: 0.03em; color: var(--mainColor, #e50000); }
.gear-item-qty { font-size: 0.7rem; font-weight: 700; color: var(--textMuted, #9aa3af); background: var(--borderColor, rgba(255,255,255,0.15)); border-radius: 999px; padding: 0.05rem 0.45rem; }

/* Breadcrumb */
.gear-breadcrumb { display: flex; gap: 0.375rem; align-items: center; font-size: 0.8125rem; color: var(--textMuted, #9aa3af); margin-bottom: 1rem; }
.gear-breadcrumb a { color: var(--mainColor, #e50000); }
.gear-back a { color: var(--mainColor, #e50000); font-size: 0.875rem; }

/* Customs-page teaser */
.gear-teaser { padding: 1.5rem; border: 1px solid var(--borderColor, rgba(255,255,255,0.15)); border-radius: 1rem; }
.gear-teaser-heading { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.25rem; }
.gear-teaser-copy { font-size: 0.875rem; color: var(--textMuted, #9aa3af); margin-bottom: 1rem; }
.gear-teaser-strip { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.5rem; }
.gear-teaser-item { flex: 0 0 100px; }
.gear-teaser-img { display: block; width: 100px; height: 100px; object-fit: cover; border-radius: 0.5rem; }
.gear-teaser-title { font-size: 0.6875rem; margin-top: 0.25rem; line-height: 1.3; }
.gear-teaser-cta { display: inline-block; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--mainColor, #e50000); }