/* =====================================================================
   MacLab Stores — Components
   ===================================================================== */

/* ---------------------------------------------------------------------
   Buttons  (.btn + variant)
   Ripple is added by animations.js
--------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--ink);
    --btn-fg: #fff;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    font-weight: 500;
    font-size: var(--text-sm);
    line-height: 1;
    padding: 0.85rem 1.4rem;
    border-radius: var(--r-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    white-space: nowrap;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--dur-1) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                background var(--dur-2) var(--ease-out);
}
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; }

.btn--accent   { --btn-bg: var(--red); }
.btn--accent:hover { background: var(--red-ink); box-shadow: 0 8px 22px rgba(227,6,19,.28); }

.btn--cyan     { --btn-bg: var(--cyan); }
.btn--cyan:hover { background: var(--cyan-ink); box-shadow: var(--shadow-glow); }

.btn--outline {
    --btn-bg: transparent; --btn-fg: var(--ink);
    box-shadow: inset 0 0 0 1.5px var(--hairline-strong);
}
.btn--outline:hover { box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow-sm); background: transparent; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); padding-inline: 1rem; }
.btn--ghost:hover { background: var(--surface-sunk); box-shadow: none; transform: none; }

.btn--lg { padding: 1.05rem 1.8rem; font-size: var(--text-base); border-radius: var(--r-lg); }
.btn--sm { padding: 0.6rem 1rem; font-size: var(--text-xs); border-radius: var(--r-sm); }
.btn--block { width: 100%; }
.btn--pill { border-radius: var(--r-pill); }

.btn .ripple {
    position: absolute; border-radius: 50%; transform: scale(0);
    background: rgba(255,255,255,.45); pointer-events: none;
    animation: ripple var(--dur-4) var(--ease-out); z-index: -1;
}
.btn--outline .ripple, .btn--ghost .ripple { background: rgba(10,11,13,.08); }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---------------------------------------------------------------------
   Badges & tags
--------------------------------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    padding: 0.34rem 0.6rem;
    border-radius: var(--r-sm);
    background: var(--surface-sunk); color: var(--graphite);
    white-space: nowrap;
}
.badge--new  { background: var(--cyan-wash); color: var(--cyan-ink); }
.badge--deal { background: var(--red-wash); color: var(--red-ink); }
.badge--best { background: #F2EEFF; color: #5B54F0; }
.badge--in   { background: var(--success-wash); color: var(--success); }
.badge--live { background: var(--ink); color: #fff; }
.badge--live::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: var(--red); box-shadow: 0 0 0 0 rgba(227,6,19,.6);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(227,6,19,.55); }
    70% { box-shadow: 0 0 0 7px rgba(227,6,19,0); }
    100% { box-shadow: 0 0 0 0 rgba(227,6,19,0); }
}

/* ---------------------------------------------------------------------
   SIGNATURE — Spec Score meter
   Hairline track + monospace readout. Elite (>=85) earns the red tip + glow.
--------------------------------------------------------------------- */
.spec {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.15rem 0.75rem;
}
.spec__label {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--graphite);
}
.spec__value {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.spec__track {
    grid-column: 1 / -1;
    height: 6px;
    border-radius: var(--r-pill);
    background: var(--surface-sunk);
    overflow: hidden;
    position: relative;
}
.spec__fill {
    height: 100%;
    width: var(--score, 0%);
    border-radius: var(--r-pill);
    background: var(--grad-cyan);
    transform-origin: left;
    transition: width var(--dur-4) var(--ease-out);
}
.spec.is-elite .spec__fill {
    background: linear-gradient(90deg, #00AEEF 0%, #5B54F0 70%, #E30613 100%);
    box-shadow: 0 0 14px rgba(227,6,19,.35);
}
.spec.is-elite .spec__value { color: var(--red-ink); }

/* compact meter for product cards */
.spec-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono); font-size: var(--text-2xs);
    color: var(--graphite);
}
.spec-chip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.spec-chip .bar { width: 42px; height: 4px; border-radius: 2px; background: var(--surface-sunk); overflow: hidden; }
.spec-chip .bar > i { display: block; height: 100%; width: var(--score,0%); background: var(--grad-cyan); }

/* ---------------------------------------------------------------------
   Card + Product card
--------------------------------------------------------------------- */
.card {
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}

.product {
    display: flex; flex-direction: column;
    background: var(--canvas);
    border: 1px solid var(--hairline);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.product:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.product__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background:
        var(--glow-cyan),
        linear-gradient(160deg, #FBFCFE 0%, #EEF2F7 100%);
    display: grid; place-items: center;
    overflow: hidden;
}
.product__media img, .product__media svg { transition: transform var(--dur-4) var(--ease-out); }
.product:hover .product__media img,
.product:hover .product__media svg { transform: scale(1.05); }

.product__tags { position: absolute; top: var(--sp-3); left: var(--sp-3); display: flex; gap: var(--sp-2); }
.product__media form { display: contents; }
.product__wish {
    position: absolute; top: var(--sp-3); right: var(--sp-3);
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--glass-bg); backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-sm); color: var(--graphite);
    transition: color var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.product__wish:hover { color: var(--red); transform: scale(1.1); }

.product__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.product__brand { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--graphite-soft); }
.product__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: var(--tracking-tight); line-height: 1.2; }
.product__name a:hover { color: var(--cyan-ink); }
.product__specs { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: auto; }
.product__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--hairline); }
.price { display: flex; align-items: baseline; gap: 0.5rem; }
.price__now { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.price__was { font-size: var(--text-sm); color: var(--graphite-soft); text-decoration: line-through; }

/* ---------------------------------------------------------------------
   Category tile
--------------------------------------------------------------------- */
.tile {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 180px; padding: var(--sp-4);
    border-radius: var(--r-lg); overflow: hidden;
    background: var(--ink); color: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.tile::before {
    content: ""; position: absolute; inset: 0;
    background: var(--glow-cyan); opacity: .6;
    transition: opacity var(--dur-3) var(--ease-out);
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tile:hover::before { opacity: 1; }
.tile__n { position: relative; font-family: var(--font-mono); font-size: var(--text-2xs); color: rgba(255,255,255,.5); letter-spacing: var(--tracking-wide); }
.tile__name { position: relative; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: var(--tracking-tight); }
.tile__count { position: relative; font-size: var(--text-sm); color: rgba(255,255,255,.6); }

/* ---------------------------------------------------------------------
   Header — glass, sticky
--------------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--hairline);
}
.site-header__bar {
    display: flex; align-items: center; gap: var(--sp-5);
    height: 68px;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tracking-tight); font-size: var(--text-lg); }
.brand__mark { display: inline-flex; gap: 3px; }
.brand__mark i { width: 11px; height: 22px; border-radius: 3px; display: block; }
.brand__mark i:first-child { background: var(--red); }
.brand__mark i:last-child { background: var(--cyan); }
.brand small { font-family: var(--font-mono); font-weight: 400; font-size: var(--text-2xs); color: var(--graphite); letter-spacing: var(--tracking-wide); }

.nav { display: flex; align-items: center; gap: var(--sp-2); }
.nav a { padding: 0.5rem 0.85rem; border-radius: var(--r-sm); font-size: var(--text-sm); font-weight: 500; color: var(--ink); transition: background var(--dur-2), color var(--dur-2); }
.nav a:hover { background: var(--surface-sunk); color: var(--cyan-ink); }
.header-spacer { flex: 1; }
.icon-btn {
    width: 42px; height: 42px; border-radius: var(--r-md);
    display: grid; place-items: center; color: var(--ink); position: relative;
    transition: background var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.icon-btn:hover { background: var(--surface-sunk); transform: translateY(-1px); }
.icon-btn__count {
    position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: var(--r-pill); background: var(--red); color: #fff;
    font-family: var(--font-mono); font-size: 10px; font-weight: 700;
    display: grid; place-items: center;
}
.maclab-id {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono); font-size: var(--text-xs);
    padding: 0.5rem 0.8rem; border-radius: var(--r-pill);
    background: var(--surface-sunk); color: var(--ink);
}
.maclab-id b { color: var(--red-ink); }

/* ---------------------------------------------------------------------
   Search field (header)
--------------------------------------------------------------------- */
.search { position: relative; flex: 1; max-width: 360px; }
.search input {
    width: 100%; padding: 0.7rem 1rem 0.7rem 2.6rem;
    border-radius: var(--r-pill); border: 1px solid var(--hairline);
    background: var(--surface); font-size: var(--text-sm);
    transition: border var(--dur-2), box-shadow var(--dur-2), background var(--dur-2);
}
.search input::placeholder { color: var(--graphite-soft); }
.search input:focus { background: #fff; border-color: var(--cyan); box-shadow: var(--ring); outline: none; }
.search svg { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--graphite-soft); }

/* ---------------------------------------------------------------------
   Form fields
--------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-size: var(--text-sm); font-weight: 500; color: var(--ink-soft); }
.field .hint { font-size: var(--text-xs); color: var(--graphite-soft); }
.input, .select, .textarea {
    width: 100%; padding: 0.8rem 1rem;
    border-radius: var(--r-md); border: 1px solid var(--hairline-strong);
    background: var(--canvas); font-size: var(--text-base);
    transition: border var(--dur-2), box-shadow var(--dur-2);
}
.textarea { min-height: 120px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--cyan); box-shadow: var(--ring); }
.field.is-error .input, .field.is-error .textarea { border-color: var(--danger); }
.field.is-error .hint { color: var(--danger); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23545B69' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }

/* ---------------------------------------------------------------------
   Skeleton loaders
--------------------------------------------------------------------- */
.skeleton {
    background: linear-gradient(100deg, var(--surface-sunk) 30%, #F4F6F9 50%, var(--surface-sunk) 70%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: var(--r-sm);
}
.skeleton--media { aspect-ratio: 4/3; border-radius: var(--r-lg); }
.skeleton--line { height: 12px; margin-block: 8px; }
.skeleton--line.w-60 { width: 60%; } .skeleton--line.w-40 { width: 40%; } .skeleton--line.w-80 { width: 80%; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------------------------------------------------------------
   Empty state
--------------------------------------------------------------------- */
.empty { text-align: center; padding: var(--sp-9) var(--sp-4); max-width: 40ch; margin-inline: auto; }
.empty__icon {
    width: 64px; height: 64px; margin: 0 auto var(--sp-4);
    display: grid; place-items: center; border-radius: var(--r-lg);
    background: var(--surface-sunk); color: var(--graphite);
}
.empty h3 { font-size: var(--text-xl); }
.empty p { color: var(--graphite); margin-top: var(--sp-2); margin-bottom: var(--sp-5); }

/* ---------------------------------------------------------------------
   Toasts
--------------------------------------------------------------------- */
.toast-stack {
    position: fixed; bottom: var(--sp-5); right: var(--sp-5);
    z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--sp-3);
    max-width: min(360px, calc(100vw - 2rem));
}
.toast {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 0.9rem 1.1rem; border-radius: var(--r-md);
    background: var(--ink); color: #fff; box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    animation: toast-in var(--dur-3) var(--ease-spring);
}
.toast.is-out { animation: toast-out var(--dur-2) var(--ease-out) forwards; }
.toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); flex: none; }
.toast--success .toast__dot { background: var(--success); }
.toast--error .toast__dot { background: var(--red); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(20px); } }

/* ---------------------------------------------------------------------
   Sticky WhatsApp FAB
--------------------------------------------------------------------- */
.wa-fab {
    position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-sticky);
    width: 56px; height: 56px; border-radius: 50%;
    display: grid; place-items: center;
    background: #25D366; color: #fff; box-shadow: var(--shadow-lg);
    transition: transform var(--dur-2) var(--ease-spring);
}
.wa-fab:hover { transform: scale(1.08) translateY(-2px); }
.wa-fab svg { width: 28px; height: 28px; }

/* ---------------------------------------------------------------------
   Mobile bottom navigation
--------------------------------------------------------------------- */
.bottom-nav { display: none; }
@media (max-width: 820px) {
    .bottom-nav {
        position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-nav);
        display: grid; grid-template-columns: repeat(5, 1fr);
        background: var(--glass-bg); backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-top: 1px solid var(--hairline);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .bottom-nav a {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 0.6rem 0; font-size: 10px; color: var(--graphite);
        font-family: var(--font-mono); letter-spacing: var(--tracking-wide);
    }
    .bottom-nav a.is-active { color: var(--ink); }
    .bottom-nav a.is-active svg { color: var(--cyan); }
    .bottom-nav svg { width: 22px; height: 22px; }
    .wa-fab { bottom: calc(64px + var(--sp-4)); }
}

/* ---------------------------------------------------------------------
   Footer
--------------------------------------------------------------------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.72); padding-block: var(--sp-9) var(--sp-6); }
.site-footer a { color: rgba(255,255,255,.72); transition: color var(--dur-2); }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--sp-6); }
.footer-brand .brand { color: #fff; }
.footer-brand p { color: rgba(255,255,255,.55); margin-top: var(--sp-3); max-width: 34ch; font-size: var(--text-sm); }
.footer-col h5 { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: var(--sp-4); }
.footer-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--text-sm); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid rgba(255,255,255,.1); font-size: var(--text-xs); color: rgba(255,255,255,.45); font-family: var(--font-mono); }
.trust-row { display: flex; flex-wrap: wrap; gap: var(--sp-5); margin-top: var(--sp-6); }
.trust-row span { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); color: rgba(255,255,255,.62); }
.trust-row svg { width: 18px; height: 18px; color: var(--cyan); }
@media (max-width: 820px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .site-footer { padding-bottom: calc(64px + var(--sp-6)); }
}

/* =====================================================================
   Colour & motion refresh (v2 — more vibrant, still clean)
   ===================================================================== */

/* Glass button for dark surfaces (hero) */
.btn--glass { background: rgba(255,255,255,.10); color: #fff; border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn--glass:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.44); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.28); }

/* Accent CTA pops a little harder */
.btn--accent:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(227,6,19,.30); }

/* Product cards: lift + tinted glow + colourful media surface */
.product { transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .32s var(--ease-out); }
.product:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(11,95,255,.14), 0 6px 16px rgba(16,24,40,.08); border-color: rgba(0,174,239,.55); }
.product__media { background: linear-gradient(160deg, #F4F7FC 0%, #E8EEF7 100%) !important; position: relative; overflow: hidden; }
.product__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(78% 68% at 50% 22%, rgba(0,174,239,.12), transparent 70%); opacity: 0; transition: opacity .35s var(--ease-out); pointer-events: none; }
.product:hover .product__media::after { opacity: 1; }
.product__media img { transition: transform .5s var(--ease-out); }
.product:hover .product__media img { transform: scale(1.06); }

/* Section eyebrows carry a spectrum tick — colour sprinkled site-wide */
.section-head .eyebrow, .eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
.section-head .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--grad-spectrum); }

/* Category tiles: colour wash on hover */
.cat-tile, .category-tile { transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.cat-tile:hover, .category-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Links get an animated spectrum underline in prose/nav accents */
.link-accent { background-image: var(--grad-spectrum); background-size: 0% 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s var(--ease-out); }
.link-accent:hover { background-size: 100% 2px; }

/* Spec Score fills use the brand gradient for more colour */
.spec__fill { background: var(--grad-cyan); }
.spec.is-elite .spec__fill { background: var(--grad-spectrum); }

/* Category tile cover image (dark overlay keeps text legible) */
.tile__media { position: absolute; inset: 0; z-index: 0; background-image: var(--cover); background-size: cover; background-position: center; }
.tile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,10,13,.30) 0%, rgba(8,10,13,.72) 68%, rgba(8,10,13,.92) 100%); }
.tile:has(.tile__media) { background: #0A0B0D; }
.tile__media ~ .tile__name, .tile__media ~ .tile__count { z-index: 2; }
.tile::before { z-index: 1; }
.tile__name, .tile__count, .tile__n { position: relative; z-index: 2; }