/* ============================================
   STREEEX — Responsive Typography (rem-based)
   Per owner request — May 2026
   ============================================ */
html {
    font-size: 100%; /* 16px base — respects browser settings */
}
body {
    font-size: 1rem;
    line-height: 1.6;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p, .body-text { font-size: 1rem; }
.label, .badge { font-size: 0.75rem; }
.caption { font-size: 0.875rem; }
/* ============================================
   STREEEX STOREFRONT OVERRIDES
   Applies Streeex brand over Velocity theme
   ============================================ */

/* ---- FONTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cairo:wght@400;500;600;700&display=swap');

body, * {
    font-family: 'Inter', 'Cairo', sans-serif !important;
}

/* ---- HEADER ---- */
header, .header {
    border-bottom: 2px solid var(--stx-light-grey) !important;
}

/* Primary CTA buttons - gradient */
.primary-button,
button[type="submit"].primary-button,
a.primary-button {
    background: var(--stx-gradient) !important;
    border: none !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    border-radius: var(--stx-radius-btn) !important;
    transition: opacity 0.2s ease !important;
}

.primary-button:hover {
    opacity: 0.9 !important;
    box-shadow: var(--stx-shadow-hover) !important;
}

/* Secondary buttons */
.secondary-button {
    border: 2px solid var(--stx-purple) !important;
    color: var(--stx-purple) !important;
    background: transparent !important;
    font-weight: 600 !important;
    border-radius: var(--stx-radius-btn) !important;
}

.secondary-button:hover {
    background: var(--stx-purple) !important;
    color: #ffffff !important;
}

/* ---- NAVIGATION ---- */
nav a:hover,
.nav-link:hover {
    color: var(--stx-purple) !important;
}

/* Active nav item */
nav a.active,
.nav-link.active {
    color: var(--stx-purple) !important;
    border-bottom: 2px solid var(--stx-purple) !important;
}

/* ---- CATEGORY ICONS ---- */
.category-icon-wrapper:hover {
    color: var(--stx-purple) !important;
}

/* ---- PRODUCT CARDS ---- */
.product-card,
[class*="product-card"] {
    border-radius: var(--stx-radius-card) !important;
    box-shadow: var(--stx-shadow-card) !important;
    transition: var(--stx-transition) !important;
}

.product-card:hover {
    box-shadow: var(--stx-shadow-hover) !important;
    transform: translateY(-2px) !important;
}

/* Product price */
[class*="price"]:not([class*="strike"]) {
    color: var(--stx-purple) !important;
    font-weight: 700 !important;
}

/* ---- HERO BANNER ---- */
.banner-section .explore-btn,
.banner-btn,
[class*="banner"] a[class*="btn"],
[class*="banner"] button {
    background: var(--stx-gradient) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--stx-radius-btn) !important;
    font-weight: 600 !important;
}

/* ---- FOOTER ---- */
footer {
    background: var(--stx-charcoal) !important;
    color: var(--stx-mid-grey) !important;
}

footer a {
    color: var(--stx-mid-grey) !important;
    transition: var(--stx-transition) !important;
}

footer a:hover {
    color: var(--stx-coral) !important;
}

footer .copyright,
footer p:last-child {
    color: var(--stx-mid-grey) !important;
}

/* ---- FORMS ---- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
    border-radius: var(--stx-radius-input) !important;
    border-color: var(--stx-light-grey) !important;
    font-family: 'Inter', sans-serif !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--stx-purple) !important;
    box-shadow: 0 0 0 3px rgba(123, 47, 190, 0.1) !important;
    outline: none !important;
}

/* ---- LINKS ---- */
a:hover {
    color: var(--stx-purple) !important;
}

/* ---- BADGES / TAGS ---- */
[class*="badge"],
[class*="tag"],
[class*="label"] {
    border-radius: var(--stx-radius-badge) !important;
}

/* ---- ANNOUNCEMENT BAR ---- */
[class*="announcement"],
[class*="promo-bar"] {
    background: var(--stx-gradient) !important;
    color: #ffffff !important;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--stx-near-white); }
::-webkit-scrollbar-thumb { background: var(--stx-purple); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--stx-coral); }

/* ---- SELECTION ---- */
::selection {
    background: var(--stx-purple);
    color: #ffffff;
}