/* Add custom CSS styles below */ 
/* =========================================================
   Rawasi / Salla — FULL WIDTH (Header + Main + Footer)
   Desktop side gap: 50px | Mobile side gap: 20px
   Keeps your previous full-width rules intact + adds fixes
   ========================================================= */

:root{
  --site-side-gap: 50px;
}
@media (max-width: 768px){
  :root{ --site-side-gap: 20px; }
}

/* Prevent accidental horizontal scroll */
html, body{
  overflow-x: hidden;
}

/* =========================================================
   1) MAIN CONTENT (your existing working approach)
   ========================================================= */

/* Main content wrapper(s) */
#app .app-inner > .container,
#app .app-inner > main > .container,
#app main > .container{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: var(--site-side-gap) !important;
  padding-right: var(--site-side-gap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* Expand nested containers inside main content */
#app .app-inner > .container .container,
#app .app-inner > main .container,
#app main .container{
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   2) FIX: Boxed SECTIONS caused by "container" on the SECTION
   ========================================================= */

/* Sections that are boxed because the SECTION has .container */
#app .app-inner > section.container,
#app .app-inner > section.s-block.container{
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--site-side-gap) !important;
  padding-right: var(--site-side-gap) !important;
  box-sizing: border-box !important;
}

/* If a section is NOT a container itself, but has a direct .container inside */
#app .app-inner > section:not(.container) > .container{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: var(--site-side-gap) !important;
  padding-right: var(--site-side-gap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* =========================================================
   3) SPECIFIC SECTIONS (exact names from your inspect)
   ========================================================= */

/* Feature section + spacing request (40px -> 100px) */
#app section.RAW-features{
  max-width: 100% !important;
  width: 100% !important;
  margin-top: 100px !important;
  margin-bottom: 100px !important;
}

/* Raw fixed banner blocks */
#app section.raw-fixed-banner,
#app section[id^="raw-fixed-banner"]{
  max-width: 100% !important;
  width: 100% !important;
}

/* FAQ wrapper */
#app section.Ra_fqa_section{
  max-width: 100% !important;
  width: 100% !important;
}

/* =========================================================
   4) HEADER — FULL WIDTH
   ========================================================= */

#app header.store-header{
  width: 100% !important;
  max-width: 100% !important;

  /* Remove centered/boxed positioning */
  left: 0 !important;
  right: 0 !important;
  inset-inline: 0 !important;
  margin: 0 !important;
  transform: none !important;

  /* Full-width bar */
  border-radius: 0 !important;

  /* 50px/20px side gap */
  padding-left: var(--site-side-gap) !important;
  padding-right: var(--site-side-gap) !important;

  box-sizing: border-box !important;
}

/* =========================================================
   5) FOOTER — FULL WIDTH
   ========================================================= */

#app footer.store-footer,
#app footer.store-footer .store-footer__inner{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Keep footer content aligned with the same side gap */
#app footer.store-footer .store-footer__inner > .container,
#app footer.store-footer .store-footer__inner .container{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: var(--site-side-gap) !important;
  padding-right: var(--site-side-gap) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* =========================================================
   Task 1 — Footer menu hover/active keep SAME normal color
   Target: .s-menu-footer-list (and its items)
   ========================================================= */

footer.store-footer .s-menu-footer-list{
  --tw-text-opacity: 1 !important;
  color: rgba(86, 86, 86, var(--tw-text-opacity, 1)) !important;
}

footer.store-footer .s-menu-footer-list .s-menu-footer-item,
footer.store-footer .s-menu-footer-list .s-menu-footer-item:hover,
footer.store-footer .s-menu-footer-list .s-menu-footer-item:active,
footer.store-footer .s-menu-footer-list .s-menu-footer-item:focus{
  color: inherit !important;
}

/* =========================================================
   Task 2 — Bottom footer bar max-width 960px -> FULL width
   Target: div.md:flex.items-center.justify-between.py-4.container.text-center
   ========================================================= */

footer.store-footer div.md\:flex.items-center.justify-between.py-4.container.text-center{
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: var(--site-side-gap, 50px) !important;
  padding-right: var(--site-side-gap, 50px) !important;
  box-sizing: border-box !important;
}

/* =========================================================
   Task 3 — Inner pages header inner content FULL width ONLY
   Don’t affect homepage header
   ========================================================= */

body#app.page-single header.store-header .inner.bg-inherit.w-full > .container{
  max-width: 100% !important;
  width: 100% !important;
  padding-left: var(--site-side-gap, 50px) !important;
  padding-right: var(--site-side-gap, 50px) !important;
  box-sizing: border-box !important;
}

body#app.page-single header.store-header .inner.bg-inherit.w-full > .container > .flex.items-stretch.justify-between.relative{
  max-width: 100% !important;
  width: 100% !important;
}

/* =========================================================
   Footer FIRST block text color fix (only text, no background)
   ========================================================= */

footer.store-footer
  .store-footer__inner
  .container
  > div.col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20
  :is(h1,h2,h3,h4,h5,h6,p,span,small,strong,em,a) {
  color: rgba(75, 85, 99, 1) !important;
}

/* Fallback (still only first block) */
footer.store-footer
  .store-footer__inner
  .container.grid
  > div:first-child
  :is(h1,h2,h3,h4,h5,h6,p,span,small,strong,em,a) {
  color: rgba(75, 85, 99, 1) !important;
}
/* MOBILE MENU — force text BLACK in ALL states (normal/hover/visited/active/focus) */
nav#mobile-menu.mobile-menu li a.text-gray-500,
nav#mobile-menu.mobile-menu li a.text-gray-500:visited,
nav#mobile-menu.mobile-menu li a.text-gray-500:hover,
nav#mobile-menu.mobile-menu li a.text-gray-500:active,
nav#mobile-menu.mobile-menu li a.text-gray-500:focus{
color: #000 !important;
}



/* If the text is inside a <span> */
nav#mobile-menu.mobile-menu li a.text-gray-500 span,
nav#mobile-menu.mobile-menu li a.text-gray-500:hover span,
nav#mobile-menu.mobile-menu li a.text-gray-500:active span,
nav#mobile-menu.mobile-menu li a.text-gray-500:focus span{
color: inherit !important;
}
/* COMPUTER MENU — force text BLACK in ALL states (normal/hover/visited/active/focus) */
nav#mobile-menu.mobile-menu li a.text-gray-500,
nav#mobile-menu.mobile-menu li a.text-gray-500:visited,
nav#mobile-menu.mobile-menu li a.text-gray-500:hover,
nav#mobile-menu.mobile-menu li a.text-gray-500:active,
nav#mobile-menu.mobile-menu li a.text-gray-500:focus{
color: #000 !important;
}