/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


/* ================================================
   REFLAXIS — Custom Styles
   Appended to flatsome-child/style.css
   ================================================ */
 
/* Design tokens (match source HTML/CSS exactly) */
:root {
    --optic-black:      #1A1A1B;
    --lens-silver:      #E2E4E6;
    --refractive-blue:  #0047FF;
    --pure-canvas:      #F9F9F9;
    --faded-grey-white: #F4F4F4;
}
 
/* Body background — NOT in Flatsome Options Colors tab */
body { background-color: #F9F9F9; }
 
/* CRITICAL: Flatsome hardcodes .header-top into the primary
   color selector. This overrides it back to black. */
.header-top {
    background-color: #000000 !important;
}
 
/* Fonts */
h1, h2, h3, h4, h5, h6, .logo {
    font-family: 'Syne', sans-serif !important;
    text-transform: uppercase;
}
body { font-family: 'Inter Tight', sans-serif !important; }
 
/* Header row heights */
.header-top    { height: 36px !important; }
.header-main   { height: 48px !important; border-bottom: 1px solid #e5e5e5 !important; }
.header-bottom { height: 64px !important; border-bottom: 1px solid #f0f0f0 !important; }
 
/* Brand tabs — Main Row menu */
.header-main .nav > li > a {
    height: 48px;
    padding: 0 20px;
    font-size: 11px;
    font-weight: 700;
    border-right: 1px solid #eee;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.header-main .nav > li:first-child > a {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
}
.header-main .nav > li > a:hover,
.header-main .nav > li.current-menu-item > a { background: #eeeeee; }
 
/* Nav underline animation — Bottom Row */
.header-bottom .nav > li > a {
    position: relative;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 0;
    margin: 0 20px;
    text-decoration: none;
    color: #1A1A1B;
}
.header-bottom .nav > li > a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 4px;
    background: #0047FF;
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.header-bottom .nav > li > a:hover::after,
.header-bottom .nav > li.current-menu-item > a::after { transform: scaleX(1); }
 
/* Pill button — Find My Fit */
.pill-button {
    border: 1.5px solid black;
    border-radius: 999px;
    padding: 10px 24px;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}
.pill-button:hover { background: black; color: white; }
 
/* CTA buttons — default black, hover blue */
.button.primary:not(.is-outline),
button[type="submit"],
input[type='submit']:not(.is-form) { background-color: #000000 !important; border-radius: 0 !important; }
.button.primary:not(.is-outline):hover,
button[type="submit"]:hover,
input[type='submit']:not(.is-form):hover { background-color: #0047FF !important; }
 
/* Outline button (Brand Story) */
.button.is-outline.dark {
    border: 1.5px solid #1A1A1B !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #1A1A1B !important;
}
.button.is-outline.dark:hover { background: #1A1A1B !important; color: #fff !important; }
 
/* Guide cards */
.reflaxis-guide-card .box {
    background: #F4F4F4 !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}
.reflaxis-guide-card .box:hover {
    background: #EBEBEB !important;
    transform: translateY(-4px);
}
.reflaxis-guide-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border-bottom: 1px solid #1A1A1B;
    padding-bottom: 4px;
    display: inline-block;
}
.reflaxis-guide-card--blue .reflaxis-guide-label {
    color: #0047FF !important;
    border-bottom-color: #0047FF !important;
}
 
/* Footer */
#footer { background: #1A1A1B !important; }
.footer-widgets { padding: 80px 0 !important; }
.footer-widgets .widget-title {
    font-size: 9px !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #555 !important;
    font-weight: 700 !important;
    margin-bottom: 28px !important;
}
.footer-widgets .menu a {
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #fff !important;
    text-decoration: none;
    line-height: 2.4 !important;
}
.footer-widgets .menu a:hover { color: #0047FF !important; }
 
/* Newsletter input */
.reflaxis-footer-input-wrap {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 8px;
    margin-bottom: 16px;
}
.reflaxis-footer-input-wrap:focus-within { border-bottom-color: #fff; }
.reflaxis-footer-email {
    background: transparent; border: none; outline: none;
    color: #fff; font-size: 13px; flex: 1;
}
.reflaxis-footer-email::placeholder { color: #555; }
.reflaxis-footer-submit {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.6); transition: color 0.2s;
}
.reflaxis-footer-submit:hover { color: #fff; }
 
/* Language dropdown */
.reflaxis-lang-wrap { position: relative; display: flex; align-items: center; height: 100%; }
.reflaxis-lang-trigger {
    cursor: pointer; display: flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 700; letter-spacing: 2px;
    color: #999; text-transform: uppercase;
}
.reflaxis-lang-trigger:hover { color: #000; }
.reflaxis-lang-dropdown {
    display: none; position: absolute; right: 0; top: 100%;
    background: #fff; min-width: 110px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border: 1px solid #e5e5e5; z-index: 200;
}
.reflaxis-lang-dropdown a {
    display: block; padding: 12px 16px;
    font-size: 11px; font-weight: 600; letter-spacing: 1px;
    color: #1A1A1B; text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
}
.reflaxis-lang-dropdown a:hover { background: #F4F4F4; color: #0047FF; }
.reflaxis-lang-wrap:hover .reflaxis-lang-dropdown { display: block; }
 
/* Mobile */
@media (max-width: 767px) {
    .header-main, .header-top { display: none !important; }
}