:root{
  --primary:#D62828;
  --primary-dark:#B31E1E;
  --secondary:#1F2937;
  --accent:#F59E0B;
  --bg:#F8FAFC;
  --card:#FFFFFF;
  --radius:14px;
  --shadow:0 4px 20px rgba(31,41,55,.06);
  --shadow-lg:0 12px 32px rgba(31,41,55,.10);
  font-size:16px;
}
*{box-sizing:border-box}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--secondary);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.font-display{font-family:'Poppins',sans-serif;font-weight:700;color:var(--secondary);}
a{text-decoration:none;color:inherit}
.container{max-width:1280px}
img{max-width:100%;display:block}

/* ---------- Buttons ---------- */
.btn-primary-custom{
  background:var(--primary); color:#fff; border:none; border-radius:10px;
  padding:.65rem 1.4rem; font-weight:600; transition:.2s;
}
.btn-primary-custom:hover{background:var(--primary-dark); color:#fff;}
.btn-outline-custom{
  background:#fff; color:var(--secondary); border:1.5px solid #E5E7EB; border-radius:10px;
  padding:.6rem 1.3rem; font-weight:600; transition:.2s;
}
.btn-outline-custom:hover{border-color:var(--primary); color:var(--primary);}
.btn-accent{background:var(--accent); color:#1F2937; border:none; border-radius:10px; font-weight:700;}
.text-danger-custom{color:var(--primary) !important; font-weight:600;}
.text-primary-custom{color:var(--primary) !important;}

/* ---------- Top bar / Header ---------- */
.announce-bar{background:var(--secondary); color:#cbd5e1; font-size:.82rem; padding:6px 0;}
.announce-bar a{color:#fff}
.site-header{background:#fff; box-shadow:var(--shadow); position:sticky; top:0; z-index:1000;}
.header-row{display:flex; align-items:center; gap:24px; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; white-space:nowrap;}
.brand-mark{
  width:42px; height:42px; border-radius:10px; background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:'Poppins'; font-weight:800; font-size:20px;
}
.brand-text{font-family:'Poppins'; font-weight:800; font-size:1.2rem; color:var(--secondary); line-height:1;}
.brand-text small{display:block; font-family:'Inter'; font-weight:500; font-size:.62rem; color:#94a3b8; letter-spacing:.04em;}

.header-search{flex:1; position:relative; max-width:520px; margin:0 auto;}
.header-search input{
  width:100%; border:1.5px solid #E5E7EB; border-radius:10px; padding:.6rem 3rem .6rem 1rem;
  background:#F8FAFC; font-size:.92rem;
}
.header-search input:focus{outline:none; border-color:var(--primary); background:#fff;}
.header-search button{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:var(--primary); color:#fff; border:none; width:34px; height:34px; border-radius:8px;
}
.search-suggest{
  position:absolute; top:110%; left:0; right:0; background:#fff; border-radius:10px; box-shadow:var(--shadow-lg);
  z-index:1200; display:none; max-height:360px; overflow:auto;
}
.search-suggest.show{display:block}
.search-suggest a{display:flex; gap:10px; align-items:center; padding:8px 12px; color:var(--secondary); font-size:.88rem;}
.search-suggest a:hover{background:#F8FAFC}
.search-suggest img{width:36px; height:36px; object-fit:cover; border-radius:6px; background:#F1F5F9;}

.header-actions{display:flex; align-items:center; gap:6px;}
.icon-btn{
  position:relative; width:42px; height:42px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  color:var(--secondary); font-size:1.15rem; border:none; background:transparent; cursor:pointer;
}
.icon-btn:hover{background:#F1F5F9}
.badge-dot{
  position:absolute; top:2px; right:2px; background:var(--primary); color:#fff; font-size:.62rem; font-weight:700;
  min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 3px;
}
.dropdown-toggle-custom{cursor:pointer}
.account-menu{border-radius:12px; box-shadow:var(--shadow-lg); border:none; padding:6px;}
.account-menu .dropdown-item{border-radius:8px; padding:.5rem .8rem; font-size:.9rem;}

/* ---------- Main nav / mega menu ---------- */
.main-nav{background:var(--secondary);}
.nav-list{display:flex; gap:6px; list-style:none; margin:0; padding:0;}
.nav-list > li > a{display:block; padding:12px 16px; color:#e2e8f0; font-weight:600; font-size:.9rem;}
.nav-list > li > a:hover{color:#fff; background:rgba(255,255,255,.06);}
.mega-menu{
  border:none; border-radius:14px; box-shadow:var(--shadow-lg); padding:20px; min-width:640px;
}
.mega-link{display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:8px; font-size:.88rem; color:var(--secondary);}
.mega-link:hover{background:#FFF1F1; color:var(--primary);}
.mega-promo{background:#FFF7ED; border-radius:12px; padding:16px; height:100%;}

/* ---------- Mobile menu ---------- */
.mobile-menu{position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:2000; display:none;}
.mobile-menu.show{display:block}
.mobile-menu-inner{background:#fff; width:82%; max-width:340px; height:100%; padding:16px 20px; overflow:auto;}
.mobile-nav a{display:block; padding:12px 0; border-bottom:1px solid #F1F5F9; font-weight:600;}

/* ---------- Hero / Banners ---------- */
.hero-slider{border-radius:20px; overflow:hidden; position:relative; box-shadow:var(--shadow-lg);}
.hero-slide{
  position:relative; display:flex; align-items:center; justify-content:flex-start;
  background-image:var(--bg-desktop); background-size:cover; background-position:center;
  aspect-ratio:21/7; min-height:280px; max-height:460px;
}
.hero-slide::after{content:'';position:absolute; inset:0; background:rgba(17,24,39,var(--overlay-opacity,.45));}
.hero-slide .hero-content{position:relative; z-index:2; padding:40px; max-width:520px;}
.hero-slide .hero-content h1{font-size:2.1rem; margin-bottom:10px;}
.hero-slide .hero-content p{margin-bottom:20px; opacity:.92;}
/* 9-way content position control (set by the admin Banner Manager) */
.hero-slide.pos-top-left{align-items:flex-start; justify-content:flex-start;}
.hero-slide.pos-top-center{align-items:flex-start; justify-content:center;}
.hero-slide.pos-top-center .hero-content{text-align:center;}
.hero-slide.pos-top-right{align-items:flex-start; justify-content:flex-end;}
.hero-slide.pos-center-left{align-items:center; justify-content:flex-start;}
.hero-slide.pos-center{align-items:center; justify-content:center;}
.hero-slide.pos-center .hero-content{text-align:center;}
.hero-slide.pos-center-right{align-items:center; justify-content:flex-end;}
.hero-slide.pos-bottom-left{align-items:flex-end; justify-content:flex-start;}
.hero-slide.pos-bottom-center{align-items:flex-end; justify-content:center;}
.hero-slide.pos-bottom-center .hero-content{text-align:center;}
.hero-slide.pos-bottom-right{align-items:flex-end; justify-content:flex-end;}
.promo-banner{border-radius:16px; overflow:hidden; position:relative; min-height:160px; display:flex; align-items:center; background-size:cover; background-position:center; box-shadow:var(--shadow);}
.promo-banner::after{content:'';position:absolute; inset:0; background:linear-gradient(90deg, rgba(31,41,55,.75), rgba(31,41,55,.1));}
.promo-banner .promo-content{position:relative; z-index:2; color:#fff; padding:24px;}
.promo-banner .promo-content h5{color:#fff; margin-bottom:4px;}

/* ---------- Section headings ---------- */
.section{padding:48px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px;}
.section-head .eyebrow{color:var(--primary); font-weight:700; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;}
.section-head h2{margin:2px 0 0; font-size:1.65rem;}
.view-all{font-weight:600; color:var(--secondary); font-size:.88rem; display:flex; align-items:center; gap:6px;}
.view-all:hover{color:var(--primary)}

/* ---------- Category tiles ---------- */
.cat-tile{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; text-align:center;
  transition:.2s; height:100%;
}
.cat-tile:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg);}
.cat-tile img{width:64px; height:64px; object-fit:contain; margin:0 auto 10px; border-radius:10px; background:#F8FAFC;}
.cat-tile span{font-weight:600; font-size:.88rem;}

/* ---------- Product cards ---------- */
.product-card{
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; height:100%;
  display:flex; flex-direction:column; transition:.2s; position:relative;
}
.product-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-3px);}
.product-thumb{position:relative; aspect-ratio:1/1; background:#F8FAFC; overflow:hidden;}
.product-thumb img{width:100%; height:100%; object-fit:cover; transition:.25s;}
.product-card:hover .product-thumb img{transform:scale(1.04);}
.product-badges{position:absolute; top:10px; left:10px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; z-index:2;}
.pbadge{font-size:.66rem; font-weight:700; padding:4px 10px; border-radius:20px; color:#fff; line-height:1.2; box-shadow:0 2px 6px rgba(0,0,0,.12);}
.pbadge.new{background:var(--secondary)}
.pbadge.sale{background:var(--primary)}
.pbadge.featured{background:var(--accent); color:#1F2937}
.product-quick{position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:6px; z-index:2; opacity:0; transform:translateX(6px); transition:.2s;}
.product-card:hover .product-quick{opacity:1; transform:translateX(0);}
.product-quick a{
  width:34px; height:34px; border-radius:50%; background:#fff; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
  color:var(--secondary); font-size:.95rem;
}
.product-quick a:hover{background:var(--primary); color:#fff;}
.product-quick a.active{background:var(--primary); color:#fff;}
.product-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:5px; flex:1;}
.product-cat{font-size:.7rem; color:#94a3b8; text-transform:uppercase; font-weight:700; letter-spacing:.03em;}
.product-title{font-size:.92rem; font-weight:600; color:var(--secondary); line-height:1.35; min-height:2.5em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.product-title:hover{color:var(--primary)}
.product-rating{color:var(--accent); font-size:.78rem; display:flex; align-items:center; gap:4px;}
.product-price{margin-top:auto; padding-top:4px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.product-price .now{font-family:'Poppins'; font-weight:700; color:var(--primary); font-size:1.1rem; letter-spacing:-.01em;}
.product-price .old{text-decoration:line-through; color:#94a3b8; font-size:.82rem;}
.product-stock{font-size:.75rem; font-weight:600; display:flex; align-items:center; gap:5px; margin:2px 0 2px;}
.product-stock.in{color:#16a34a}
.product-stock.out{color:#94a3b8}
.add-cart-btn{
  width:100%; background:var(--secondary); color:#fff; border:none; border-radius:8px; padding:.6rem; font-weight:600; font-size:.85rem;
  margin-top:6px; transition:.2s;
}
.add-cart-btn:hover{background:var(--primary)}
.add-cart-btn:disabled{background:#CBD5E1; cursor:not-allowed}

/* ---------- Brand strip ---------- */
.brand-tile{background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:20px; display:flex; align-items:center; justify-content:center; height:90px;}
.brand-tile img{max-height:44px; object-fit:contain; filter:grayscale(1); opacity:.75; transition:.2s;}
.brand-tile:hover img{filter:none; opacity:1;}

/* ---------- Trust items ---------- */
.trust-item{text-align:center; padding:20px;}
.trust-item i{font-size:2rem; color:var(--primary); margin-bottom:10px;}

/* ---------- Track Order CTA ---------- */
.track-order-cta{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:24px 28px;}
.track-order-cta h4{margin:0;}
.track-order-cta i{color:var(--primary);}

/* ---------- Reviews ---------- */
.review-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;}
.review-stars{color:var(--accent)}

/* ---------- Blog ---------- */
.blog-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; height:100%;}
.blog-card img{aspect-ratio:16/10; object-fit:cover;}
.blog-card .blog-body{padding:16px;}
.blog-meta{font-size:.75rem; color:#94a3b8; text-transform:uppercase; font-weight:700; letter-spacing:.03em;}

/* ---------- Filters / sidebar ---------- */
.filter-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;}
.filter-card h6{font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; margin-bottom:10px;}
.filter-check{display:flex; align-items:center; gap:8px; padding:5px 0; font-size:.88rem;}

.filter-accordion{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;}
.filter-accordion .accordion-item{border:none; border-bottom:1px solid #F1F5F9;}
.filter-accordion .accordion-item:last-child{border-bottom:none;}
.filter-accordion .accordion-button{
  font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; color:var(--secondary);
  background:#fff; padding:14px 18px; box-shadow:none;
}
.filter-accordion .accordion-button:not(.collapsed){color:var(--primary); background:#fff;}
.filter-accordion .accordion-button:focus{box-shadow:none; border-color:transparent;}
.filter-accordion .accordion-button::after{width:1rem; height:1rem; background-size:1rem;}
.filter-accordion .accordion-body{padding:6px 18px 16px; max-height:280px; overflow-y:auto;}
.filter-accordion .filter-check{padding:6px 0;}

/* ---------- Cards / generic panels ---------- */
.panel{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;}

/* ---------- Forms ---------- */
.form-control, .form-select{border-radius:10px; border:1.5px solid #E5E7EB; padding:.6rem .9rem;}
.form-control:focus, .form-select:focus{border-color:var(--primary); box-shadow:0 0 0 .2rem rgba(214,40,40,.1);}
.form-label{font-weight:600; font-size:.88rem;}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:80vh; display:flex; align-items:center; justify-content:center; padding:40px 16px;}
.auth-card{background:#fff; border-radius:20px; box-shadow:var(--shadow-lg); padding:40px; max-width:460px; width:100%;}
.role-card{border:2px solid #E5E7EB; border-radius:16px; padding:24px; text-align:center; cursor:pointer; transition:.2s; height:100%;}
.role-card:hover{border-color:var(--primary); box-shadow:var(--shadow);}
.role-card i{font-size:2.4rem; color:var(--primary); margin-bottom:10px;}

/* ---------- Steps (checkout) ---------- */
.checkout-steps{display:flex; gap:10px; margin-bottom:24px;}
.checkout-steps span{background:#fff; border-radius:20px; padding:8px 16px; font-weight:600; font-size:.85rem; box-shadow:var(--shadow); color:#94a3b8;}
.checkout-steps span.active{background:var(--primary); color:#fff;}

/* ---------- Dashboard ---------- */
.dash-sidebar{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:10px;}
.dash-sidebar a{display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:10px; font-weight:600; font-size:.9rem; color:var(--secondary);}
.dash-sidebar a.active, .dash-sidebar a:hover{background:#FFF1F1; color:var(--primary);}
.stat-card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; display:flex; align-items:center; gap:14px;}
.stat-card .ic{width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem;}
.stat-card .v{font-family:'Poppins'; font-weight:700; font-size:1.3rem;}
.stat-card .l{font-size:.8rem; color:#94a3b8;}

/* ---------- Badges / status ---------- */
.status-pill{display:inline-block; padding:4px 12px; border-radius:20px; font-size:.75rem; font-weight:700;}
.status-pending{background:#FEF3C7; color:#92400E;}
.status-confirmed{background:#DBEAFE; color:#1E40AF;}
.status-dispatched, .status-packed{background:#E0E7FF; color:#3730A3;}
.status-delivered{background:#DCFCE7; color:#166534;}
.status-cancelled, .status-returned{background:#FEE2E2; color:#991B1B;}
.status-received{background:#DCFCE7; color:#166534;}

/* ---------- Footer ---------- */
.site-footer{background:var(--secondary); color:#cbd5e1; margin-top:60px; padding-top:40px;}
.footer-newsletter{
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  background:#111827; border-radius:16px; padding:24px; margin-bottom:36px;
}
.footer-newsletter h4{color:#fff; margin-bottom:4px;}
.footer-newsletter form{min-width:320px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; padding-bottom:30px;}
.footer-grid h6{color:#fff; font-weight:700; margin-bottom:14px; font-size:.85rem; text-transform:uppercase; letter-spacing:.04em;}
.footer-grid ul{list-style:none; padding:0; margin:0;}
.footer-grid ul li{margin-bottom:9px;}
.footer-grid ul a{color:#94a3b8; font-size:.88rem;}
.footer-grid ul a:hover{color:#fff}
.social-links{display:flex; gap:10px; margin-top:14px;}
.social-links a{width:36px; height:36px; border-radius:8px; background:#374151; display:flex; align-items:center; justify-content:center; color:#fff;}
.social-links a:hover{background:var(--primary)}
.footer-bottom{border-top:1px solid #374151; padding:18px 0; display:flex; justify-content:space-between; font-size:.82rem; color:#94a3b8; flex-wrap:wrap; gap:10px;}
.payment-icons i{font-size:1.2rem; margin-left:10px;}

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar{background:#fff; padding:14px 0; border-bottom:1px solid #F1F5F9;}
.breadcrumb-bar a{color:#94a3b8;}
.breadcrumb-bar a:hover{color:var(--primary)}
.breadcrumb-bar .sep{color:#CBD5E1; margin:0 6px;}

/* ---------- Utilities ---------- */
.rounded-xl{border-radius:var(--radius) !important;}
.shadow-custom{box-shadow:var(--shadow) !important;}
.lazy{opacity:0; transition:opacity .3s;}
.lazy.loaded{opacity:1;}

/* ---------- Responsive ---------- */
@media (max-width: 991px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .header-search{display:none;}

  /* ---- Mobile header polish: smaller logo, evenly-spaced/centered icons ---- */
  .header-row{padding:10px 0; gap:10px;}
  .brand-mark{width:34px; height:34px; font-size:16px; border-radius:8px;}
  .brand img{height:32px !important;}
  .brand-text{font-size:1rem;}
  .brand-text small{font-size:.58rem;}
  .header-actions{gap:2px;}
  .icon-btn{width:38px; height:38px; font-size:1.05rem; align-items:center; justify-content:center;}


  /* ---- Mobile filter experience: sticky Filter/Sort/View toolbar ---- */
  .shop-toolbar-sticky{
    position:sticky; top:0; z-index:900; background:#fff; padding:10px 0;
    box-shadow:0 2px 10px rgba(31,41,55,.06); margin:0 -1px 16px;
  }
  /* Bootstrap's responsive offcanvas (offcanvas-lg) turns this into a real
     bottom sheet below the lg breakpoint, and a normal in-flow sidebar at lg+. */
  .filter-offcanvas{--bs-offcanvas-height:82vh; border-radius:20px 20px 0 0;}
  .filter-offcanvas .offcanvas-header{padding:14px 18px; border-bottom:1px solid #F1F5F9;}
  .filter-offcanvas .offcanvas-header .btn-close{width:.9rem; height:.9rem; padding:.6rem; background-color:#F1F5F9; border-radius:50%; opacity:1;}
  .filter-offcanvas .offcanvas-body{padding:12px 16px 90px;}
  .filter-apply-bar{
    position:fixed; left:0; right:0; bottom:0; background:#fff; padding:12px 16px;
    box-shadow:0 -4px 16px rgba(31,41,55,.08); z-index:10;
  }
}
@media (max-width: 576px){
  .footer-grid{grid-template-columns:1fr;}

  /* ---- Hero: shorter + edge-to-edge on mobile (desktop untouched) ---- */
  .hero-slider{border-radius:0; margin:0 -12px;}
  .hero-slide{aspect-ratio:16/9; min-height:170px; max-height:260px; background-image:var(--bg-mobile);}
  .hero-slide .hero-content{padding:20px;}
  .hero-slide .hero-content h1{font-size:1.3rem; margin-bottom:6px;}
  .hero-slide .hero-content p{font-size:.85rem; margin-bottom:12px;}

  .footer-newsletter{flex-direction:column; align-items:flex-start;}
  .footer-newsletter form{width:100%;}

  /* ---- Product cards: larger image area, tighter premium spacing ---- */
  .product-card{border-radius:12px;}
  .product-thumb{aspect-ratio:1/1;}
  .product-body{padding:10px 12px 12px; gap:4px;}
  .product-title{font-size:.85rem; min-height:2.3em;}
  .product-price .now{font-size:1rem;}
  .pbadge{font-size:.62rem; padding:2px 7px;}

  /* ---- Category tiles a touch more compact on small screens ---- */
  .cat-tile{padding:12px;}
  .cat-tile img{width:48px; height:48px;}
}