/* ========================================
   MODULAR CSS IMPORTS
   ======================================== */

/* Import base styles */
@import url('css/base/variables.css');
@import url('css/base/typography.css');

/* Import component styles */
@import url('css/components/buttons.css');
@import url('css/components/secondary-header.css');
@import url('css/components/navigation.css');
@import url('css/components/hero.css');
@import url('css/components/diptych.css');
@import url('css/components/blog-showcase.css'); /* NEW: Hybrid Bento + Editorial Blog Section */
@import url('css/components/flipbook.css');
@import url('css/components/marquee.css');
@import url('css/components/products.css');
@import url('css/components/product-scroller.css');
@import url('css/components/categories.css');
@import url('css/components/health-section.css');
@import url('css/components/category-showcase.css');
@import url('css/components/horizontal-categories.css');


/* Import page styles */
@import url('css/pages/pages.css');
@import url('css/pages/products.css');

/* Import utilities */
@import url('css/utilities/utilities.css');

/* ========================================
   GLOBAL SCROLLBAR HIDING
   ======================================== */

/* Hide scrollbars globally */
html, body {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none;
}

/* ========================================
   LEGACY STYLES (TO BE MODULARIZED)
   ======================================== */

/* Font declarations moved to css/base/typography.css */



/* Basic styles will go here */
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--text-color);
}

/* Navigation styles moved to css/components/navigation.css */

h1, h2 {
    font-family: 'Altamis', var(--font-heading), sans-serif !important;
    font-weight: bold;
}

/* Hero styles moved to css/components/hero.css */

/* Responsive adjustments moved to css/utilities/utilities.css */

/* Button styles moved to css/components/buttons.css */


/* Page styles moved to css/pages/pages.css */

.climax-brand-bg {
    background-color: var(--color-off-white);
}

.climax-brand-bg .brand-text {
    text-align: right;
}

/* Product styles moved to css/components/products.css */

/* More product styles moved to css/components/products.css */

/* Diptych styles moved to css/components/diptych.css */



/* Section separator moved to css/utilities/utilities.css */

/* Diptych hover states moved to css/components/diptych.css */


/* All remaining styles moved to css/utilities/utilities.css */

/* Image stability to reduce CLS */
.hero-bg-image,
.contact-hero-background img,
.blog-hero-background img,
.page-header img,
.hero-section img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}