/* ============================================================
   web_v18 — style-inner.css
   Inner-page header, footer-inner, and content overrides.
   Loaded ONLY on inner pages via Main_innerAsset (not on homepage).
   ============================================================ */

/* ── HEADER: override position: absolute from style.css ────────────────── */
.headerSection {
  position: sticky;
  top: 0;
  background-color: var(--headerBg);
  z-index: 9;
}
.headerSection .headerStickey {
  margin-top: 0;
}
.headerSection .headerStickey.isSticky {
  position: static;
  padding: 0;
}

/* ── INNER PAGE CONTENT ─────────────────────────────────────────────────── */
/* Homepage adds top padding to clear the absolute-positioned header.
   On inner pages the header is sticky (in-flow), so no extra top padding. */
.newtheme_inner_page .topSpace {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── HEADER PADDING: override global style.css padding on headerSection ──── */
/* Global style.css adds padding: 20px on scroll and padding: 20px 0 at ≤1640px.
   On inner pages the headerCol already provides internal spacing — zero it. */
.headerSection {
  padding: 0 !important;
}

/* ── SUBCATEGORY TAB BAR: stick below v18 header ────────────────────────── */
/* newthemechangeui.css sets top:80px; v18 header height varies with viewport.
   > 1640px: padding 40px → header 131px
   ≤ 1640px: padding 20px → header 91px
   ≤ 1540px: padding 15px → header 81px
   ≤ 1199px: topLinksSwiper (category bar, ~41px) also becomes sticky below header
   ≤ 575px:  header 65px + topLinksSwiper ~41px = 106px */
.fixedCenterScroll .menuSection,
.menuPageContent .fixedCenterScroll .menuSection {
  top: 131px !important;
}
@media (max-width: 1640px) {
  .fixedCenterScroll .menuSection,
  .menuPageContent .fixedCenterScroll .menuSection {
    top: 91px !important;
  }
}
@media (max-width: 1540px) {
  .fixedCenterScroll .menuSection,
  .menuPageContent .fixedCenterScroll .menuSection {
    top: 81px !important;
  }
}
@media (max-width: 1199px) {
  /* topLinksSwiper (horizontal category bar) sticks below header (81px at this breakpoint) */
  .topLinksSwiper {
    top: 81px !important;
  }
  /* subcategory bar sits below header (81px) + category bar (~41px) */
  .fixedCenterScroll .menuSection,
  .menuPageContent .fixedCenterScroll .menuSection {
    top: 122px !important;
  }
}
@media (max-width: 575px) {
  /* header is 65px on mobile */
  .topLinksSwiper {
    top: 65px !important;
    padding-top: 8px !important;
  }
  /* subcategory sits below header (65px) + category bar (~41px) + extra padding (8px) = 114px */
  .fixedCenterScroll .menuSection,
  .menuPageContent .fixedCenterScroll .menuSection {
    top: 114px !important;
  }
}

/* ── FOOTER INNER — using v18 native footer classes ─────────────────────── */
/* .footerSection, footer background set in style.css (var(--dark)).
   Override padding for inner pages (homepage uses 100px, inner uses 60px). */
.footerSection {
  padding: 60px 0 0;
}

/* footerInner: 3-col contact/address/hours */
.footerInner {
  padding-bottom: 50px;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.footerTitle {
  font-size: 20px;
  font-weight: 700;
  color: var(--secondary);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: var(--subTitleFont);
  margin-bottom: 20px;
}

.footerCol {
  padding: 10px 0;
}
.footerCol p,
.footerCol ul li {
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.8);
}
.footerCol ul li span {
  font-weight: 600;
  color: var(--secondary);
  margin-right: 6px;
}
.footerCol a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s;
}
.footerCol a:hover,
.footerCol .linkStyle {
  color: var(--secondary);
}

.addressCol {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
}

/* footerNav: nav links row */
.footerNav {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footerNav > ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}
.footerNav > ul > li {
  position: relative;
}
.footerNav > ul > li + li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.footerNav > ul > li > a {
  display: block;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 18px;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s;
  text-transform: capitalize;
}
.footerNav > ul > li > a:hover,
.footerNav > ul > li > a.active {
  color: var(--secondary);
}

/* footerBottom: social + copyright row */
.footerBottom {
  padding: 24px 0;
}

/* Override footerSocialLinks for inner pages (horizontal layout) */
.footerSocialLinks {
  align-items: center;
}
.ft-text {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.footerSocialIcons a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s, opacity 0.3s;
}
.footerSocialIcons a:hover {
  color: var(--secondary);
}

.copyrightCol {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-align: right;
}

/* ── SCROLL TO TOP ───────────────────────────────────────────────────────── */
.ak-scrollup {
  position: fixed;
  bottom: -60px;
  right: 40px;
  color: var(--dark);
  padding: 5px;
  height: 50px;
  width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.4s ease;
  z-index: 10;
  background-color: var(--secondary);
  box-shadow: 0px 1px 5px 1px rgba(0, 0, 0, 0.3);
  border-radius: 50%;
}
.ak-scrollup:hover {
  background-color: var(--white);
  color: var(--dark);
}
.ak-scrollup.ak-scrollup-show {
  bottom: 50px;
}

/* ── SIDEBAR: restore v18 dark styling ──────────────────────────────────── */
/* newthemechangeui.css @(max-width:991px) forces white sidebar bg + dark nav
   text for an older theme's light panel. Override it back to v18 dark style. */
.menuColMain {
  background-color: var(--primary) !important;
}
.menuColMain .navMain > ul > li > a {
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.menuColMain .navMain > ul > li > a:hover,
.menuColMain .navMain > ul > li > a.active {
  color: var(--secondary);
}

/* ── DESKTOP-ONLY ────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  .nwCartMain {
    margin-top: 30px;
  }

  /* Sidebar nav: override newthemechangeui.css ".navMain > ul { display:flex }"
     which was for the old horizontal desktop nav. Now navMain lives inside the
     fixed-panel sidebar, so items must always stack vertically. */
  .menuColMain .navMain > ul {
    display: block;
  }
  .menuColMain .navMain > ul > li + li {
    margin-left: 0;
  }
  .menuColMain .navMain {
    padding-left: 0;
    margin-top: 30px;
    text-align: left;
  }
}

/* ── SIDEBAR MOBILE: newthemechangeui.css ≤991px also changes sidebar padding ── */
@media (max-width: 991px) {
  .menuColMain {
    padding: 85px 20px 50px;
  }
}

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .footerSection { padding: 50px 0 0; }
  .footerTitle { font-size: 18px; }
}

@media (max-width: 991px) {
  .ak-scrollup { right: 15px; }
  .footerSection { padding: 40px 0 0; }
  .footerTitle { font-size: 17px; }
  .addressCol { border: 0; }
  .footerCol { margin-top: 24px; }
  .copyrightCol { text-align: center; margin-top: 12px; }
}

@media (max-width: 767px) {
  .footerSection { padding: 30px 0 0; }
  .footerNav > ul > li > a { padding: 4px 12px; font-size: 13px; }
  .ak-scrollup { right: 10px; width: 40px; height: 40px; }
}

@media (max-width: 575px) {
  .footerNav > ul > li + li::before { display: none; }
  .footerNav > ul { gap: 4px; }
  .footerCol { margin-top: 20px; }
}