html { scroll-behavior: smooth; }
body { margin: 0; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #121212; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
/* body,button,input,textarea { font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif; } */
/* #portal { background-color:#f4f5fb; } */

body { margin: 0;}
body { font-family: "Source Sans 3", system-ui, sans-serif; } 
button,input,select,textarea { font: inherit; }  

/* SPACER */
.spacer.xlr { display: block; height: 600px;}

/* GLOBAL ---------------------------------------------------------------------------------------------------------------------- */
h1,h2,h3,h4,p { margin: 0; }
a,a:hover { text-decoration: none; }
a,a:hover,.odd-search-form input { cursor: pointer; }
p a { font-weight:400; text-decoration: underline ;}
p a:hover { text-decoration: underline; }
em { font-style: normal; }
p { line-height: 1.12;}
img { width: 100%; height: auto; }
picture img { width:100%; height: 100%; object-fit: cover; }
.to-top.active { z-index: 999; }
.margin { position: relative; }


img { border: 0; }

/* button { position: relative; overflow: hidden;} */

/* GLOBAL ---------- HEADER ------------------------------------------------------------------------------------------------- */
header.siteHeader { width:100%; z-index: 999; }
/* header.siteHeader { position: fixed;top: 0; left: 0; } */
header.siteHeader a { color: #000; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
header.siteHeader a:hover { color: #777; }
header.siteHeader a svg { fill: #0086DF; }
header.siteHeader a svg:hover { fill: #777; }
header.siteHeader .margin { display: flex; justify-content: space-between; align-items: center;}
header #logo svg { width:35px; height: auto; }
header #logo,header #logo span { display: inline-flex; align-items: center; }
header #logo span { font-weight: 700; letter-spacing: -.01rem; }
header #cartWrap { display: flex; flex-direction: row; justify-content: space-evenly; gap: 1rem;}

.to-top { position: fixed; }

.gridOptions .grid svg { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
img.lazy { -webkit-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s; }
.filter_button::after { -webkit-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; }

/* GLOBAL ---------- FLEX ------------------------------------------------------------------------------------------------- */
.to-top { display: flex; }

/* GLOBAL ---------- FONT WEIGHT ------------------------------------------------------------------------------------------------- */
#hero h2,.contain h2 { font-weight: 400; }
#cart-total,p.price,#information .filetypes h3,#cart-notification,#breadcrumbs span,#information .price,#additional h4,.shopping-cart td .title { font-weight: 500; }
h3.title { font-weight: 600; }
h1#logo { font-weight: 700; }

/* GLOBAL ---------- BRAND COLORS -------------------------------------------------------------------------------------------------- */
/* Blue: #0086DF */

/* GLOBAL ---------- FONT COLOR -------------------------------------------------------------------------------------------------- */
#hero,#hero h1 { color: #FFFFFF; }
#hero p { color: rgba(255, 255, 255, 0.85); }

#breadcrumbs a { color: #555; }
body p,.product-card h3.title { color: #111; }
a,h3.title,#cart-notification { color: #FFF; }

/* GLOBAL ---------- BACKGROUND COLOR -------------------------------------------------------------------------------------------- */
/* White Header */
header.siteHeader {background-color: rgba(255, 255, 255, 0);}
header.siteHeader.sticky { background-color: rgba(255, 255, 255, 1); border-bottom: 1px solid #e5e5ec;}
header.siteHeader .site-logo { fill: #FFF;}
header.siteHeader.sticky .site-logo { fill: #000;}

#footer { background-color: #FFFFFF; }
/* picture,footer { background-color: #f9f9f9; } */
/* #product.single { background-color: #f4f5fb; } */
/* .products-grid .product-card img { background: #CDCDCD; } */
.gridOptions .grid.three svg, .layout.big .gridOptions .grid.two svg { fill: #000000; }
.gridOptions .grid.two svg, .layout.big .gridOptions .grid.three svg { fill: #CDCDCD; }
#additional svg { fill: #dc630e;}
.html { background-color: #e44d26;}

/* GLOBAL ---------- OPACITY ----------------------------------------------------------------------------------------------------- */
picture img.lazy,.to-top { opacity: 0; }
.to-top.active,picture img.initial,picture img.loaded { opacity: 1; }

/* GLOBAL ---------- HERO SECTION -------------------------------------------------------------------------------------------- */
#hero { position: relative; display:flex; justify-content: center; align-items: center; width: 100%; text-align: center; }
#hero.home { height: 70vh; background: #0086DF;background: linear-gradient(0deg, rgb(18, 147, 234) 0%, rgb(8, 110, 234) 100%); overflow: hidden;}
#hero.shop { height: 40vh; color: #000; }
#hero h2,#hero h2 b { font-weight: 600;}
#hero h2 b { font-size:1.5rem; vertical-align: top;}
#hero #cloudsContain,#hero #starsContain,#hero #sparklesContain { position: absolute; width: 100%; background: none; overflow:hidden; }
#hero #cloudsContain { bottom:0; left:0; height: 240px; }
#hero #starsContain { top:0; left:0; height: 230px; z-index: 0; }
#hero #sparklesContain { bottom:0; left:0; height: 260px; z-index: 5; }
#hero #cloudsContain svg { position: absolute; fill: #fff; }
/* CLOUDS FRONT ROW */
#hero #cloudsContain .back.far { z-index: 0;}
#hero #cloudsContain .back { z-index: 1;}
#hero #cloudsContain .middle { z-index: 2;}
#hero #cloudsContain .front { z-index: 3;}
#hero #cloudsContain .front,#hero #cloudsContain .middle,#hero #cloudsContain .back { bottom:-1px; }
#hero #cloudsContain #frontOne { left:-1rem; width: 265px; height: 90px; }
#hero #cloudsContain #frontTwo { left:49%; width: 254px; height: 138px; z-index: 1; }
#hero #cloudsContain #frontBottom { left:31%; width: 212px; height: 70px; }
#hero #cloudsContain #frontMiddle { left:45%; width: 132px; height: 56px; }
#hero #cloudsContain #frontWide { right:29%; width: 218px; height: 44px; }
#hero #cloudsContain #frontFour { right:17%; width: 156px; height: 50px; }
#hero #cloudsContain #frontEnd { right:-1.5rem; width: 177px; height: 90px; }
/* CLOUDS MIDDLE ROW */
#hero #cloudsContain #midOne { left:-1rem; bottom:24px; width: 116px; height: 89px; }
#hero #cloudsContain #midTwo { left:25.5%; width: 125px; height: 86px; z-index: 1; }
#hero #cloudsContain #midBottom { left:13.7%; width: 140px; height: 57px; }
#hero #cloudsContain #midRight { right:33%; width: 96px; height: 63px; z-index: 3; }
#hero #cloudsContain #midThree { right:19.3%; width: 214px; height: 118px;}
#hero #cloudsContain #midEnd { right:0; width: 257px; height: 150px; }
/* CLOUDS BACK ROW */
#hero #cloudsContain #backOne { left:-1rem; width: 249px; height: 179px; }
#hero #cloudsContain #backTwo { left:12%; bottom:44px; width: 145px; height: 106px; }
#hero #cloudsContain #backThree { left:15.5%; width: 225px; height: 126px; z-index: 2; }
#hero #cloudsContain #backThreeSmall { left:28.5%; width: 98px; height: 81px; }
#hero #cloudsContain #backBottom { right:27%; width: 144px; height: 95px; }
#hero #cloudsContain #backFour { left:35%; width: 225px; height: 126px; }
#hero #cloudsContain #backFive { right:9%; width: 195px; height: 137px; }
.sunGlow { position: absolute; width: 80%;height: 250px; left: 50%; bottom: -4rem; transform: translateX(-50%); background: radial-gradient(ellipse at center,rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 18%, rgba(255, 255, 255, 0.22) 38%,rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0) 75%); filter: blur(10px); pointer-events: none; z-index: 0; }

/* GLOBAL ---------- CATEGORY FILTER -------------------------------------------------------------------------------------------- */
#sortToggle { gap: 1rem;}
.filter_button.filter { gap: .5rem;}
/* button.filter_button.filter { border-radius: 24px; } */


/* GLOBAL ---------- NEW FILTER -------------------------------------------------------------------------------------------- */
/* =========================
   PRODUCT FILTER BAR
========================= */

.product-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;

    /* width: 100%; */
    margin: 0;
    padding: 1.5rem;

    background: #ffffff;
    border-bottom: 1px solid #e5e5ec;
    /* border-radius: 14px;  */
}


/* LEFT / RIGHT GROUPS */

.product-filters-left,
.product-filters-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.product-filters-right {
    margin-left: auto;
}


/* =========================
   FREE CHECKBOX
========================= */

.filter-free {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 14px;
    border: 1px solid #e5e5ec;
    border-radius: 4px;
    background: #ffffff;
    font-size: .9rem;
    font-weight: 600;
    color: #101010;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease;
}

.filter-free:hover {
    border-color: #bfcfff;
}

.filter-free input {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #9d9d9d;
    border-radius: 4px;
    background: #ffffff;
    cursor: pointer;
    position: relative;
}

.filter-free input:checked {
    border-color: #2168ee;
    background: #2168ee;
}

.filter-free input:checked::after {
    content: "";

    position: absolute;
    left: 5px;
    top: 2px;

    width: 4px;
    height: 8px;

    border: solid #ffffff;
    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}


/* =========================
   DROPDOWN WRAPPERS
========================= */

.filter-dropdown {
    position: relative;
}


/* BUTTON */

.filter-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #e5e5ec;
    border-radius: 4px;
    background: #ffffff;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: #101010;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.filter-dropdown-toggle:hover {
    border-color: #bfcfff;
}

.filter-dropdown-toggle[aria-expanded="true"] {
    border-color: #2168ee;
    color: #2168ee;
    background: #f7faff;
}


/* =========================
   DROPDOWN MENU
========================= */

.filter-dropdown-menu {
    position: absolute;
    z-index: 100;
    top: calc(100% + 8px);
    left: 0;
    min-width: 230px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.08);
}

.filter-dropdown-menu[hidden] {
    display: none;
}


/* OPTIONS */

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-option {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    align-items: center;
    gap: 1rem;
    min-height: 1rem;
    padding: .5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: .9rem;
    color: #202020;
}

.filter-option:hover {
    background: #f5f7fb;
}

.filter-option input {
    appearance: none;
    width: 17px;
    height: 17px;
    margin: 0;
    border: 1.5px solid #e5e5ec;
    border-radius: 4px;
    background: #ffffff;
    position: relative;
    cursor: pointer;
}

.filter-option input:checked {
    background: #2168ee;
    border-color: #2168ee;
}

.filter-option input:checked::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-option small {
    font-size: 12px;
    color: #8a8a8a;
}


/* =========================
   DROPDOWN ACTIONS
========================= */

.filter-dropdown-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e5ec;
}

.filter-dropdown-clear,
.filter-dropdown-apply { padding: .5rem 1rem; border-radius: 4px; font-family: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }

.filter-dropdown-clear {
    border: 0;
    background: transparent;
    color: #555555;
}

.filter-dropdown-clear:hover { color: #111111; }

.filter-dropdown-apply { border: 1px solid #2168ee; background: #2168ee; color: #ffffff; }
.filter-dropdown-apply:hover { background: #1458d8; }


/* =========================
   CLEAR ALL
========================= */

.clear-product-filters {
    min-height: 42px;
    padding: 0 16px;

    border: 1px solid #d7d7d7;
    border-radius: 4px;

    background: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #2168ee;

    cursor: pointer;
}

.clear-product-filters:hover {
    background: #f6f9ff;
    border-color: #bfcfff;
}

.clear-product-filters[hidden] {
    display: none;
}


/* =========================
   SORT SELECT
========================= */

.product-sort {
    position: relative;
}

.product-sort select {
    min-height: 42px;
    padding: 0 40px 0 16px;
    border: 1px solid #e5e5ec;
    border-radius: 4px;
    background: #ffffff;
    font-family: inherit;
    font-size: .9rem;
    font-weight: 600;
    color: #101010;
    cursor: pointer;
    appearance: none;
}

.product-sort::after {
    content: "⌄";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-53%);
    pointer-events: none;
    font-size: 14px;
    color: #333333;
}


/* ACCESSIBILITY LABEL */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;
    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* ========================= LOADING STATE ========================= */
#productGrid { transition: opacity 0.18s ease; }
#productGrid.is-loading { opacity: 0.45; pointer-events: none; }

/* ========================= RESPONSIVE ========================= */
@media (max-width: 900px) {
    .product-filters { align-items: flex-start; flex-wrap: wrap; }
    .product-filters-left { flex-wrap: wrap; }
    .product-filters-right { width: 100%; margin-left: 0; justify-content: flex-end;}
}

@media (max-width: 600px) {
    .product-filters {padding: 12px;gap: 12px;}
    .product-filters-left {width: 100%;}
    .filter-free,.filter-dropdown {flex: 1 1 auto;}
    .filter-dropdown-toggle {width: 100%;}
    .filter-dropdown-menu {min-width: 240px;max-width: calc(100vw - 32px);}
    .product-filters-right {justify-content: space-between;}
    .clear-product-filters,.product-sort,.product-sort select {flex: 1;}
    .product-sort select {width: 100%;}
}

/* GLOBAL ---------- PRODUCT CARD -------------------------------------------------------------------------------------------- */
.product-card { border-radius: 4px; 
    /* box-shadow: 0 0.5rem 1rem rgba(0, 32, 128, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.125); */
}
.product-card .titleRow { display: flex; position: relative; justify-content: space-between; padding-top: 1.7rem; }
.product-card .titleRow h3.title { line-height: 125%;}
.product-card .titleRow p.title-sub { font-weight:400; color: #5a5f6f; line-height: 125%;}
.product-card .image { overflow: hidden; border-radius: 4px; }

.product-card .product-category { position: absolute; top: .7rem; display: block; 
    margin-bottom: .4rem;
    font-size: .75rem;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a90a0;
}
/* .product-card .titleBlock { } */

/* GLOBAL ---------- PRODUCT PAGE -------------------------------------------------------------------------------------------- */
/* .canvas { position: relative;} */

.site-logo img { display: inline-block; width: 25px; }

/* ------------------------------------------------------------------------------------------------------------------------------- */
/* COMBO ------------------------------------------------------------------------------------------------------------------------ */
@media screen and (min-device-width: 601px) {

/* COMBO ---------- FONT SIZE --------------------------------------------------------------------------------------------------- */
.filter_button { font-size: 1rem; }

p.price {font-size: .85rem;}
.contain h2 { font-size: 20px; }
header h1 { font-size: 25px; }

.margin { padding: 0 2rem; max-width: 3000px; }
header.siteHeader .margin { padding: 1rem 2rem; margin: 0 auto; }
#portal.margin { padding: 0 2.5rem; margin: 0 auto;}

/* COMBO ---------- BACKGROUND COLOR -------------------------------------------------------------------------------------------- */

/* SVG Fill */
header #cartWrap svg,.account svg { fill: #0086DF; }
header #logo span { color: #101010; }
.to-top svg { fill: #FFF; }

/* COMBO ---------- HEADER ------------------------------------------------------------------------------------------------------ */
header #logo span { font-size:1.2rem; text-transform: uppercase; letter-spacing: .02rem; }
header #logo span b { color: #086eea; margin-left: .25rem; }
header #cartWrap svg { width: 24px; height: 24px; margin: auto; }
header .account svg { width: 24px; height: 24px; margin: auto; }

button.searchClear::after { background: none;}
header.siteHeader #search { display:flex; position:absolute; left:50%; width:30%; height:35px; margin-left:-15%; border: 1px solid rgba(255, 255, 255, 0.25); background-color: rgba(255, 255, 255, 0.1);-webkit-backdrop-filter: saturate(200%) blur(20px); backdrop-filter: saturate(200%) blur(20px); border-radius: 999px; overflow: hidden;}

header.siteHeader #search input { color: #fff; width: 100%; height: 100%;box-sizing: border-box;border: none;outline: none;background: transparent;padding: 0 20px;}
header.siteHeader #search input::placeholder { color: rgba(255, 255, 255, 0.85);}
header.siteHeader #search input:focus { border: 0; }

#search input[type="search"]::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none;}
#search .searchClear { position: absolute;right: 1rem;top: 50%;transform: translateY(-50%);border: 0;background: none;color: rgba(255,255,255,.75);font-size: 1.5rem; font-weight: 600;line-height: 1;cursor: pointer;}
#search input[type="search"]::-webkit-search-cancel-button:hover { opacity: .3;}
#search .searchClear { opacity: 0;visibility: hidden;pointer-events: none;transition: opacity .2s ease;}
#search:focus-within .searchClear { opacity: 1;visibility: visible;pointer-events: auto;}
#search:focus-within input:not(:placeholder-shown) + .searchClear { opacity: 1;visibility: visible;pointer-events: auto;}

/* COMBO ---------- HERO -------------------------------------------------------------------------------------------------------- */
#hero .margin { width: 51vw; margin-top: -1.5rem; z-index: 500; }
#hero h2 { line-height: 130%; margin: 0; font-size: 2.5rem; line-height: 120%;  }
#hero p { font-size: 1.35rem; max-width: 55%; margin-top: 1rem; margin-bottom: 1rem; margin-left: auto; margin-right: auto; }

/* COMBO ---------- HOME PAGE -------------------------------------------------------------------------------------------------------- */
.content { margin-top: 25px; margin-bottom: 35px; box-sizing: border-box; }
.contain { height: 50px; }
.contain h2 { display: inline-block; }

/* COMBO ---------- PRODUCTS -------------------------------------------------------------------------------------------------------- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(312px, 1fr)); gap: 2.5rem; padding-bottom: 5rem; }
.products-grid .product-card img,.products-grid .product-card video { width: 100%; display: block; height: 300px; object-fit: cover; }
/* Active */
/* .layout.big .products-grid { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; } */
/* .layout.big .products-grid .product-card img { max-height: 330px; } */
.products-grid .product .info { margin-bottom: 2rem; }

.product-card .product-link { display: block; color: inherit; }
.product-card .product-card-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 1rem;
    margin-top: .85rem;
}

.product-card .titleContain { min-width: 0; }
.product-card h3.title { margin: 0; padding-right:.5rem; font-size: 1.05rem;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -.012em;
    color: #111;
}

.product-card .title-primary,
.product-card .title-secondary { display: block; }

.product-card .title-secondary {
    margin-top: .28rem;
    color: #747b8b;
    font-weight: 500;
}

.product-card .product-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .55rem;
    min-width: max-content;
}

.product-card p.price {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.08;
    font-weight: 600;
    color: #111;
}

.product-card-filetypes {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .3rem;
    max-width: 150px;
}

.product-card .filetype {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28rem .55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}


/* Softer card badges; global filetype colors remain available elsewhere. */
.product-card .filetype-html { color: #D84421; background: rgba(228, 77, 38, .08); border-color: rgba(228, 77, 38, .28); }
.product-card .filetype-css { color: #264DE4; background: rgba(38, 77, 228, .08); border-color: rgba(38, 77, 228, .28); }
.product-card .filetype-javascript { color: #6F5A00; background: rgba(237, 198, 24, .12); border-color: rgba(201, 164, 0, .30); }
.product-card .filetype-php { color: #777AA3; background: rgba(119, 123, 180, .10); border-color: rgba(119, 123, 180, .30); }
.product-card .filetype-sql { color: #406B78; background: rgba(79, 124, 138, .10); border-color: rgba(79, 124, 138, .30); }
.product-card .filetype-svg { color: #8B5E00; background: rgba(255, 177, 59, .12); border-color: rgba(224, 145, 20, .32); }
.product-card .filetype-zip { color: #777; background: #f5f5f5; border-color: #dedede; }

p.blurb { margin-top: 10px; }
.product .info p { font-size: .9rem; color: #444; }

.interactive-preview { display: block; position: relative; border: 0; background: transparent; }
.products-grid .interactive-preview { width: 100%; height: 100%; min-height: 300px; }
#product .interactive-preview { width: 100%; height: 100%; }

.product-card .image { position: relative; width: 100%; height: 330px; overflow: hidden; }
.product-card .image,.odd-product__stage,.odd-product__stage:fullscreen,.odd-product__stage.is-expanded { background-color: #f5f7f9; }
.product-card .image span.free-badge { position: absolute; top: 1rem; left: 1rem;
    z-index: 900; background: rgba(0, 0, 0, .05);
    color: #111; font-size: .65rem; font-weight: 500;
}
.product-card .image span.free-badge { align-items: center; padding: .28rem .55rem; border: 1px solid transparent; line-height: 1; white-space: nowrap; }

/* Global filetype pills used outside product cards. */
.filetype { display: inline-flex; align-items: center; padding: 3.5px 6px; border-radius: 24px; font-size: .68rem; font-weight: 500; line-height: 1; color: #fff; }

/* HTML */.filetype-html { background: #E44D26; }
/* CSS */.filetype-css { background: #264DE4; }
/* JavaScript */.filetype-javascript { background: rgba(237, 198, 24, 0.9); color: #131313; }
/* PHP */.filetype-php { background: #777BB4; }
/* SQL */.filetype-sql { background: #4F7C8A; }
/* SVG */.filetype-svg { background: #FFB13B; color: #1f1f1f; }
/* ZIP */.filetype-zip { background: #f5f5f5; color: #666; border: 1px solid #dedede; }

/* FOOTER ----------------------------------------------------------------------------------------------------------------------- */
.to-top { bottom: 14px; right: 24px; width: 50px; height: 50px; border-radius: 50%; align-items: center; justify-content: center; background-color: #086eea; border: 2px solid #FFFFFF; box-shadow: 0px 3px 5px -1px rgba(0,0,0,0.2), 0px 6px 10px 0px rgba(0,0,0,0.14), 0px 1px 18px 0px rgba(0,0,0,0.12); pointer-events: none; transition: all 400ms; }
.to-top.active { border-color: #086eea; pointer-events: auto; bottom: 32px; overflow: hidden; }
footer { height: 100px; }

}

/* ------------------------------------------------------------------------------------------------------------------------------- */
/* LAPTOP ------------------------------------------------------------------------------------------------------------------------ */
@media screen and (min-device-width: 601px) and (max-device-width: 1440px) {
    header.siteHeader span { margin-left: .35rem;}
}

/* ------------------------------------------------------------------------------------------------------------------------------- */
/* MOBILE ------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-device-width: 600px) {
#breadcrumbs, .to-top { display: none; }

#product .flexContain { flex-direction: column; }

/* .products-grid {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 15px;} */
.products-grid .product-card img {height: 250px;}
.products-grid .product .info {margin-bottom: 15px;}
h3.title {margin-top: 8px;}
p.blurb {margin-top: 8px;}
p.price {margin-top: .5rem;}

footer { height: 50px; }

header.siteHeader .margin { padding: 1rem;}
header #logo span { font-size: 1.5rem;}
header.siteHeader span { margin-left: .8rem;}
header.siteHeader #search { display: none;}

/* MOBILE HERO */
#hero .margin { width: 85vw; padding: 0; margin-top: -3rem; z-index: 900;}
#hero h2 {font-size: 2rem; line-height: 1.1;}
#hero p {font-size: 1.3rem; line-height: 1.1; margin-top: 1rem;}
#hero img { height: 300px; object-fit: cover;}

/* .iconGroup { float: right; } */
/* .filetype { font-size:.75rem; font-weight:600; text-transform: uppercase; color: #fff; background-color: #000; padding:.25rem; border-radius: 2px; } */

}

/* ODD DESIGN TOKENS — shared across pages; ready for theme switching */
:root {
  --odd-blue: #086eea;
  --odd-border: #e5e5ec;
  --odd-surface: #fff;
  --odd-text: #121212;
  --odd-muted: #747783;
}
[data-theme="dark"] {
  --odd-border: rgba(229,229,236,.19);
  --odd-surface: #17191e;
  --odd-text: #f4f5f7;
  --odd-muted: #a5a9b3;
}
/* A visible divider under the global header, even before it becomes sticky */
header.siteHeader:not(.home-header), header.siteHeader.sticky {
  background-color: var(--odd-surface);
  border-bottom: 1px solid var(--odd-border);
}
/* Fixed desktop column count rather than the previous auto-fill layout */
.products-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 3rem 1.5rem; }
@media (max-width: 900px) { .products-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:18px; } }
@media (max-width: 600px) { .products-grid { grid-template-columns: minmax(0,1fr); gap:16px; } }
/* Count belongs inside the right group of the filter component */
.product-filters .odd-filter-count {
  margin: 0; color: var(--odd-muted); font-size: 13px; white-space: nowrap; line-height: 1.2;
}
.filter-dropdown-toggle .odd-filter-chevron {
  width: 16px; height: 16px; flex: 0 0 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linejoin: round; stroke-linecap: round;
}
.filter-dropdown-toggle { align-items:center; gap: 8px; }
/* Replace font-based sort chevron with the same stroke icon */
.product-sort::after { content: none; }
.product-sort .odd-sort-chevron {
  position:absolute; top:50%; right:13px; transform:translateY(-50%);
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
@media (max-width: 600px) {
  .product-filters .product-filters-right {flex-wrap:wrap;}
}

/* HOME V4: header transitions; no duplicate header search on home */
header.siteHeader.home-header {position:fixed;top:0;left:0;right:0;background:transparent;border-bottom:1px solid transparent;transition:background-color .25s,border-color .25s,box-shadow .25s}
header.siteHeader.home-header.sticky {background:var(--odd-surface);border-bottom:1px solid var(--odd-border)}
.home-header #logo span,.home-header #logo span b {color:#fff}
.home-header:not(.sticky) #cartWrap svg {fill:#fff}
.home-header.sticky #logo span {color:#101010}
.home-header.sticky #logo span b {color:var(--odd-blue)}
.home-header.sticky #cartWrap svg {fill:var(--odd-blue)}
.home-header .odd-search[data-variant="header"] {display:none!important}
/* Preserve command shortcut on home: the hero is the visible search */
.home-page #hero.home {min-height:640px;height:80svh;max-height:900px;overflow:visible}
.home-page #hero.home .margin {width:min(780px,calc(100% - 36px));max-width:780px;margin:0 auto;padding:120px 0 175px;box-sizing:border-box;z-index:20}
.home-page #hero.home .group{position:relative;z-index:21}
.home-page #hero.home h1{font-size:clamp(34px,4.1vw,64px);line-height:1.06;letter-spacing:-.04em;max-width:760px;margin:auto;font-weight:700}
.home-page #hero.home p{max-width:620px;margin:18px auto 28px;font-size:clamp(16px,1.5vw,21px);line-height:1.35}
.home-page #hero.home .odd-search{max-width:650px;margin:0 auto;text-align:left}
.home-page #hero.home .odd-search-form{height:58px;border-color:rgba(255,255,255,.75);background:white;border-radius:7px;box-shadow:0 10px 26px rgba(0,38,118,.12);color:var(--odd-blue);padding:0 18px}
.home-page #hero.home .odd-search-form input{font-size:17px}
.home-page #hero.home #starsContain,.home-page #hero.home #cloudsContain,.home-page #hero.home #sparklesContain{pointer-events:none}
.home-page #hero.home #cloudsContain{overflow:hidden}
.home-page .home-search-hints{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin-top:20px;color:white}
.home-page .home-search-hints a{padding:6px 12px;border:1px solid rgba(255,255,255,.4);border-radius:4px;color:white;font-size:13px;background:rgba(255,255,255,.08)}
.home-page .home-search-hints a:hover{background:rgba(255,255,255,.2)}
.home-section{padding:92px max(32px,calc((100vw - 1360px)/2));box-sizing:border-box}
.home-section .section-kicker{color:var(--odd-blue);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.home-section h2,.section-intro,.home-catalog-head { text-align: center;}
.home-section h2 { font-size:clamp(30px,3vw,46px);letter-spacing:-.035em;line-height:1.1;margin:12px 0 14px}
.home-section .section-intro { font-size:1.2rem; line-height:1.5;color:var(--odd-muted);max-width: 72%;margin: 0 auto;}
.home-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px}
.home-feature{border:1px solid var(--odd-border);border-radius:6px;padding:24px;background:var(--odd-surface)}
.home-feature svg{width:25px;height:25px;stroke:var(--odd-blue);stroke-width:1.65;fill:none}
.home-feature h3{font-size:18px;margin:18px 0 9px}.home-feature p{color:var(--odd-muted);font-size:15px;line-height:1.5}
.home-collections{background:#f8f9fc;text-align:center}
.home-collections .section-intro{margin:0 auto}
.home-collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px;text-align:left}
.home-collection{display:block;border:1px solid var(--odd-border);border-radius:6px;padding:25px;color:#1b1d24;background:#fff;transition:border-color .18s,transform .18s}
.home-collection:hover{border-color:var(--odd-blue);transform:translateY(-2px)}
.home-collection-top{display:flex;align-items:center;justify-content:space-between}
.home-collection h3{font-size:20px}.home-collection p{font-size:15px;line-height:1.5;color:#727683;margin:12px 0 18px}
.home-collection .tags{display:flex;gap:7px;flex-wrap:wrap}.home-collection .tags span{border:1px solid #e5e5ec;border-radius:4px;padding:5px 9px;font-size:12px;color:#6a7080}
.home-collection-arrow{font-size:22px;color:#086eea}
/* .home-catalog-head{margin-bottom:30px} */
.home-catalog-head a{display:inline-block;color:#086eea;font-weight:600;margin-top:12px}
/* .home-page .product-filters{border-left:0;border-right:0} */
#portal.content { padding-top: 2rem;}
/* Compact launch footer */
footer.odd-footer{height:auto!important;background:#101115;color:#fff;border-top:1px solid #24262d;padding:65px 32px 24px}
.odd-footer-inner{max-width:1360px;margin:auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px}
.odd-footer-brand img{width:28px;height:28px}.odd-footer-brand strong{display:inline-flex;align-items:center;gap:10px;font-size:21px;text-transform:uppercase}
.odd-footer-brand p{margin-top:18px;max-width:360px;color:#a5a9b3;font-size:15px;line-height:1.5}
.odd-footer h3{font-size:14px;margin:0 0 20px}.odd-footer nav{display:grid;gap:14px}
.odd-footer a{color:#a5a9b3;font-size:14px}.odd-footer a:hover{color:#fff}
.odd-footer-bottom{max-width:1360px;margin:55px auto 0;padding-top:20px;border-top:1px solid #32333b;color:#8d919c;font-size:13px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:900px){.home-features,.home-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-section{padding:70px 24px}.odd-footer-inner{gap:25px}}
@media(max-width:600px){.home-features,.home-collection-grid{grid-template-columns:1fr}.home-section{padding:56px 18px}.home-page #hero.home{min-height:660px;height:85svh}.home-page #hero.home .margin{padding-top:155px;padding-bottom:150px}.home-page #hero.home h1{font-size:36px}.home-page #hero.home p{font-size:17px}.home-page #hero.home .odd-search-form{height:54px}.odd-footer-inner{grid-template-columns:1fr;gap:38px}footer.odd-footer{padding:48px 22px 24px}}
@media(prefers-reduced-motion:reduce){header.siteHeader.home-header,.home-collection{transition:none}}


/* GLOBAL — SITE NAVIGATION */

#cartWrap {
    display: flex;
    align-items: center;
    gap: 2rem;
}

#siteNav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

#siteNav a {
    color: var(--odd-text);
    font-size: .95rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color .2s ease;
}

#siteNav a:hover {
    color: var(--odd-blue);
}

/* Homepage — transparent header */

.home-header:not(.sticky) #siteNav a {
    color: #fff;
}

.home-header:not(.sticky) #siteNav a:hover {
    color: rgba(255, 255, 255, .7);
}

/* Mobile */

@media (max-width: 600px) {
    #cartWrap {
        gap: 1rem;
    }

    #siteNav {
        gap: .75rem;
    }

    #siteNav a {
        font-size: .8rem;
    }
}