/** Shopify CDN: Minification failed Line 25:0 All "@import" rules must come first **/ /* ========================================================================== AESTHETEC — shared design tokens Add to theme.liquid, inside , once. ========================================================================== */ :root { --ae-bg: #F5F3EE; --ae-text: #16140F; --ae-charcoal: #232320; --ae-olive: #6B6F52; --ae-line: #D8D5CB; --ae-white: #FFFFFF; --ae-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --ae-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --ae-gutter: clamp(20px, 4vw, 64px); --ae-radius: 2px; } @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=Inter:wght@400;500;600&display=swap'); .ae-section { background: var(--ae-bg); color: var(--ae-text); font-family: var(--ae-font-body); } .ae-container { max-width: 1440px; margin: 0 auto; padding: 0 var(--ae-gutter); } .ae-eyebrow { font-family: var(--ae-font-body); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ae-olive); } .ae-heading { font-family: var(--ae-font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 0.94; text-transform: uppercase; margin: 0; } .ae-card { display: flex; flex-direction: column; } .ae-card__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ae-line); } .ae-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .ae-card__media:hover img { transform: scale(1.03); } .ae-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .ae-card__placeholder-svg { width: 40%; opacity: 0.3; } .ae-card__badge { position: absolute; top: 12px; left: 12px; background: var(--ae-olive); color: var(--ae-white); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; } .ae-card__info { padding-top: 12px; } .ae-card__title { display: block; font-family: var(--ae-font-body); font-weight: 600; font-size: 14px; color: var(--ae-text); text-decoration: none; } .ae-card__title:hover { color: var(--ae-olive); } .ae-card__variant { margin: 2px 0 0; font-size: 12px; color: color-mix(in srgb, var(--ae-text) 60%, transparent); } .ae-card__price { margin: 4px 0 10px; font-size: 14px; font-weight: 500; } .ae-card__price--compare { margin-left: 6px; color: color-mix(in srgb, var(--ae-text) 45%, transparent); } .ae-card__add { width: 100%; padding: 10px 14px; background: var(--ae-charcoal); color: var(--ae-white); font-family: var(--ae-font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border: none; border-radius: var(--ae-radius); cursor: pointer; transition: background 0.2s ease; } .ae-card__add:hover { background: var(--ae-olive); } .ae-card__add:disabled { background: color-mix(in srgb, var(--ae-charcoal) 40%, var(--ae-bg)); cursor: not-allowed; } .ae-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; font-family: var(--ae-font-body); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: var(--ae-radius); border: 1px solid var(--ae-charcoal); transition: background 0.2s ease, color 0.2s ease; } .ae-btn--solid { background: var(--ae-charcoal); color: var(--ae-white); } .ae-btn--solid:hover { background: var(--ae-olive); border-color: var(--ae-olive); } .ae-btn--outline { background: transparent; color: var(--ae-charcoal); } .ae-btn--outline:hover { background: var(--ae-charcoal); color: var(--ae-white); } @media (prefers-reduced-motion: reduce) { .ae-card__media img { transition: none; } }