/* ================================================================
   SHOPZONE — SHARED: TOPBAR · NAVBAR · MOBILE MENU · FOOTER
   Requires: Font Awesome 6.5 · Bootstrap 5.3 · Outfit font
   ================================================================ */

/* ── TOPBAR ── */
.sz-topbar {
   background: #0a0a0a;
   color: rgba(255, 255, 255, .75);
   font-size: 13px;
   padding: 8px 0;
   text-align: center;
   font-family: 'Outfit', sans-serif;
   line-height: 1.4
}

.sz-topbar a {
   color: #f4a261;
   text-decoration: none;
   font-weight: 600
}

.sz-topbar a:hover {
   text-decoration: underline
}

/* ── NAVBAR ── */
.sz-navbar {
   height: 68px;
   background: #fff;
   border-bottom: 1px solid #e8e8e8;
   position: sticky;
   top: 0;
   z-index: 1000;
   padding: 0;
   box-shadow: 0 2px 16px rgba(0, 0, 0, .06)
}

.sz-navbar>.container-xl {
   height: 100%;
   display: flex;
   align-items: center
}

.sz-nav-inner {
   display: flex;
   align-items: center;
   gap: 12px;
   width: 100%
}

.sz-brand {
   font-size: 26px;
   font-weight: 800;
   color: #0a0a0a !important;
   letter-spacing: -.04em;
   text-decoration: none;
   white-space: nowrap;
   flex-shrink: 0;
   font-family: 'Outfit', sans-serif
}

.sz-brand span {
   color: #e63946
}

.sz-brand:hover {
   color: #0a0a0a !important
}

.sz-search {
   flex: 1;
   max-width: 480px;
   display: flex;
   align-items: center;
   border: 1.5px solid #e8e8e8;
   border-radius: 10px;
   overflow: hidden;
   background: #f8f8f6;
   transition: border-color .3s, background .3s
}

.sz-search:focus-within {
   border-color: #e63946;
   background: #fff
}

.sz-search input {
   flex: 1;
   border: none;
   background: transparent;
   padding: 0 14px;
   height: 40px;
   font-size: 14px;
   font-family: 'Outfit', sans-serif;
   color: #1a1a1a;
   outline: none;
   min-width: 0
}

.sz-search input::placeholder {
   color: #bbb
}

.sz-search button {
   height: 40px;
   padding: 0 14px;
   border: none;
   background: transparent;
   color: #6b6b6b;
   cursor: pointer;
   font-size: 15px;
   transition: color .3s;
   flex-shrink: 0
}

.sz-search button:hover {
   color: #e63946
}

.sz-nav-actions {
   display: flex;
   align-items: center;
   gap: 6px;
   margin-left: auto;
   flex-shrink: 0
}

.sz-icon-btn {
   width: 42px;
   height: 42px;
   border: 1.5px solid #e8e8e8;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #fff;
   color: #1a1a1a;
   cursor: pointer;
   text-decoration: none;
   font-size: 17px;
   position: relative;
   transition: border-color .3s, background .3s, transform .3s, color .3s;
   flex-shrink: 0
}

.sz-icon-btn:hover {
   border-color: #e63946;
   background: #fff0f1;
   color: #e63946;
   transform: translateY(-1px)
}

.sz-icon-btn.sz-hamburger {
   border: none;
   background: none
}

.sz-icon-btn.sz-hamburger:hover {
   background: #f8f8f6;
   border: 1.5px solid #e8e8e8
}

.sz-cart-badge {
   position: absolute;
   top: -6px;
   right: -6px;
   background: #e63946;
   color: #fff;
   font-size: 10px;
   font-weight: 700;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none
}

/* ── NAVBAR RESPONSIVE ── */
@media(max-width:991px) {
   .sz-search {
      display: none !important
   }
}

@media(max-width:575px) {
   .sz-nav-inner {
      gap: 8px
   }
}

/* ── MOBILE MENU OVERLAY ── */
.sz-mobile-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, .5);
   z-index: 2000;
   opacity: 0;
   visibility: hidden;
   transition: opacity .3s, visibility .3s
}

.sz-mobile-overlay.open {
   opacity: 1;
   visibility: visible
}

.sz-mobile-drawer {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 300px;
   max-width: 85vw;
   background: #fff;
   padding: 20px;
   transform: translateX(-100%);
   transition: transform .35s cubic-bezier(.4, 0, .2, 1);
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 0
}

.sz-mobile-overlay.open .sz-mobile-drawer {
   transform: translateX(0)
}

.sz-mobile-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 18px;
   padding-bottom: 16px;
   border-bottom: 1px solid #f0f0f0
}

.sz-mobile-brand {
   font-size: 22px;
   font-weight: 800;
   color: #0a0a0a;
   letter-spacing: -.04em;
   font-family: 'Outfit', sans-serif
}

.sz-mobile-brand span {
   color: #e63946
}

.sz-mobile-close {
   background: none;
   border: none;
   font-size: 22px;
   cursor: pointer;
   color: #6b6b6b;
   display: flex;
   align-items: center;
   padding: 4px;
   transition: color .2s
}

.sz-mobile-close:hover {
   color: #e63946
}

.sz-mobile-search {
   display: flex;
   align-items: center;
   border: 1.5px solid #e8e8e8;
   border-radius: 10px;
   overflow: hidden;
   margin-bottom: 16px;
   background: #f8f8f6
}

.sz-mobile-search:focus-within {
   border-color: #e63946;
   background: #fff
}

.sz-mobile-search input {
   flex: 1;
   border: none;
   background: transparent;
   padding: 0 12px;
   height: 42px;
   font-size: 14px;
   font-family: 'Outfit', sans-serif;
   outline: none;
   color: #1a1a1a
}

.sz-mobile-search input::placeholder {
   color: #bbb
}

.sz-mobile-search button {
   height: 42px;
   padding: 0 12px;
   border: none;
   background: transparent;
   color: #6b6b6b;
   cursor: pointer;
   font-size: 15px
}

.sz-mobile-nav {
   display: flex;
   flex-direction: column
}

.sz-mobile-link {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 13px 6px;
   border-bottom: 1px solid #f5f5f5;
   font-size: 15px;
   font-weight: 500;
   color: #1a1a1a;
   text-decoration: none;
   transition: color .2s, background .2s;
   border-radius: 6px;
   margin: 1px 0
}

.sz-mobile-link:last-child {
   border-bottom: none
}

.sz-mobile-link i {
   width: 20px;
   text-align: center;
   color: #9b9b9b;
   font-size: 15px;
   transition: color .2s;
   flex-shrink: 0
}

.sz-mobile-link:hover,
.sz-mobile-link.active {
   color: #e63946;
   background: #fff0f1;
   padding-left: 10px
}

.sz-mobile-link:hover i,
.sz-mobile-link.active i {
   color: #e63946
}

.sz-mobile-auth {
   margin-top: auto;
   padding-top: 16px;
   border-top: 1px solid #f0f0f0;
   display: flex;
   flex-direction: column;
   gap: 8px
}

.sz-mobile-auth-btn {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   padding: 12px;
   border-radius: 10px;
   font-size: 14px;
   font-weight: 600;
   font-family: 'Outfit', sans-serif;
   text-decoration: none;
   transition: all .2s;
   border: none;
   cursor: pointer;
   width: 100%
}

.sz-mobile-auth-btn.sz-btn-primary {
   background: #e63946;
   color: #fff
}

.sz-mobile-auth-btn.sz-btn-primary:hover {
   background: #c62b37;
   color: #fff
}

.sz-mobile-auth-btn.sz-btn-secondary {
   background: #f8f8f6;
   color: #1a1a1a;
   border: 1.5px solid #e8e8e8
}

.sz-mobile-auth-btn.sz-btn-secondary:hover {
   border-color: #e63946;
   color: #e63946
}

/* ── FOOTER ── */
.sz-footer {
   background: #0a0a0a;
   color: rgba(255, 255, 255, .6);
   padding: 56px 0 0;
   font-family: 'Outfit', sans-serif
}

.sz-footer-brand {
   font-size: 28px;
   font-weight: 800;
   color: #fff;
   letter-spacing: -.04em;
   margin-bottom: 12px;
   font-family: 'Outfit', sans-serif
}

.sz-footer-brand span {
   color: #e63946
}

.sz-footer-desc {
   font-size: 14px;
   line-height: 1.75;
   color: rgba(255, 255, 255, .45);
   margin-bottom: 20px;
   max-width: 280px
}

.sz-footer-social {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.sz-social-btn {
   width: 38px;
   height: 38px;
   border-radius: 8px;
   background: rgba(255, 255, 255, .06);
   border: 1px solid rgba(255, 255, 255, .1);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(255, 255, 255, .55);
   text-decoration: none;
   font-size: 15px;
   transition: all .25s
}

.sz-social-btn:hover {
   background: #e63946;
   border-color: #e63946;
   color: #fff;
   transform: translateY(-2px)
}

.sz-footer-col-title {
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .12em;
   color: #fff;
   margin-bottom: 18px
}

.sz-footer-links {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   gap: 11px
}

.sz-footer-links li {
   font-size: 14px;
   color: rgba(255, 255, 255, .45);
   display: flex;
   align-items: center;
   gap: 9px;
   line-height: 1.4
}

.sz-footer-links a {
   color: rgba(255, 255, 255, .45);
   text-decoration: none;
   transition: color .2s
}

.sz-footer-links a:hover {
   color: #e63946
}

.sz-footer-links i {
   font-size: 13px;
   width: 15px;
   text-align: center;
   flex-shrink: 0;
   color: rgba(255, 255, 255, .3)
}

.sz-footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, .07);
   margin-top: 48px;
   padding: 20px 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px;
   font-size: 13px;
   color: rgba(255, 255, 255, .3)
}

.sz-footer-bottom strong {
   color: rgba(255, 255, 255, .65)
}

.sz-pay-methods {
   display: flex;
   gap: 6px;
   align-items: center
}

.sz-pay-icon {
   background: rgba(255, 255, 255, .07);
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 4px;
   padding: 3px 8px;
   font-size: 11px;
   font-weight: 700;
   color: rgba(255, 255, 255, .45);
   letter-spacing: .04em
}

/* ── FOOTER RESPONSIVE ── */
@media(max-width:575px) {
   .sz-footer {
      padding: 40px 0 0
   }

   .sz-footer-bottom {
      flex-direction: column;
      text-align: center
   }

   .sz-footer-desc {
      max-width: 100%
   }
}

/* ================================================================
   NAVBAR JS SNIPPET — paste at end of each page's <script>:

   szNavbarInit();  // call once after DOM ready

   function szNavbarInit() { ... }  // defined in shared below
   ================================================================ */