/* =====================================================================
   CUSTOM REDESIGN OVERRIDES — loaded AFTER theme-neon.css
   Uses !important to win over theme-neon.css + inline body <style> blocks.
   Scope: search box, mobile header, floating bottom dock, homepage polish
   ===================================================================== */
:root{
  --cr-violet:   #6d28d9;
  --cr-violet-2: #7c3aed;
  --cr-amber:    #f59e0b;
  --cr-ink:      #14141f;
}

/* =========================================================
   1. SEARCH BOX — crisp white squircle
   ========================================================= */
.mob-search-wrap{ margin-top: 14px !important; }
.mob-sbox{
  height: 48px !important;
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  border-radius: 16px !important;
  padding: 5px 5px 5px 16px !important;
  box-shadow: 0 10px 24px rgba(15,10,40,.22) !important;
}
.mob-sbox:focus-within{
  border-color: var(--cr-violet-2) !important;
  box-shadow: 0 12px 30px rgba(109,40,217,.30) !important;
}
.mob-sbox input{
  color: var(--cr-ink) !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  background: transparent !important;
}
.mob-sbox input::placeholder{ color: #8b8b99 !important; opacity: 1 !important; }
.mob-sbox button{
  width: 40px !important; height: 40px !important;
  border-radius: 12px !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  background: linear-gradient(135deg, var(--cr-violet-2), var(--cr-violet)) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(109,40,217,.40) !important;
}

/* desktop search bar to match */
.tnh-search{
  border-radius: 14px !important;
  border: 1px solid rgba(109,40,217,.18) !important;
  box-shadow: 0 6px 16px rgba(15,10,40,.08) !important;
}

/* =========================================================
   2. MOBILE HEADER — cleaner violet, soft glass buttons
   ========================================================= */
.strides-mobile-header{
  background: linear-gradient(135deg,#7c3aed 0%,#6d28d9 55%,#5b21b6 100%) !important;
  box-shadow: 0 6px 22px rgba(91,33,182,.28) !important;
}
.mob-btn, .mob-cart{
  width: 42px !important; height: 42px !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
.mob-btn i, .mob-cart i{ color:#fff !important; font-size: 17px !important; }
.mob-cart .cart-count{ background: var(--cr-amber) !important; color:#3a2500 !important; font-weight: 800 !important; }
.mob-logo img{ max-height: 38px !important; }

/* nav chips */
.mob-chips a{
  background: #f4f2fb !important;
  border: 1px solid rgba(109,40,217,.12) !important;
  color: #4a3a6b !important;
  font-weight: 600 !important;
}
.mob-chips a:hover, .mob-chips a.active{
  background: linear-gradient(135deg,var(--cr-violet-2),var(--cr-violet)) !important;
  color:#fff !important;
}

/* =========================================================
   3. FLOATING BOTTOM DOCK — detached, 1px border, smaller icons
   ========================================================= */
@media (max-width: 575.98px){ body{ padding-bottom: 94px !important; } }
.footer-nav{
  left: 12px !important; right: 12px !important; bottom: 12px !important;
  width: auto !important;
  height: 60px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(20,18,32,.92) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 14px 34px rgba(10,6,24,.45) !important;
  overflow: visible !important;
}
.footer-nav::before{ display: none !important; }
.footer-nav-bg{ display: none !important; }
.m-nav-main{ grid-template-columns: 1fr 1fr 72px 1fr 1fr !important; padding: 0 4px !important; }

/* same icons, smaller */
.footer-nav .footerBtn .icon-wrap{ width: 26px !important; height: 26px !important; border-radius: 9px !important; }
.footer-nav .footerBtn i{ font-size: 13px !important; color: #e9e6f5 !important; opacity: .85 !important; }
.footer-nav .footerBtn span{ font-size: 8.5px !important; letter-spacing: .2px !important; color: #e9e6f5 !important; opacity: .85 !important; }
.footer-nav .footerBtn:hover i, .footer-nav .footerBtn.active-nav i{ color: var(--cr-amber) !important; opacity: 1 !important; }
.footer-nav .footerBtn:hover span, .footer-nav .footerBtn.active-nav span{ color: #fff !important; opacity: 1 !important; }

/* raised HOME fab — smaller, 1px ring */
.footer-nav .fab-btn{
  width: 50px !important; height: 50px !important;
  bottom: 20px !important;
  font-size: 18px !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  box-shadow: 0 8px 20px rgba(109,40,217,.5), 0 3px 8px rgba(0,0,0,.25) !important;
}
.footer-nav .fab-label{ bottom: 4px !important; font-size: 8.5px !important; }

/* =========================================================
   4. HOMEPAGE POLISH
   ========================================================= */
.tn-section-head{ margin-bottom: 20px !important; }
.tn-cat-thumb{
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(109,40,217,.14) !important;
  box-shadow: 0 8px 20px rgba(91,33,182,.10) !important;
  transition: transform .3s ease, box-shadow .3s ease !important;
}
.tn-cat-thumb img{ width: 100% !important; height: 100% !important; object-fit: cover !important; }
.tn-cat-card:hover .tn-cat-thumb{ transform: translateY(-3px) !important; box-shadow: 0 14px 28px rgba(91,33,182,.18) !important; }
.tn-stat{
  border: 1px solid rgba(109,40,217,.14) !important;
  border-radius: 14px !important;
  background: #faf8ff !important;
}
.tn-stat b{ color: var(--cr-violet) !important; }
.tn-hero-tag{
  border: 1px solid rgba(109,40,217,.22) !important;
  background: #f5f1ff !important;
}

/* product card images: show the WHOLE photo (contain), never crop/cut */
.tn-card-media{ padding: 0 !important; background: #ffffff !important; }
.tn-card-media img{ object-fit: contain !important; padding: 8px !important; background: #ffffff !important; }
.tn-card:not([data-is-out="1"]) .tn-card-media img{ filter: none !important; }  /* drop cutout shadow; keep OOS greyscale */

/* homepage mobile: hide quick-links + nav chips (replaced by the top slider) */
.is-home .mob-quick, .is-home .mob-chips{ display: none !important; }
/* top banner slider spacing */
.tn-slider-top{ padding-top: 10px !important; }

/* =========================================================
   5. HERO (section after the slider) — violet banner card
   ========================================================= */
.tn-hero{ display: block !important; min-height: auto !important; padding: 16px 0 20px !important; }
.tn-hero-bg{ display: none !important; }             /* drop old bg effects */
.tn-hero-visual{ display: none !important; }
.tn-hero-grid{
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 0 !important;
}
.tn-hero-grid > div:first-child{
  max-width: 100%; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(145deg, #7c3aed 0%, #6d28d9 52%, #5b21b6 100%) !important;
  border-radius: 24px !important;
  padding: 34px 24px 30px !important;
  box-shadow: 0 22px 50px rgba(76,29,149,.35) !important;
  position: relative; overflow: hidden;
}
.tn-hero-tag{
  margin: 0 auto 10px !important;
  background: rgba(255,255,255,.16) !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  color: #fff !important;
}
.tn-hero-tag i{ background: var(--cr-amber) !important; box-shadow: 0 0 10px var(--cr-amber) !important; }
.tn-hero h1{ color: #fff !important; margin-top: 4px !important; }
.tn-hero h1 .hl{
  background: linear-gradient(100deg, #fde68a, #f59e0b) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.tn-hero .lead{ color: rgba(255,255,255,.9) !important; margin: 16px auto 0 !important; max-width: 640px; }
.tn-hero-actions{ justify-content: center !important; margin-top: 24px !important; }
.tn-hero-actions .tn-btn-primary{ background: #fff !important; color: var(--cr-violet) !important; border: none !important; }
.tn-hero-actions .tn-btn-ghost{ background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important; }
.tn-stats{ width: 100%; max-width: 600px; margin: 22px auto 0 !important; }
.tn-stat{ background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 14px !important; }
.tn-stat b{ color: #fff !important; }
.tn-stat span{ color: rgba(255,255,255,.78) !important; }

/* =========================================================
   6. LOGO FALLBACK — store name as text when no logo image
   ========================================================= */
.brand-fallback{ font-weight: 800; font-size: 20px; letter-spacing: .2px; white-space: nowrap; line-height: 1; }
.mob-logo .brand-fallback{ color: #fff; }
.tnh-brand .brand-fallback{ color: var(--cr-violet); font-size: 22px; }
.pmm-logo .brand-fallback{ color: var(--cr-violet); }

/* =========================================================
   7. POPULAR CATEGORIES — overlay image cards (redesign)
   Image fills the card; category name overlaid at the bottom.
   ========================================================= */
.tn-cat-card{
  padding: 0 !important;
  border: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  background: #0e0e14 !important;
  box-shadow: 0 10px 24px rgba(91,33,182,.14) !important;
  aspect-ratio: 4 / 5;
}
.tn-cat-card::before{ display: none !important; }      /* kill old radial hover tint */
.tn-cat-thumb{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  background: #0e0e14 !important;
  box-shadow: none !important;
}
.tn-cat-thumb img{
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  transition: transform .5s ease !important;
}
.tn-cat-card::after{
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,6,16,.88) 0%, rgba(8,6,16,.28) 44%, transparent 72%);
}
.tn-cat-card h4{
  position: absolute !important;
  left: 12px !important; right: 12px !important; bottom: 11px !important;
  z-index: 2 !important;
  color: #fff !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  text-align: left !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,.6) !important;
}
.tn-cat-card:hover{ transform: translateY(-5px) !important; box-shadow: 0 18px 34px rgba(91,33,182,.30) !important; }
.tn-cat-card:hover .tn-cat-thumb{ transform: none !important; }   /* cancel old thumb lift */
.tn-cat-card:hover .tn-cat-thumb img{ transform: scale(1.08) !important; }

/* mobile swipe row: wider overlay cards */
@media (max-width: 767px){
  .tn-cat-card{ width: 150px !important; height: 182px !important; aspect-ratio: auto !important; padding: 0 !important; gap: 0 !important; }
  .tn-cat-thumb{ width: 100% !important; height: 100% !important; }
  .tn-cat-card h4{ font-size: 13px !important; }
}

/* =========================================================
   8. COLLECTION PANELS (Top Collection / Editor's Pick) — image redesign
   ========================================================= */
.tn-collection{
  border: 1px solid rgba(255,255,255,.08) !important;
  min-height: 230px !important;
}
.tn-collection-img{
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  transition: transform .6s ease !important;
}
.tn-collection:hover .tn-collection-img{ transform: scale(1.06) !important; }
.tn-collection::after{
  content: '' !important; position: absolute !important; inset: 0 !important; z-index: 1 !important;
  background: linear-gradient(to top, rgba(76,29,149,.94) 0%, rgba(40,15,80,.70) 42%, rgba(12,8,22,.30) 100%) !important;
}
.tn-collection-shape{ display: none !important; }
.tn-collection-content{ position: relative !important; z-index: 2 !important; }
.tn-collection-tag{ color: #fff !important; opacity: .92; }
.tn-collection h3{ color: #fff !important; }
.tn-collection p{ color: rgba(255,255,255,.85) !important; }
.tn-collection .tn-btn{
  background: #fff !important;
  color: var(--cr-violet) !important;
  border: none !important;
  font-weight: 700 !important;
}
.tn-collection:hover{ box-shadow: 0 18px 36px rgba(91,33,182,.32) !important; }

/* =========================================================
   9. PRODUCT CARDS — refreshed design
   ========================================================= */
.tn-card{
  background: #ffffff !important;
  border: 1px solid rgba(109,40,217,.12) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(91,33,182,.08) !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease !important;
}
.tn-card:hover{
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(91,33,182,.18) !important;
  border-color: rgba(124,58,237,.35) !important;
}
.tn-card-body{ padding: 13px 13px 15px !important; }
/* category as a violet pill */
.tn-card-cat{
  display: inline-block !important;
  align-self: flex-start !important;
  background: #f3efff !important;
  color: var(--cr-violet) !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
  font-size: 9.5px !important;
  letter-spacing: .07em !important;
  margin-bottom: 2px !important;
}
.tn-card-name{ font-weight: 700 !important; }
/* price: violet + bold */
.tn-price-now{ color: var(--cr-violet) !important; font-size: 19px !important; }
/* buttons: rounded, on-brand */
.tn-card-actions{ gap: 8px !important; padding-top: 12px !important; }
.tn-btn-cart{
  background: #f3efff !important;
  border: 1px solid rgba(124,58,237,.25) !important;
  color: var(--cr-violet) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}
.tn-btn-cart:hover{ background: #e9e1ff !important; border-color: var(--cr-violet) !important; color: var(--cr-violet) !important; }
.tn-card-actions .tn-btn-primary{ border-radius: 12px !important; }

/* =========================================================
   10. FOOTER — simplified / flat
   ========================================================= */
body .footer-modern{ background: #15111f !important; } /* flat dark, no busy gradient (beats inline !important) */
body .footer-modern::before{ display: none !important; } /* remove animated shimmer bar */
.footer-main-area{ padding: 34px 0 12px !important; }
.footer-col-title::before, .footer-col-title::after{ display: none !important; }  /* remove accent bars */
.footer-col-title{ font-size: .95rem !important; }
.stay-connected-block{ display: none !important; }      /* drop the lone "Cash on Delivery" chip block */
.sc-tagline{ max-width: 540px; }
.footer-copy-row{ border-top: 1px solid rgba(255,255,255,.08) !important; background: transparent !important; }
/* centered & balanced so there's no empty side / detached copyright */
.footer-main-area .footer-col{ flex: 0 0 100% !important; max-width: 100% !important; text-align: center !important; margin-bottom: 4px !important; }
.footer-col-title{ justify-content: center !important; margin-bottom: 10px !important; }
.footer-brand-block .sc-tagline{ margin: 0 auto 6px !important; }
.footer-social-list{ justify-content: center !important; }
.footer-link-list{ display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px 18px !important; padding: 0 !important; }
.footer-copy-inner{ text-align: center !important; }

/* =========================================================
   11. FLOATING BUTTONS — scroll-top off; cart pill shows ৳ total
   ========================================================= */
.premium-scroll-top{ display: none !important; }
.premium-fab-cart{
  width: auto !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  padding: 0 16px 0 14px !important;
  gap: 7px !important;
}
.premium-fab-cart .pfab-ring{ display: none !important; }
.premium-fab-cart .cart-count{ display: none !important; }   /* ৳ total replaces the item count */
.premium-fab-cart .pfab-cart-amt{
  color: #fff !important; font-weight: 800 !important; font-size: 14px !important;
  white-space: nowrap !important; line-height: 1 !important;
}
@media (max-width: 768px){
  .premium-fab-cart{ padding: 0 13px 0 12px !important; }
  .premium-fab-cart .pfab-cart-amt{ font-size: 12.5px !important; }
}