:root{
  --brand-color:#fd7e14;
  --brand-dark:#c1660a;
  --bs-danger: 253, 126, 20;
  --bs-danger-rgb: 253, 126, 20;
}
body{ font-family:'Segoe UI', Arial, sans-serif; background:#f8f9fa; }

/* Orange theme override: the storefront uses Bootstrap's "danger" utility classes
   (btn-danger, text-danger, bg-danger, border-danger) as its main brand/CTA color,
   so we repaint those classes orange instead of touching every template. */
.btn-danger{ --bs-btn-bg:#fd7e14; --bs-btn-border-color:#fd7e14; --bs-btn-hover-bg:#df6c0c; --bs-btn-hover-border-color:#d2650b;
  --bs-btn-active-bg:#d2650b; --bs-btn-active-border-color:#c65f0b; --bs-btn-disabled-bg:#fd7e14; --bs-btn-disabled-border-color:#fd7e14; }
.btn-outline-danger{ --bs-btn-color:#fd7e14; --bs-btn-border-color:#fd7e14; --bs-btn-hover-bg:#fd7e14; --bs-btn-hover-border-color:#fd7e14;
  --bs-btn-active-bg:#fd7e14; --bs-btn-active-border-color:#fd7e14; }
.text-danger{ color:#fd7e14 !important; }
.bg-danger{ background-color:#fd7e14 !important; }
.border-danger{ border-color:#fd7e14 !important; }
a{ color:#fd7e14; }
a:hover{ color:#c1660a; }

/* ---------- Top Navbar ---------- */
.site-navbar{ background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.08); position:sticky; top:0; z-index:1030;}
.site-navbar .navbar-brand{ font-weight:700; color:var(--brand-color)!important; }
.site-navbar .form-control{ border-radius:20px 0 0 20px; }
.site-navbar .btn-search{ border-radius:0 20px 20px 0; }
.icon-badge{ position:relative; }
.icon-badge .badge{ position:absolute; top:-6px; right:-10px; font-size:.6rem; }

/* ---------- Sidebar (customer) ---------- */
.customer-sidebar{ background:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.08); padding:1rem; }
.customer-sidebar a{ display:block; padding:.5rem .25rem; color:#333; text-decoration:none; border-bottom:1px solid #f1f1f1; }
.customer-sidebar a:hover{ color:var(--brand-color); }

/* ---------- Banner Slider ---------- */
.banner-slide img{ width:100%; height:380px; object-fit:cover; border-radius:8px; }
@media(max-width:768px){ .banner-slide img{ height:180px; } }

/* ---------- Product Card ---------- */
.product-card{ background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.08); transition:.2s; height:100%; }
.product-card:hover{ box-shadow:0 6px 16px rgba(0,0,0,.15); transform:translateY(-2px); }
.product-card img{ width:100%; height:200px; object-fit:cover; }
.discount-badge{ position:absolute; top:8px; left:8px; background:var(--brand-color); color:#fff; padding:2px 8px; border-radius:12px; font-size:.75rem; }
.price-strike{ text-decoration:line-through; color:#999; font-size:.85rem; }
.price-final{ color:var(--brand-color); font-weight:700; }

/* ---------- Product Detail Slider ---------- */
.pd-thumb{ width:70px; height:70px; object-fit:cover; border:2px solid transparent; cursor:pointer; border-radius:6px; }
.pd-thumb.active{ border-color:var(--brand-color); }
.pd-main-image{ width:100%; height:420px; object-fit:contain; background:#fff; border-radius:8px; }

/* ---------- Infinite Scroll Loader ---------- */
.scroll-loader{ text-align:center; padding:20px; display:none; }

/* ---------- Cart / Wishlist ---------- */
.cart-item-row img, .wishlist-item img{ width:80px; height:80px; object-fit:cover; border-radius:6px; }

/* ---------- Whatsapp Float ---------- */
.whatsapp-float{ position:fixed; bottom:24px; right:24px; background:#25D366; color:#fff; border-radius:50%; width:56px; height:56px; display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow:0 2px 10px rgba(0,0,0,.3); z-index:1050; }

/* ---------- Track Order ---------- */
.tracker{ display:flex; justify-content:space-between; margin:30px 0; }
.tracker .step{ flex:1; text-align:center; position:relative; }
.tracker .step .dot{ width:24px; height:24px; border-radius:50%; background:#ccc; margin:0 auto 6px; }
.tracker .step.done .dot{ background:var(--brand-color); }
.tracker .step:not(:last-child):after{ content:''; position:absolute; top:12px; left:60%; width:80%; height:3px; background:#ccc; }
.tracker .step.done:not(:last-child):after{ background:var(--brand-color); }

footer.site-footer{ background:#212529; color:#ccc; padding:40px 0 20px; margin-top:40px; }
footer.site-footer a{ color:#ccc; }

/* ---------- Generic horizontal slider (Category / Brand / Trending / Coming Soon) ---------- */
.hslider-wrap{ position:relative; }
.hslider{
  display:flex; gap:16px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory;
  padding:4px 2px 12px; -ms-overflow-style:none; scrollbar-width:none;
}
.hslider::-webkit-scrollbar{ display:none; }
.hslider > *{ flex:0 0 auto; scroll-snap-align:start; }
.hslider-nav{
  position:absolute; top:40%; transform:translateY(-50%); z-index:5; border:none; border-radius:50%;
  width:38px; height:38px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.2); color:var(--brand-color);
  display:flex; align-items:center; justify-content:center;
}
.hslider-nav.prev{ left:-6px; }
.hslider-nav.next{ right:-6px; }
@media(max-width:576px){ .hslider-nav{ display:none; } }

.brand-slide{ width:130px; text-align:center; background:#fff; border-radius:10px; padding:14px 10px; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.brand-slide img{ width:100%; height:60px; object-fit:contain; }
.brand-slide .name{ font-size:.8rem; margin-top:6px; font-weight:600; }

.category-slide{ width:150px; text-align:center; }
.category-slide .product-card{ height:100%; }
.category-slide img{ height:100px; object-fit:contain; }

.slider-product-card{ width:190px; }
@media(max-width:576px){ .slider-product-card{ width:150px; } }