/* Electronics/Gadget — dark chrome, technical type, color-blocked category
   tiles, spec-forward product callouts. Sharper corners than the other
   themes: square-ish geometry reads as "hardware". */

:root {
    --header-bg: #0b0f1a;
    --header-text: #ffffff;
    --accent: #2f5bea;
    --accent-text: #ffffff;
    --accent-ink: #1d3fae;

    --bg: #ffffff;
    --text: #0d1220;
    --text-muted: #5a6478;
    --text-faint: #8a93a6;
    --surface: #ffffff;
    --surface-alt: #f2f4f9;
    --surface-sunken: #e6eaf2;
    --border: rgba(13, 18, 32, 0.10);
    --border-strong: rgba(13, 18, 32, 0.22);
    --header-border: rgba(255, 255, 255, 0.10);
    --trust-bg: #f2f4f9;
    --footer-bg: #0b0f1a;

    --font-heading: "Space Grotesk", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-body: "Inter", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --heading-weight: 700;
    --heading-tracking: -0.025em;

    --radius-sm: 4px;
    --radius: 8px;
    --card-radius: 8px;
    --media-radius: 8px;
    --btn-radius: 8px;

    --card-hover-shadow: 0 10px 30px rgba(13, 18, 32, 0.12);

    --hero-bg: linear-gradient(118deg, #0b0f1a 0%, #16224a 52%, #2f5bea 130%);
    --hero-text: #ffffff;
    --hero-wash: radial-gradient(90% 120% at 82% 0%, rgba(47, 91, 234, 0.55), rgba(47, 91, 234, 0) 60%);
    --hero-btn-bg: #ffffff;
    --hero-btn-text: #0d1220;
    --hero-btn2-bg: transparent;
    --hero-btn2-text: #ffffff;
    --hero-btn2-border: rgba(255, 255, 255, 0.5);
}

/* The dark bar needs its own search treatment — the shared translucent
   field disappears against it. */
.site-search-field {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.14);
}

.site-search input { color: #ffffff; }
.site-search input::placeholder { color: rgba(255, 255, 255, 0.55); }

.site-search-field:focus-within {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.55);
}

.site-search button { background: var(--accent); color: #ffffff; }

.trust-bar { border-bottom-color: rgba(13, 18, 32, 0.08); }

/* Color-blocked tiles, cycling four brand colours. */
.collection-tile { --tile-text: #ffffff; --tile-wash: rgba(255, 255, 255, 0.14); }
.collection-tile:nth-child(4n+1) { --tile-bg: #2f5bea; }
.collection-tile:nth-child(4n+2) { --tile-bg: #ea580c; }
.collection-tile:nth-child(4n+3) { --tile-bg: #131a2c; }
.collection-tile:nth-child(4n+4) { --tile-bg: #7c3aed; }

/* Spec chips are the theme's signature: dark, monospaced-feeling badges. */
.spec-chip {
    background: #0d1220;
    color: #ffffff;
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.product-card .product-name { font-weight: 500; }
.product-price { font-family: var(--font-heading); }
.pdp-price { font-family: var(--font-heading); }