/* ============================================================
   MAIN CSS IMPORT FILE

   In index.html, link only this file:

   <link rel="stylesheet" href="./style/main.css">

   This file loads all smaller CSS files in the correct order.
   Do not put normal CSS above these @import lines.
   ============================================================ */


/* ============================================================
   BASE
   Global reset, body background, fonts, scrollbar, shared typography,
   and general container styles used across the whole website.
   ============================================================ */
@import url("./base/global.css");


/* ============================================================
   LAYOUT
   Old top bar, branding area, header, hero banner, footer,
   navigation, dropdowns, mobile header fixes, and z-index fixes.
   ============================================================ */

/* Old top bar, language selector, social icons, contact number,
   cart icon, logo/brand section, and search box. */
@import url("./layout/legacy-topbar-branding.css");

/* Main homepage layout: new header, navigation links, dropdown menu,
   search overlay, hero banner, footer, section titles, and category grid. */
@import url("./layout/homepage-header-hero-footer.css");

/* Header/mobile fixes: z-index, dropdown visibility, mobile menu behavior,
   and layout corrections for smaller screens. */
@import url("./layout/clean-header-mobile-zindex.css");


/* ============================================================
   SHOP
   Category buttons, product grid, filters, sorting controls,
   stock badges, product cards, and responsive shop layout.
   ============================================================ */

/* Category pills, product grid layout, product cards, product images,
   add-to-cart button, no-results message, and mobile grid spacing. */
@import url("./shop/filters-categories-product-grid.css");

/* Sorting dropdown, stock filter checkbox, price rows,
   low-stock badge, sold-out badge, and out-of-stock card styling. */
@import url("./shop/sorting-stock-badges.css");


/* ============================================================
   COMPONENTS
   Reusable UI parts: image carousel, popups, product modal,
   promo banners, set cards, and featured product carousel.
   ============================================================ */

/* Product image carousel dots, hidden image states,
   set card image layout, and set-card grid/carousel styling. */
@import url("./components/product-imgs-carousel-set-cards.css");

/* Product image modal, large product popup, gallery arrows,
   modal product information, modal add-to-cart button, and modal animations. */
@import url("./components/image-modals-prod-popup.css");

/* Promo banner, free gift banner, marquee scrolling text,
   and responsive banner text sizing. */
@import url("./components/gift-banners.css");

/* Jewelry set carousel, set product page styles,
   set cards, set prices, and set view button styling. */
@import url("./components/sets-carousel-and-page.css");

/* Featured products section, coverflow/stacked carousel,
   carousel cards, dots, arrows, and 3D carousel behavior. */
@import url("./components/featured-products.css");


/* ============================================================
   CART
   Cart sidebar, cart items, checkout buttons, order form,
   customer modal, and checkout-related UI.
   ============================================================ */

/* Sliding cart sidebar, cart header, cart item cards,
   cart buttons, total price, checkout button, and mobile cart layout. */
@import url("./cart/cart-sidebar-checkout.css");

/* Customer information modal, order form inputs,
   city dropdown, confirm order button, and form styling. */
@import url("./cart/customer-info-order-form.css");


/* ============================================================
   PAGES
   Styles for separate website pages such as product detail
   and help/support pages.
   ============================================================ */

/* Product detail page, large product gallery, detail info,
   similar products section, back button, and detail carousel arrows. */
@import url("./pages/product-detail-similar-products.css");

/* Help page layout, FAQ/support sections, help cards,
   and customer support page styling. */
@import url("./pages/help-page.css");


/* ============================================================
   UTILITIES
   Decorative effects, loading placeholders, spacing fixes,
   animations, and small global corrections.
   ============================================================ */

/* Background decorations such as crescent moon, ethereal symbols,
   floating decorative elements, and decorative keyframes. */
@import url("./utilities/decorative-background.css");

/* Skeleton loading placeholders used while products/images are loading. */
@import url("./utilities/skeleton-loading.css");

/* Small spacing corrections between banners, categories, filters,
   products, sections, and responsive layout gaps. */
@import url("./utilities/spacing-fixes.css");

/* Dynamic offer price/badge helpers. */
@import url("./utilities/offers.css");

@import url("./pages/checkout-page.css");

/* =========================================================
   LOCK WEBSITE COLORS - PREVENT DEVICE DARK MODE CHANGES
   ========================================================= */

:root,
html,
body {
    color-scheme: only light !important;
}

html,
body {
    background: #05020a !important;
    color: #f4eaff !important;
}

/* Stop forced/high-contrast color overrides where supported */
* {
    forced-color-adjust: none;
}

/* Prevent browser dark mode from inverting product images, logos, icons */
img,
picture,
video,
canvas,
svg {
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* Keep Font Awesome icons controlled by your CSS, not browser auto colors */
i,
.fa,
.fas,
.fab,
.far {
    color: inherit;
    filter: none !important;
}

/* Make form fields stay gothic/dark on all devices */
input,
textarea,
select,
button {
    color-scheme: only light !important;
}

/* Stop old mobile browsers from changing tap/button colors */
button,
a,
.follow-btn,
.cat-btn,
.add-to-cart-btn,
.view-product-btn {
    -webkit-tap-highlight-color: transparent;
    filter: none !important;
    mix-blend-mode: normal !important;
}