/* =========================================================
   DITHAR STORE - THEME CUSTOMIZATION CSS
   Brand colors: Primary #550202 (dark maroon) / Secondary #d2bf9d (beige)
   ========================================================= */

/* ---------------------------------------------------------
   1) HEADER - Force maroon background + make it sticky on scroll
   Layered selectors: known Zid "Soft" theme classes first,
   then generic fallbacks, so at least one set matches.
--------------------------------------------------------- */
header,
header div,
header section,
.header,
.header-wrapper,
.main-header,
.site-header,
.s-header,
#header,
[class*="Header"],
[class*="header-"],
[class*="navbar"],
[class*="Navbar"],
[class*="topbar"],
[class*="Topbar"],
[class*="top-bar"] {
    background: #550202 !important;
}

/* Make the header stick to the top while scrolling */
header,
.header,
.header-wrapper,
.main-header,
.site-header,
.s-header,
#header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
}

/* Fallback: if sticky doesn't take effect because a parent
   has overflow:hidden, force fixed positioning instead.
   NOTE: if you enable this block, also add the "body { padding-top }"
   rule further below to stop content jumping under the fixed bar. */
/*
header, .header, .header-wrapper, .main-header, .site-header, .s-header, #header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
}
body {
    padding-top: 90px !important;
}
*/

/* Header text / icons in white so they read on maroon */
header a,
header span,
header p,
header i,
header svg,
header path,
header button,
.header a,
.header span,
.header i,
.header svg {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

/* Secondary nav row directly under the header, if it exists as a
   separate element (some Soft theme variants split logo row / menu row) */
.top-bar,
.topbar,
.header-top,
.s-header-top,
.announcement-bar,
.header-bottom,
.main-nav,
nav.navbar {
    background: #550202 !important;
}
.top-bar a,
.topbar a,
.header-top a,
nav.navbar a {
    color: #fff !important;
}

/* ---------------------------------------------------------
   2) FOOTER - keep consistent maroon branding
--------------------------------------------------------- */
footer,
footer div,
footer section,
.footer,
[class*="Footer"] {
    background: #550202 !important;
}
footer a,
footer p,
footer span,
footer i,
footer svg,
footer path {
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
}

/* ---------------------------------------------------------
   3) FULL STORE BACKGROUND - fabric image behind everything
   Replace PASTE_IMAGE_URL_HERE with the URL from Zid Media Library
--------------------------------------------------------- */
html,
body {
    background-image: url('PASTE_IMAGE_URL_HERE') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}