*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f6f7fb;color:#15171c}
button,input,select,textarea{font:inherit}.topbar{position:sticky;top:0;z-index:10;background:#111827;color:white;padding:16px 5%;display:flex;align-items:center;justify-content:space-  
 between;gap:20px;flex-wrap:wrap}
.brand{font-size:28px;font-weight:900;letter-spacing:2px}.topbar nav{display:flex;gap:8px;flex-wrap:wrap}.topbar button{border:0;background:transparent;color:white;padding:10px a12px;border-radius:10px;cursor:pointer}.topbar button:hover{background:#253047}
.wrap{max-width:1180px;margin:auto;padding:34px 5% 60px}.view{display:none}.view.active{display:block}.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;min-height:470px}
.hero h1{font-size:clamp(40px,7vw,76px);line-height:.98;margin:8px 0 18px}.hero p{font-size:18px;max-width:650px;color:#555b66}.eyebrow{font-weight:800;letter-spacing:2px;color:#8a5a00}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.primary,.secondary{padding:13px 18px;border-radius:12px;border:0;cursor:pointer;font-weight:800}.primary{background:#111827;color:white}.secondary{background:#f3b61f;color:#111827}
.hero-card{background:#f3b61f;border-radius:28px;padding:28px}.mock-phone{background:#111827;color:#fff;border-radius:30px;padding:28px;min-height:330px}.screen-title{font-weight:800;margin-bottom:24px}.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.mini-grid div{background:#fff;color:#111827;border-radius:18px;padding:26px;text-align:center;font-size:32px}.mini-grid span{display:block;font-size:14px;margin-top:10px}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.features article,.panel,.checkout-card,.stats div{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:22px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px}.section-head h2,.panel h2{font-size:36px;margin:4px 0}.section-head input{padding:13px 14px;border:1px solid #d1d5db;border-radius:12px;min-width:250px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden}.card img,.placeholder{width:100%;height:210px;object-fit:cover;background:#eef0f4;display:flex;align-items:center;justify-content:center;font-size:54px}
.card-body{padding:16px}.card h3{margin:4px 0 8px}.price{font-size:22px;font-weight:900}.category{font-size:12px;text-transform:uppercase;color:#777}.card .primary{width:100%;margin-top:12px}
.panel{max-width:720px;margin:auto}.panel form{display:grid;gap:14px;margin-top:22px}.panel label{display:grid;gap:7px;font-weight:700}.panel input,.panel select,.panel textarea{padding:12px;border:1px solid #cfd4dc;border-radius:10px}.muted{color:#6b7280}.small{font-size:13px}.message{margin-top:14px;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}.stats strong{display:block;font-size:28px}.stats span{color:#6b7280}
.cart-row{background:white;border:1px solid #e5e7eb;border-radius:14px;padding:16px;display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:10px}.cart-row button{border:0;background:#f1f3f5;padding:8px 10px;border-radius:9px;cursor:pointer}
.checkout-card{max-width:520px;margin:20px 0 0 auto}.checkout-card>div{display:flex;justify-content:space-between;padding:8px 0}.checkout-card .total{border-top:1px solid #ddd;margin-top:8px;padding-top:14px;font-size:20px}.checkout-card .primary{width:100%;margin-top:12px}
footer{text-align:center;padding:28px;color:#6b7280}
@media(max-width:800px){.hero{grid-template-columns:1fr}.features,.product-grid,.stats{grid-template-columns:1fr}.hero{min-height:auto}.topbar{align-items:flex-start}.topbar nav{width:100%}.topbar button{padding:9px 8px}.hero h1{font-size:48px}}
/* JEXALI SHOP MODERN STYLE */ #shop .section-head{ background:#fff; padding:28px; border-radius:18px; margin-bottom:28px; box-shadow:0 8px 30px rgba(15,23,42,.08); } #shop .section-head h2{ margin:4px 0 6px; font-size:34px; } .shop-subtitle{ margin:0; color :#6b7280; font-size:15px; } #shop #searchInput{ min-width:280px; padding: 14px 18px; border:1px solid #dfe3ea; border-radius: 12px; background:#f9fafb; font-size:15px; outline:none; }
/* MODERN PRODUCT CARDS */ #shop .product-grid{ gap:24px } #shop .card{ border:0; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 6px 24px rgba(15,23,42,.08); transition:transform .2s ease, box-shadow .2s ease; } #shop .card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(15,23,42,.12); } #shop .card img, #shop .placeholder{ height:260px; object-fit:cover; } #shop .card-body{ padding:20px; } #shop .card h3{ font-size:19px; margin:6px 0 10px; } #shop .price{ font-size:24px; font-weight:900; }
/* MODERN SELLER DASHBOARD */ #dashboard .section-head{ background:#fff; padding:26px 28px; border-radius:18px; box-shadow:0 8px 30px rgba(15,23,42,.08); margin-bottom:24px; } #dashboard .stats{ grid-template-columns:repeat(4,1fr); gap:18px; } #dashboard .stats div{ padding:24px; border:0; box-shadow:0 6px 22px rgba(15,23,42,.07); } #dashboard .stats strong{ font-size:30px; margin-bottom:8px; } #dashboard .stats span{ font-size:14px; font-weight:600; } #dashboard #connectStripeBtn{ padding:13px 20px; border-radius:12px; }
/* MODERN ACCOUNT SECTION */ #accountSection{ max-width:720px; margin:32px auto 0; padding:28px; background:#fff; border-radius:18px; box-shadow:0 8px 30px rgba(15,23,42,.08); } #accountSection h2{ margin:0 0 16px; font-size:24px; } #accountSection input, #accountSection select{ width:100%; padding:12px 14px; margin-bottom:12px; border:1px solid #d1d5db; border-radius:10px; background:#f9fafb; } #accountSection button{ padding:12px 18px; margin:4px 8px 18px 0; border:0; border-radius:10px; background:#111827; color:#fff; font-weight:700; cursor:pointer; } #accountMessage{ font-weight:600; }
#accountSection{margin-top:50px;}
/* Seller Dashboard stats */ #dashboard .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:24px 0; } #dashboard .stats div{ background:#fff; border:1px solid #e9edf3; border-radius:18px; padding:24px; min-height:110px; box-shadow:0 8px 24px rgba(15,23,42,.06); } #dashboard .stats strong{ display:block; font-size:28px; margin-bottom:8px; } #dashboard .stats span{ font-size:14px; font-weight:600; color:#667085; } @media (max-width:800px){ #dashboard .stats{ grid-template-columns:repeat(2,1fr);} }
/* Seller Dashboard product cards */ #dashboard #sellerListings{ gap:24px; } #dashboard #sellerListings .card{ border:0; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 6px 24px rgba(15,23,42,.08); transition:transform .2s ease, box-shadow .2s ease; } #dashboard #sellerListings .card:hover{ transform:translateY(-4px); box-shadow:0 12px 32px rgba(15,23,42,.12); } #dashboard #sellerListings .card img, #dashboard #sellerListings .placeholder{ height:240px; object-fit:cover; } #dashboard #sellerListings .card-body{ padding:20px; } #dashboard #sellerListings .price{ font-size:24px; margin-top:12px; }
/* Seller Dashboard remove button */ #dashboard #sellerListings .remove-product{ margin-top:14px; padding:11px 16px; border:1px solid #fecaca; border-radius:10px; background:#fff5f5; color:#b42318; font-weight:700; cursor:pointer; transition:background .2s ease, border-color .2s ease; } #dashboard #sellerListings .remove-product:hover{ background:#fee2e2; border-color:#fca5a5; }
/* Seller Dashboard responsive layout */ @media (min-width:801px) and (max-width:1100px){ #dashboard #sellerListings{ grid-template-columns:repeat(2,1fr); } #dashboard #sellerListings .card img, #dashboard #sellerListings .placeholder{ height:220px;} } @media (max-width:800px){ #dashboard #sellerListings{ grid-template-columns:1fr; } #dashboard #sellerListings .card img, #dashboard #sellerListings .placeholder{ height:220px;} }
/* Dashboard medium screen fix */ @media (min-width:700px) and (max-width:1200px){ #dashboard #sellerListings{ grid-template-columns:repeat(2,minmax(0,1fr)); } #dashboard #sellerListings .card img, #dashboard #sellerListings .placeholder{ height:220px;} }
.hero-content{max-width:620px}
.hero-content h1{font-size:clamp(42px,5vw,62px);line-height:1.05;margin:12px 0 18px}
.hero-text{font-size:18px;line-height:1.7; color:#5b6472;max-width:560px}
.hero-card{background:#fff;border-radius:24px; padding:32px;box-shadow:0 20px 50px rgba(15,23,42,.122)}
.category-preview{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.category-preview div{background:#f6f7fb;border:1px solid #e5e7eb;border-radius:14px;padding:18px;text-align:center}
.hero-card h3{font-size:28px;line-height:1.25;margin:10px 0}
.hero-card .primary{width:100%;margin-top:4px}
.hero-visual{
background:linear-gradient(145deg,#ffffff, #f1f5f9); 
border:1px solid #e5e7eb;
border-radius:24px;  
padding:32px;
box-shadow:0 20px 50px rgba(15,23,42,.10);  
position:relative;
overflow:hidden;
}  
.visual-badge{
display:inline-block; 
padding:7px 12px;
border-radius:999px; 
background:#111827;  
color:#ffffff;
font-size:12px;
font-weight:800;
letter-spacing:.8px;  
}
.hero-visual h3{
font-size:26px;
margin:20px 0 10px;
line-height:1.15;
font-weight:800;
}
.hero-visual > p{
color:#64748b;
line-height:1.6;
}
.visual-stats{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:24px;
}
.visual-stats span{
 background:#ffffff; 
border:1px solid #e5e7eb;
border-radius:14px;
padding:14px 10px;
text-align:center;
display:flex;
flex-direction:column;
gap:4px;
}
.visual-stats small{
color:#64748b;
font-size:12px;
}
.hero{grid-template-columns:1fr 1fr;}
.hero-content{grid-row:1 / span 2;align-self:center;}
@media(max-width:800px){.hero-content{grid-row:auto;}}
.hero{row-gap:18px;}
.hero-card{grid-column:2;}
.hero-card{align-self:start;}
 @media(max-width:800px){.hero{grid-template-columns:1fr;gap:20px;padding-top:20px;}} 
@media(max-width:800px){.hero-card{grid-column:auto;}}
@media(max-width:800px){.hero-visual{width:100%;}}  
@media(max-width:500px){.visual-stats{grid-template-columns:1fr;}}  
@media(max-width:500px){.hero-content h1{font-size:40px;line-height:1.08;}}
@media(max-width:500px){.actions{display:grid;grid-template-columns:1fr 1fr;}.actions button{width:100%;}}  
@media(max-width:500px){.topbar{padding:14px 5%;gap:10px;}}  
@media(max-width:500px){.brand{font-size:24px;}}
@media(max-width:500px){.topbar nav{gap:4px;}}
@media(max-width:500px){.topbar button{padding:7px 6px;font-size:14px;}}
@media(max-width:500px){.topbar nav{display:grid;grid-template-columns:repeat(3,max-content);column-gap:18px;row-gap:6px;}}
@media(max-width:500px){.topbar nav button{white-space:nowrap;}}
.featured-products{
 margin-top:55px;
 padding-top:10px;
}
.featured-products .section-head{
 display:flex;
 justify-content:space-between;
 align-items:end;
 gap:20px;
 margin-bottom:24px;
}
.featured-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:22px;
}
 .featured-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  overflow:hidden;
  padding:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition:.2s ease;
 }
.featured-card:hover{
 transform:translateY(-5px);
 box-shadow:0 14px 30px rgba(0,0,0,.10);
}
.featured-image{
 width:100%;
 height:220px;
 border-radius:14px;
 overflow:hidden;
 background:#f3f4f6;
 margin-bottom:16px;
}
.featured-image img{
 width:100%;
 height:100%;
 object-fit:cover;
 display:block;
}
.product-category{
 display:inline-block;
 font-size:12px;
 font-weight:700;
 color:#6b7280;
 margin-bottom:8px;
}
.featured-card h3{
 margin:0 0 8px;
 font-size:18px;
}
.featured-price{
 font-size:20px;
 font-weight:800;
 margin:0 0 14px;
}
.featured-card button{
 width:100%;
 border:0;
 border-radius:10px;
 padding:11px 14px;
 background:#111827;
 color:#fff;
 font-weight:700;
 cursor:pointer;
}
@media(max-width:600px){
 .featured-grid{
  grid-template-columns:repeat(2,1fr);
 }
}
@media(max-width:600px){
 .featured-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
 }
 .featured-products .section-head{
  align-items:flex-start;
  flex-direction:column;
 }
.featured-image{
 height:85px;
 margin-bottom:8px;
}
 .featured-card{
  padding:5px;
  border-radius:14px;
 }
 .featured-card h3{
  font-size:10px;
  line-height:1.15;
  min-height:22px;
  margin-bottom:5px;
}
 .featured-price{
  font-size:11px;
  margin:3px 0 6px;
  font-weight:800;
 }
 .featured-card button{
  padding:6px 2px;
  font-size:9px;
  border-radius:8px;
  white-space:nowrap;
 }
 .product-category{
  font-size:8px;
  margin-bottom:4px;
 }
}
.featured-products .section-head button{
 border:0;
 border-radius:10px;
 padding:11px 18px;
 background:#111827;
 color:#fff;
 font-weight:700;
 cursor:pointer;
}
.shop-categories{
 margin-top:60px;
 padding-top:10px;
}
.category-heading{
 margin-bottom:24px;
}
.category-heading h2{
 font-size:36px;
 margin:6px 0 8px;
}
.category-heading p:last-child{
 color:#6b7280;
}
.category-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:22px;
}
.category-card{
 background:#fff;
 border:1px solid #e5e7eb;
 border-radius:18px;
 overflow:hidden;
 padding:14px;
 box-shadow:0 8px 24px rgba(0,0,0,.06);
 transition:.2s ease;
}
.category-card:hover{
 transform:translateY(-5px);
 box-shadow:0 14px 30px rgba(0,0,0.10);
}
.category-photo{
 width:100%;
 height:190px;
 border-radius:14px;
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
 margin-bottom:16px;
}
 .fashion-photo{
  background-image:url("image/file_00000000ad5081f589eff124adccee11.png.jpg");
}
.electronics-photo{
 background-image:url("file_00000000be6081f5a9dce75ff561d5ca.png.jpg");
}
.home-photo{
 background-image:url("file_00000000734c81f583dccdd9cde52119.png.jpg");
}
.beauty-photo{
 background-image:url("file_00000000e2c481f59194dfdeb70d79b0.png.jpg");
}
.category-card h3{
 font-size:20px;
 margin:4px 0 14px;
}
.category-card button{
 width:100%;
 border:0;
 border-radius:10px;
 padding:11px 14px;
 background:#111827;
 color:#fff;
 font-weight:700;
 cursor:pointer;
}
@media(max-width:900px){
 .category-grid{
  grid-template-columns:repeat(2, 1fr);
 }
}
@media(max-width:600px){
 .category-grid{
  grid-template-columns:repeat(2,1fr);
  gap:10px;
 }
 .category-card{
  padding:8px;
 }
 .category-photo{
  height:120px;
 }
}
/* Jexali HOMEPAGE HEADER */
.topbar{
 position:sticky;
 top:0;
 z-index:100;
 background:#111827;
 color:#fff;
 min-height:72px;
 padding:12px 5%;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:28px;
flex-wrap:nowrap;
 box-shadow:0 2px 12px
 rgba(0,0,0,.12);
}
.brand{
 font-size:27px;
font-weight:900;
 letter-spacing:3px;
 color:#f3b61f;
 white-space:nowrap;
}
.topbar .main-nav{
 display:flex;
 align-items:center;
 gap:8px;
 flex:1;
 flex-wrap:nowrap;
}
.topbar .main-nav button{
 border:0;
 background:transparent;
 color:#fff;
 padding:10px 13px;
 border-radius:8px;
 cursor:pointer;
 font-weight:600;
 white-space:nowrap;
}
.topbar .main-nav button:hover{
 background:#253047;
}
.topbar .cart-button{
 display:flex;
 align-items:center;
 gap:7px;
 border:0;
 background:#f3b61f;
 color:#111827;
 padding:11px 16px;
 border-radius:9px;
 font-weight:800;
 cursor:pointer;
 white-space:nowrap;
}
.topbar .cart-button:hover{
 background:#ffc83d;
}
.cart-icon{
 font-size:18px;
}
#cartCount{
 min-width:20px;
 height:20px;
 padding:0 5px;
 border-radius:999px;
 background:#111827;
 color:#fff;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 font-size:12px;
 font-weight:800;
}
@media(max-width:800px){
 .topbar{
  flex-wrap:wrap;
  gap:10px;
 }
 .topbar .main-nav{
  order:3;
  width:100%;
  flex-basis:100%;
  justify-content:flex-start;
  overflow-x:auto;
 }
 .topbar .cart-button{
  margin-left:auto;
 }
}
/* JEXALI HOMEPAGE HERO FINAL STYLE
*/
#home .hero{
 margin-top:18px;
 padding:55px 48px;
 border-radius:28px;
 background:linear-gradient(135deg,#ffffff 0%,#f8fafc 55%,#fff7df 100%);
 border:1px solid #e7eaf0;
 box-shadow:0 18px 50px
 rgba(15,23,42,.07);
}
#home .hero-content .eyebrow{
 color:#b77900;
 font-size:13px;
 letter-spacing:2.5px;
}
#home .hero-content h1{
 color:#111827;
 font-weight:900;
 letter-spacing:-1.5px;
}
#home .hero-content h1 span{
 color:#e89b00;
}
#home .hero-text{
 color:#667085;
 line-height:1.7;
}
#home .actions .primary{
 background:#111827;
 color:#fff;
 padding:14px 22px;
}
#home .actions .secondary{
 background:#f3b61f;
 color:#111827;
 padding:14px 22px;
}
#home .actions button{
 transition:transform .2s
 ease,box-shadow .2s ease;
}
#home .actions button:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 18px
 rgba(15,23,42,.14);
}
@media(max-width:800px){
 #home .hero{
  padding:34px 24px;
  border-radius:20px;
 }
}
/* JEXALI HERO DESKTOP LAYOUT */
@media(min-width:801px){
 #home .hero{
  grid-template-columns:1.05fr
  .95fr;
  column-gap:36px;
  row-gap:18px;
  align-items:center;
 }
#home .hero-content{
 grid-row:1 / span 2;
 align-self:center;
}
#home .hero-visual,
#home .hero-card{
 grid-column:2;
}
}
/* JEXALI HERO PRODUCT IMAGE */
.hero-image{
 grid-column:2;
 grid-row:1;
 width:100%;
 height:420px;
 border-radius:24px;
 overflow:hidden;
 box-shadow:0 20px  50px
 rgba(15,23,42,.12);
}
.hero-image img{
 width:100%;
 height:100%;
 display:block;
 object-fit:cover;
 object-position:center;
}
@media(max-width:800px){
 .hero-image{
  grid-column:auto;
  grid-row:auto;
  height:320px;
 }
}
/* JEXALI HERO PHONE - KEEP IMAGE ON RIGHT */
@media(max-width:800px){
 #home .hero{
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:24px 18px;
  align-items:center;
 }
 #home .hero-content{
  grid-column:1;
  grid-row:1;
  min-width:0;
 }
 #home .hero-image{
  grid-column:2;
  grid-row:1;
  width:100%;
  height:280px;
  min-width:0;
  border-radius:18px;
 }
 #home .hero-content h1{
  font-size:32px;
  line-height:1.05;
  letter-spacing:-1px;
 }
 #home .hero-text{
  font-size:14px;
  line-height:1.5;
 }
 #home .actions{
  gap:7px;
 }
 #home .actions button{
  padding:10px 11px;
  font-size:13px;
 }
}
/* JEXALI HOMEPAGE BENEFITS */
#home .features{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:0;
 margin-top:18px;
 background:#fff;
 border:1px solid #e5e7eb;
 border-radius:18px;
 overflow:hidden;
 box-shadow:0 10px 30px
 rgba(15,23,42,.06);
}
#home .features article{
 border:0;
 border-radius:0;
 padding:22px 16px;
 text-align:center;
}
#home .features article + article{
 border-left:1px solid #e5e7eb;
}
#home .features h3{
 margin:0 0 7px;
 font-size:16px;
}
#home .features p{
 margin:0;
 color:#667085;
 font-size:13px;
 line-height:1.4;
}
@media(max-width:800px){
 #home .features{
  grid-template-columns:repeat(4,1fr);
 }
 #home .features article{
  padding:12px 5px;
 }
  #home .features h3{
   font-size:11px;
  }
   #home .features p{
    font-size:9px;
    line-height:1.25;
   }
 }
 /* JEXALI TRENDING NOW */
#home .trending-section{
 margin-top:52px;
}
#home .trending-head{
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:20px;
 margin-bottom:22px;
}
#home .trending-badge{
 display:inline-block;
 background:#f3b61f;
 color:#111827;
 padding:7px 11px;
 border-radius:7px;
 font-size:11px;
 font-weight:900;
 letter-spacing:1px;
}
#home .trending-head h2{
 margin:10px 0 6px;
 font-size:34px;
 color:#111827;
}
#home .trending-head p{
 margin:0;
 color:#667085;
}
#home .view-all-btn{
 border:0;
 background:transparent;
 color:#0877e8;
 font-weight:800;
 cursor:pointer;
 white-space:nowrap;
}
#home .trending-grid{
 display:grid;
 grid-template-columns:repeat(5,minmax(0,1fr));
 gap:14px;
}
#home .trending-card{
 min-width:0;
}
#home .trending-photo{
 width:100%;
 height:175px;
 border-radius:16px;
 background-size:cover;
 background-position:center;
 background-repeat:no-repeat;
}
#home .trending-card h3{
 margin:10px 2px 4px;
 font-size:15px;
 color:#111827;
}
#home .trending-card p{
 margin:0 2px;
 font-size:12px;
 color:#667085;
}
#home .electronics-trending{
 background-image:url("file_00000000be6081f5a9dce75ff561d5ca.png.jpg");
}
#home .fashion-trending{
 background-image:url("image/file_00000000ad5081f589eff124adccee11.png.jpg");
}
#home .home-trending{
 background-image:url("file_00000000734c81f583dccdd9cde52119.png.jpg");
}
#home .beauty-trending{
 background-image:url("file_00000000e2c481f59194dfdeb70d79b0.png.jpg");
}
#home .accessories-trending{
 background-image:url("file_00000000edf881f5be88ec625389502d.png.jpg");
}
@media(max-width:800px){
 #home .trending-section{
  margin-top:34px;
 }
 #home .trending-grid{
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:7px;
 }
 #home .trending-photo{
  height:90px;
  border-radius:10px;
 }

#home .trending-card h3{
 font-size:9px;
 margin-top:5px;
}
#home .trending-card p{
 font-size:8px;
}
#home .view-all-btn{
 font-size:11px;
}
}
.feature-icon{
 width:52px;
 height:52px;
 margin:0 auto 12px;
 display:flex;
 align-items:center;
 justify-content:center;
}
.feature-icon svg{
 width:42px;
 height:42px;
 fill:currentColor;
}
.feature-icon svg path[fill="white"]{
 fill:white;
}
.orange-icon{
 color:#ff6b00;
}
.orange-icon{
 color:#ff6b00;
 font-size:32px;
}
.blue-icon{
 color:#1473e6;
 font-size:32px;
}
.brand-name{
 font-size:27px;
 font-weight:900;
 letter-spacing:3px;
 line-height:1;
}
.brand-name span{
 color:#f3b61f;
}
.brand-tagline{
 margin-top:4px;
 font-size:9px;
 font-weight:600;
 letter-spacing:1px;
 color:#d1d5db;
}
.brand{
 display:grid;
 grid-template-columns:64px auto;
 column-gap:9px;
 align-items:center;
}
.brand-logo{
 width:64px;
 height:64px;
 object-fit:contain;
 display:block; 
}
.brand-name,
.brand-tagline{
 grid-column:2;
}
/* JEXALI LOGO FINAL SIZE */
.brand{
 display:flex;
 align-items:center;
}
.brand-logo{
 width:220px;
 height:auto;
 object-fit:contain;
 display:block;
}
.topbar .main-nav{
 justify-content:center;
}
@media(min-width:801px){
 .topbar{
  flex-wrap:nowrap;
 }
 .topbar .main-nav{
  width:auto;
  flex-basis:auto;
  order:initial;
 }
}
/* Featured Products final heading */
.featured-heading{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 margin-bottom:22px;
}
.featured-heading h2{
 margin:0;
 font-size:32px;
 font-weight:800;
 color:#0b2948;
}
.featured-view-all{
 border:0;
 background:transparent;
 color:#0877e8;
 font-weight:700;
 font-size:16px;
 cursor:pointer;
 padding:6px 0;
}
.featured-view-all:hover{
 text-decoration:underline;
}
/* JEXALI ACCOUNT FINAL DESIGN */
#accountSection{
 max-width:1000px;
 margin:60px auto 0;
 padding:38px;
 background:linear-gradient(135deg,#ffffff,#f8fafc);
 border:1px solid #e5e7eb;
 border-radius:24px;
 box-shadow:0 14px 40px
 rgba(15,23,42,.08);
}
.account-intro{
 text-align:center;
 margin-bottom:30px;
}
#accountSection .account-intro h2{
 margin:7px 0 10px;
 font-size:36px;
 color:#0b2948;
}
.account-intro > p:last-child{
 margin:0;
 color:#667085;
}
.account-box{
 display:grid;
 grid-template-columns:1fr 1px 1fr;
 gap:30px;
 align-items:start;
}
.account-divider{
 width:1px;
 height:100%;
 background:#e5e7eb;
}
.register-box,
.login-box{
 min-width:0;
}
#accountSection .register-box h2,
#accountSection .login-box h2{
 margin:0 0 7px;
 font-size:24px;
 color:#111827;
}
.register-box > p,
.login-box > p{
 margin:0 0 20px;
 color:#667085;
}
#accountSection input,
#accountSection select{
 width:100%;
 padding:13px 14px;
 margin-bottom:13px;
 border:1px solid #d0d5dd;
 border-radius:10px;
 background:#fff;
 outline:none;
}
#accountSection input:focus,
#accountSection select:focus{
 border-color:#0877e8;
 box-shadow:0 0 0 3px
  rgba(8,119,232,.10);
}
#accountSection button{
 width:100%;
 margin:4px 0 0;
 padding:13px 18px;
 border:0;
 border-radius:10px;
 font-weight:800;
 cursor:pointer;
}
#registerBtn{
 background:#f3b61f;
 color:#111827;
}
#loginBtn{
 background:#111827;
 color:#fff;
}
#logoutBtn{
 margin-top:12px !important;
 background:#eef1f5 !important;
 color:#111827 !important;
}
#accountMessage{
 margin:12px 0 0;
 font-weight:700;
}
@media(max-width:700px){
 #accountSection{
  padding:24px 18px;
  margin-top:40px;
 }
 .account-box{
  grid-template-columns:1fr;
 }
 .account-divider{
  width:100%;
  height:1px;
 }
 #accountSection .account-intro h2{
  font-size:30px;
 }
}
/* JEXALI SELL PAGE */
#sell .panel{
 max-width:1000px;
 margin:20px auto;
 padding:36px;
 border-radius:24px;
 background:#fff;
 box-shadow:0 14px 40px
 rgba(15,23,42,.08);
}
#sell .sell-hero-text h2{
 font-size:38px;
 margin:8px 0 10px;
color:#0b2948;
}
#sell .seller-benefits{
 display:flex;
 gap:24px;
 flex-wrap:wrap;
 margin:22px 0 30px;
 font-weight:700;
 color:#374151;
 align-items:center;
}
#sell .seller-benefits i{
 width:38px;
 height:38px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 background:#fff3cd;
 color:#d99500;
 margin-right:8px;
}
#sell .sell-section-title{
 margin:0 0 20px;
 padding-top:0px;
 border-top:0;
}
#sell .sell-section-title h3{
 margin:0 0 5px;
 font-size:21px;
 color:#111827;
}
#sell .sell-section-title h3 i{
 width:38px;
 height:38px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 background:#fff3cd;
 color:#d99500;
 margin-right:9px;
}
#sell .sell-section-title p{
 margin:0;
 color:#667085;
 font-size:14px;
}
 #sell .sell-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
 }
 #sell .pricing-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
 }
#sell .photo-upload{
 padding:32px 24px;
 border:2px dashed #d0d5dd;
 border-radius:14px;
 background:#f9fafb;
 text-align:center;
 cursor:pointer;
}
#sell .photo-upload:hover{
 border-color:#f3b61f;
 background:#fffaf0;
}
#sell .photo-upload input{
 margin-top:10px;
}
#sell .photo-upload{
 color:#374151;
 font-weight:700;
}
#sell .photo-or{
 text-align:center;
 color:#98a2b3;
 font-size:14px;
 font-weight:600;
 margin:4px 0;
}
#sell #pImage{
 background:#fff;
 border:1px solid #d0d5dd;
}
#sell .sell-description textarea{
 min-height:120px;
 resize:vertical;
}
#sell #productForm > .primary{
 width:100%;
 padding:14px 20px;
 margin-top:8px;
 border-radius:10px;
 background:#f3b61f;
 color:#111827;
 font-weight:800;
 font-size:16px;
}
#sell #productForm > .primary:hover{
 background:#ffc83d;
}
@media(max-width:700px){
 #sell .panel{
  padding:24px 18px;
 }
 #sell .sell-row,
 #sell .pricing-row{
  grid-template-columns:1fr;
 }
}
#sell .sell-hero{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:30px;
 margin-bottom:12px;
}
#sell .sell-hero-text{
 flex:1;
}
#sell .sell-hero-image{
 flex:1;
 text-align:right;
}
#sell .sell-hero-image img{
 max-width:100%;
 max-height:300px;
 height:auto;
}
@media(max-width:700px){
 #sell .sell-hero{
  flex-direction:column;
 }
}
#sell .sell-form-card{
 background:#fff;
 border:1px solid #e5e7eb;
 border-radius:18px;
 padding:24px;
}
#sell .sell-form-card
+ .sell-form-card{
 margin-top:18px;
}
#sell .photo-upload input{
 width:100%;
 padding:12px;
 border:1px solid #e5e7eb;
 border-radius:10px;
 background:#fff;
 cursor:pointer;
 margin-top:14px;
}
#sell .photo-upload > i{
 display:block;
 font-size:30px;
 color:#d99500;
 margin-bottom:10px;
}
#sell .photo-upload > i{
 background:#fff3cd;
 width:52px;
 height:52px;
 line-height:52px;
 border-radius:50%;
 margin:0 auto 12px;
}
/* JEXALI PRODUCT photo FINAL DESIGN */
#sell .product-photo-options{
 display:grid;
 gap:14px;
}
#sell .photo-upload{
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 min-height:190px;
 padding:28px 22px;
 border-radius:16px;
 background:#f9fafb;
 text-align:center;
 cursor:pointer;
 transition:border-color .2s ease,
  background .2s ease,
 transform .2s ease;
}
#sell .photo-upload:hover{
 border-color:#f3b61f;
 background:#fffaf0;
 transform:translateY(-1px);
}
#sell .photo-upload > i{
 display:flex;
 align-items:center;
 justify-content:center;
 width:54px;
 height:54px;
 margin:0 0 13px;
 border-radius:50%;
 background:#fff3cd;
 color:#d99500;
 font-size:24px;
}
#sell .photo-upload-text{
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:5px;
}
#sell .photo-upload-text strong{
 color:#111827;
 font-size:16px;
}
#sell .photo-upload-text small{
 color:#667085;
 font-size:12px;
 font-weight:500;
}
 #sell #pPhotoUpload{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  overflow:hidden;
  pointer-events:none;
 }
#sell .photo-file-name{
 padding:10px 14px;
 border:1px solid #e5e7eb;
 border-radius:10px;
 background:#fff;
 color:#667085;
 font-size:13px;
 text-align:center;
}
#sell .photo-or{
 display:flex;
 align-items:center;
 gap:12px;
 margin:2px 0;
 color:#98a2b3;
 font-size:12px;
 font-weight:800;
}
#sell .photo-or::before,
#sell .photo-or::after{
 content:"";
 flex:1;
 height:1px;
 background:#e5e7eb;
}
#sell .image-url-field{
 display:grid;
 gap:8px;
}
#sell .image-url-field > span{
 color:#344054;
 font-weight:700;
}
#sell .image-url-field small{
 color:#667085;
 font-size:12px;
 font-weight:500;
}
#sell .image-url-field input{
 width:100%;
 padding:13px 14px;
 border:1px solid #d0d5dd;
 border-radius:10px;
 background:#fff;
 outline:none;
}
#sell .image-url-field input:focus{
 border-color:#f3b61f;
 box-shadow:0 0 0 3px
 rgba(243,182,31,.12);
}
/* ===== JEXALI PRODUCT OPTIONS ===== */

.variant-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:18px;
}

.variant-field{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
}

.variant-field > span{
  display:flex;
  align-items:center;
  gap:9px;
  font-weight:800;
  color:#111827;
}

.variant-field > span i{
  color:#f97316;
}

.variant-field input,
.variant-field select{
  width:100%;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#f9fafb;
  padding:12px 13px;
  color:#111827;
  outline:none;
  transition:.2s ease;
}

.variant-field input:focus,
.variant-field select:focus{
  border-color:#f97316;
  background:#fff;
  box-shadow:0 0 0 3px rgba(249,115,22,.12);
}

.variant-field select[multiple]{
  min-height:150px;
  padding:8px;
}

.variant-field select[multiple] option{
  padding:9px 10px;
  margin:3px 0;
  border-radius:7px;
}

.variant-field select[multiple] option:checked{
  background:#111827;
  color:#fff;
}

.variant-field small{
  color:#6b7280;
  line-height:1.45;
  font-size:13px;
}

@media(max-width:700px){
  .variant-grid{
    grid-template-columns:1fr;
  }

  .variant-field{
    padding:15px;
  }
}
/* ===== JEXALI PRODUCT DETAILS MODAL ===== */

.product-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.product-modal.open{
  display:flex;
}

.product-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(17,24,39,.68);
  backdrop-filter:blur(4px);
}

.product-modal-card{
  position:relative;
  z-index:1;
  width:min(920px,100%);
  max-height:90vh;
  overflow-y:auto;
  background:#fff;
  border-radius:24px;
  box-shadow:0 25px 70px rgba(0,0,0,.28);
}

.product-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#111827;
  font-size:28px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 4px 18px rgba(0,0,0,.14);
}

.product-modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:520px;
}

.product-modal-image-wrap{
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:30px;
  border-radius:24px 0 0 24px;
}

.product-modal-image-wrap img{
  width:100%;
  max-height:460px;
  object-fit:contain;
  border-radius:16px;
}

.product-modal-info{
  padding:44px 38px 36px;
}

.product-modal-category{
  margin:0 0 8px;
  color:#f97316;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.product-modal-info h2{
  margin:0 0 12px;
  color:#111827;
  font-size:30px;
}

.product-modal-description{
  margin:0 0 18px;
  color:#6b7280;
  line-height:1.6;
}

.product-modal-price{
  margin-bottom:24px;
  color:#111827;
  font-size:27px;
  font-weight:900;
}

.product-option-group{
  margin:20px 0;
}

.product-option-group h4{
  margin:0 0 10px;
  color:#111827;
  font-size:15px;
}

.product-option-list{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.product-option-btn{
  min-width:44px;
  padding:10px 14px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  color:#374151;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.product-option-btn:hover{
  border-color:#f97316;
}

.product-option-btn.selected{
  border-color:#f97316;
  background:#f97316;
  color:#fff;
}

.product-option-message{
  min-height:20px;
  margin:12px 0;
  color:#dc2626;
  font-size:14px;
  font-weight:700;
}

.product-modal-cart{
  width:100%;
  margin-top:6px;
  padding:14px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}

@media(max-width:700px){
  .product-modal{
    padding:12px;
  }

  .product-modal-card{
    max-height:94vh;
    border-radius:18px;
  }

  .product-modal-grid{
    grid-template-columns:1fr;
  }

  .product-modal-image-wrap{
    min-height:260px;
    padding:24px;
    border-radius:18px 18px 0 0;
  }

  .product-modal-image-wrap img{
    max-height:300px;
  }

  .product-modal-info{
    padding:28px 20px 24px;
  }

  .product-modal-info h2{
    font-size:24px;
  }

  .product-modal-close{
    top:10px;
    right:10px;
  }
}
/* ===== SELLER SIZE BUTTONS ===== */

.seller-size-options{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:4px;
}

.seller-size-options label{
  position:relative;
  cursor:pointer;
}

.seller-size-options input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.seller-size-options label span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:48px;
  padding:10px 13px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  color:#374151;
  font-weight:700;
  transition:.2s ease;
}

.seller-size-options label:hover span{
  border-color:#f97316;
}

.seller-size-options input:checked + span{
  background:#f97316;
  border-color:#f97316;
  color:#fff;
  box-shadow:0 4px 12px rgba(249,115,22,.22);
}
/* ===== JEXALI CART FINAL DESIGN ===== */

#cart{
  padding-top:10px;
}

#cart .cart-page-header{
  margin-bottom:28px;
}

#cart .cart-page-header h2{
  margin:6px 0 8px;
  font-size:38px;
  color:#0b2948;
}

#cart .cart-page-header > p:last-child{
  margin:0;
  color:#667085;
}

#cart .cart-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);
  gap:26px;
  align-items:start;
}

#cart .cart-products-panel{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(15,23,42,.07);
}

#cart .cart-panel-title{
  padding:20px 22px;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}

#cart .cart-panel-title h3{
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:#111827;
  font-size:19px;
}

#cart .cart-panel-title i{
  color:#f3b61f;
}

#cart #cartItems{
  padding:18px;
}

#cart .cart-row{
  margin:0 0 14px;
  padding:18px;
  border:1px solid #e5e7eb;
  border-radius:16px;
  background:#fff;
  box-shadow:none;
  transition:border-color .2s ease,
             box-shadow .2s ease;
}

#cart .cart-row:last-child{
  margin-bottom:0;
}

#cart .cart-row:hover{
  border-color:#d5dae3;
  box-shadow:0 6px 18px rgba(15,23,42,.06);
}

#cart .cart-row strong{
  display:block;
  margin-bottom:7px;
  color:#111827;
  font-size:17px;
}

#cart .cart-row .muted{
  margin-top:4px;
  color:#667085;
  font-size:13px;
}

#cart .remove-cart{
  flex-shrink:0;
  padding:9px 13px;
  border:1px solid #fecaca;
  border-radius:9px;
  background:#fff5f5;
  color:#b42318;
  font-weight:700;
  cursor:pointer;
}

#cart .remove-cart:hover{
  background:#fee2e2;
  border-color:#fca5a5;
}

#cart .checkout-card{
  max-width:none;
  width:100%;
  margin:0;
  padding:24px;
  border:1px solid #e5e7eb;
  border-radius:20px;
  background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.08);
  position:sticky;
  top:100px;
}

#cart .checkout-card h3{
  margin:0 0 20px;
  color:#0b2948;
  font-size:21px;
}

#cart .checkout-card .summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 0;
  color:#667085;
}

#cart .checkout-card .summary-row strong{
  color:#111827;
}

#cart .summary-divider{
  height:1px;
  padding:0 !important;
  margin:10px 0;
  background:#e5e7eb;
}

#cart .checkout-card .total{
  margin:0;
  padding:14px 0;
  border:0;
  color:#111827;
  font-size:20px;
}

#cart .checkout-card .total strong{
  color:#e89b00;
  font-size:24px;
}

#cart .cart-checkout-btn{
  width:100%;
  margin-top:14px;
  padding:15px 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:11px;
  background:#111827;
  color:#fff;
  font-size:15px;
  font-weight:800;
  transition:transform .2s ease,
             box-shadow .2s ease;
}

#cart .cart-checkout-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(15,23,42,.18);
}

#cart .secure-checkout-text{
  margin:14px 0 0;
  text-align:center;
  color:#667085;
  font-size:12px;
}

#cart .secure-checkout-text i{
  margin-right:5px;
  color:#16a34a;
}

/* CART PHONE / TABLET */

@media(max-width:800px){

  #cart .cart-page-header h2{
    font-size:30px;
  }

  #cart .cart-layout{
    grid-template-columns:1fr;
    gap:18px;
  }

  #cart .checkout-card{
    position:static;
  }

  #cart #cartItems{
    padding:12px;
  }

  #cart .cart-row{
    padding:14px;
  }
}

@media(max-width:500px){

  #cart .cart-row{
    align-items:flex-start;
    gap:10px;
  }

  #cart .remove-cart{
    padding:8px 10px;
    font-size:12px;
  }

  #cart .checkout-card{
    padding:20px 17px;
  }
}
/* ===== JEXALI CART PRODUCT DETAILS ===== */

#cart .cart-row{
  display:grid;
  grid-template-columns:90px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
}

#cart .cart-item-image{
  width:90px;
  height:90px;
  border-radius:14px;
  overflow:hidden;
  background:#f3f4f6;
}

#cart .cart-item-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#cart .cart-image-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f3b61f;
  font-size:24px;
}

#cart .cart-item-info{
  min-width:0;
}

#cart .cart-item-category{
  margin-bottom:4px;
  color:#e89b00;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.7px;
}

#cart .cart-item-name{
  margin-bottom:9px;
  font-size:17px;
}

#cart .cart-option-badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:11px;
}

#cart .cart-option-badges span{
  padding:6px 9px;
  border:1px solid #e5e7eb;
  border-radius:999px;
  background:#f8fafc;
  color:#667085;
  font-size:12px;
}

#cart .cart-option-badges b{
  color:#111827;
}

#cart .cart-item-price{
  align-self:start;
  color:#0b2948;
  font-size:17px;
  font-weight:900;
}

#cart .cart-empty{
  padding:55px 20px;
  text-align:center;
  color:#667085;
}

#cart .cart-empty > i{
  color:#f3b61f;
  font-size:34px;
}

#cart .cart-empty h3{
  margin:12px 0 6px;
  color:#111827;
}

#cart .cart-empty p{
  margin:0;
}

@media(max-width:600px){

  #cart .cart-row{
    grid-template-columns:72px minmax(0,1fr);
    gap:12px;
  }

  #cart .cart-item-image{
    width:72px;
    height:72px;
  }

  #cart .cart-item-price{
    grid-column:2;
    justify-self:start;
  }
}
/* ===== JEXALI RECENT ORDERS ===== */

#sellerOrders{
  margin-top:20px;
}

.order-card{
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:20px;
  margin-top:16px;
  box-shadow:0 6px 20px rgba(15,23,42,.06);
}

.order-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid #e5e7eb;
}

.order-header strong{
  font-size:17px;
  color:#111827;
}

.order-header span{
  font-size:13px;
  color:#6b7280;
}

.order-item{
  padding:14px 0;
}

.order-item strong{
  display:block;
  font-size:17px;
  color:#111827;
  margin-bottom:10px;
}

.order-item p{
  margin:6px 0;
  color:#4b5563;
  font-size:14px;
}

.order-card > p:last-child{
  border-top:1px solid #e5e7eb;
  padding-top:14px;
  margin-top:10px;
  font-size:17px;
  color:#111827;
}

@media(max-width:600px){
  .order-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .order-card{
    padding:16px;
  }
}
/* ===== RECENT ORDERS COLOR UPGRADE ===== */

#sellerOrders .order-card{
  border:1px solid #e5e7eb;
  border-left:6px solid #f3b61f;
  background:linear-gradient(
    135deg,
    #ffffff 0%,
    #fffdf7 100%
  );
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}

#sellerOrders .order-header{
  background:#f8fafc;
  margin:-20px -20px 16px;
  padding:16px 20px;
  border-radius:16px 16px 0 0;
  border-bottom:1px solid #e5e7eb;
}

#sellerOrders .order-header strong{
  color:#0b2948;
}

#sellerOrders .order-header span{
  color:#8a6a18;
  font-weight:600;
}

#sellerOrders .order-item{
  border-left:3px solid #e5e7eb;
  padding-left:16px;
  margin-left:2px;
}

#sellerOrders .order-item strong{
  color:#111827;
}

#sellerOrders .order-item p{
  color:#596273;
}

#sellerOrders .order-card > p:last-child{
  background:#fff8e1;
  border:1px solid #f5d77a;
  border-radius:10px;
  padding:12px 14px;
  margin-top:16px;
  color:#0b2948;
}

@media(max-width:600px){
  #sellerOrders .order-header{
    margin:-16px -16px 14px;
    padding:14px 16px;
  }
}
/* ===== JEXALI ORDER CUSTOMER + SHIPPING ===== */

.order-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:4px 0 16px;
  padding:10px 12px;
  border-radius:10px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
}

.order-status-label{
  color:#667085;
  font-size:13px;
  font-weight:700;
}

.order-status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  background:#fff3cd;
  border:1px solid #f5d77a;
  color:#9a6700;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.order-customer-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}

.order-detail-box{
  padding:16px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#f8fafc;
}

.order-detail-box:first-child{
  border-top:4px solid #0b2948;
}

.order-detail-box:last-child{
  border-top:4px solid #f3b61f;
}

.order-detail-box h4{
  margin:0 0 12px;
  color:#0b2948;
  font-size:15px;
}

.order-detail-box p{
  margin:6px 0;
  color:#596273;
  font-size:13px;
  line-height:1.45;
}

.order-detail-box p strong{
  color:#111827;
}

.order-old-details{
  margin-top:16px;
  padding:13px 15px;
  border:1px dashed #d1d5db;
  border-radius:10px;
  background:#f8fafc;
  color:#667085;
  font-size:13px;
}

#sellerOrders .order-total{
  background:#fff8e1;
  border:1px solid #f5d77a;
  border-radius:10px;
  padding:12px 14px;
  margin-top:16px;
  color:#0b2948;
}

@media(max-width:650px){

  .order-customer-details{
    grid-template-columns:1fr;
  }

  .order-status-row{
    align-items:center;
  }
}
/* ===== JEXALI SHARE PRODUCT BUTTON ===== */

#dashboard .share-product{
  width:100%;
  margin-top:14px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:11px;
  background:linear-gradient(135deg,#0b2948,#111827);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(15,23,42,.14);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

#dashboard .share-product i{
  color:#f3b61f;
  font-size:15px;
}

#dashboard .share-product:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(15,23,42,.20);
}

#dashboard .share-product:active{
  transform:translateY(0);
}

@media(max-width:600px){
  #dashboard .share-product{
    padding:11px 13px;
    font-size:14px;
  }
}
/* ===== JEXALI ORDER STATUS SELECT ===== */

#sellerOrders .order-status-select{
  min-width:145px;
  padding:9px 34px 9px 12px;
  border:1px solid #f5d77a;
  border-radius:999px;
  background:#fff8e1;
  color:#8a5a00;
  font-weight:800;
  cursor:pointer;
  outline:none;
  box-shadow:0 3px 10px rgba(15,23,42,.06);
}

#sellerOrders .order-status-select:focus{
  border-color:#f3b61f;
  box-shadow:0 0 0 3px rgba(243,182,31,.15);
}

#sellerOrders .order-status-select:disabled{
  opacity:.65;
  cursor:wait;
}

@media(max-width:600px){
  #sellerOrders .order-status-select{
    min-width:130px;
    padding:8px 30px 8px 11px;
    font-size:13px;
  }
}
.order-card{
  background:#fff;
  border:1px solid #e7eaf3;
  border-left:4px solid #f4b400;
  border-radius:18px;
  padding:22px;
  margin-bottom:22px;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}

.order-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:1px solid #eef2f7;
}

.order-header strong{
  font-size:20px;
  color:#0f172a;
}

.order-header span{
  color:#64748b;
  font-size:14px;
}

.order-status-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:16px 18px;
  margin-bottom:16px;
}

.order-status-label{
  font-weight:700;
  color:#334155;
  font-size:15px;
}

.order-status-select{
  min-width:180px;
  height:46px;
  border:1px solid #d6dae3;
  border-radius:999px;
  padding:0 16px;
  background:#fff8dc;
  color:#8a6a00;
  font-weight:700;
  outline:none;
}

.order-tracking-box{
  background:#fffdf7;
  border:1px solid #f5e7a8;
  border-radius:16px;
  padding:18px;
  margin-bottom:18px;
}

.order-tracking-fields{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:14px;
  margin-bottom:14px;
}

.order-tracking-fields label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:#334155;
}

.order-carrier-select,
.order-tracking-input{
  width:100%;
  height:46px;
  border:1px solid #d6dae3;
  border-radius:12px;
  background:#fff;
  padding:0 14px;
  font-size:15px;
  color:#0f172a;
  outline:none;
}

.order-carrier-select:focus,
.order-tracking-input:focus,
.order-status-select:focus{
  border-color:#f4b400;
  box-shadow:0 0 0 3px rgba(244,180,0,.15);
}

.save-tracking-btn{
  min-width:170px;
  height:46px;
  border:none;
  border-radius:12px;
  background:#0f172a;
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.save-tracking-btn:hover{
  transform:translateY(-1px);
  opacity:.95;
}

.tracking-save-message{
  margin-top:10px;
  font-size:14px;
  color:#475569;
  font-weight:600;
}

.order-item{
  padding:16px 0;
  border-top:1px solid #eef2f7;
}

.order-item strong{
  display:block;
  margin-bottom:8px;
  font-size:18px;
  color:#0f172a;
}

.order-item p{
  margin:5px 0;
  color:#475569;
  line-height:1.5;
}

.order-customer-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:18px;
}

.order-detail-box{
  background:#f8fafc;
  border:1px solid #e7eaf3;
  border-radius:14px;
  padding:16px;
}

.order-detail-box h4{
  margin:0 0 10px;
  font-size:16px;
  color:#0f172a;
}

.order-detail-box p{
  margin:6px 0;
  color:#475569;
}

.order-old-details{
  margin-top:16px;
  background:#f8fafc;
  border:1px dashed #d5dbe7;
  border-radius:14px;
  padding:14px;
  color:#64748b;
}

.order-total{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #eef2f7;
  font-size:18px;
  color:#0f172a;
}

@media (max-width: 768px){
  .order-tracking-fields{
    grid-template-columns:1fr;
  }

  .order-customer-details{
    grid-template-columns:1fr;
  }

  .order-status-row{
    align-items:flex-start;
  }

  .order-status-select{
    width:100%;
  }

  .save-tracking-btn{
    width:100%;
  }
}
/* ===== JEXALI ORDER STATUS COLORS ===== */

.order-status-select[data-current-status="New"]{
  background:#fff7d6;
  border-color:#f4c430;
  color:#8a6200;
}

.order-status-select[data-current-status="Shipped"]{
  background:#e8f2ff;
  border-color:#8ab8f8;
  color:#1d4f91;
}

.order-status-select[data-current-status="Delivered"]{
  background:#e8f8ee;
  border-color:#8fd4a7;
  color:#176b3a;
}

/* ===== TRACKING BUTTON ===== */

.save-tracking-btn{
  background:#f4b400;
  color:#0f172a;
  font-weight:800;
  box-shadow:0 5px 14px rgba(244,180,0,.22);
}

.save-tracking-btn:hover{
  background:#ffc21a;
  transform:translateY(-1px);
}

.save-tracking-btn:disabled{
  opacity:.65;
  cursor:wait;
  transform:none;
}

/* ===== TRACKING MESSAGE ===== */

.tracking-save-message{
  min-height:20px;
  margin:10px 0 0;
  font-size:14px;
  font-weight:700;
}
.buyer-tracking-box{
  margin:18px 0;
  padding:16px;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  border-radius:12px;
}

.buyer-tracking-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:14px;
}

.buyer-tracking-info div{
  display:flex;
  flex-direction:column;
  gap:5px;
}

.buyer-tracking-info span{
  font-size:12px;
  font-weight:700;
  color:#6b7280;
  text-transform:uppercase;
}

.buyer-tracking-info strong{
  color:#111827;
  word-break:break-word;
}

.buyer-track-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  background:#111827;
  color:white;
  text-decoration:none;
  border-radius:9px;
  font-weight:700;
}

.buyer-track-btn:hover{
  opacity:.9;
}

.tracking-pending p{
  margin:5px 0 0;
  color:#6b7280;
  font-size:14px;
}

@media(max-width:600px){
  .buyer-tracking-info{
    grid-template-columns:1fr;
  }

  .buyer-track-btn{
    width:100%;
  }
}
/* ===== BUYER MY ORDERS PROFESSIONAL CARD ===== */

#myorders .buyer-order-card{
  background:#fff;
  border:1px solid #e7eaf3;
  border-left:5px solid #f4b400;
  border-radius:18px;
  padding:22px;
  margin-bottom:22px;
  box-shadow:0 10px 28px rgba(15,23,42,.07);
}

#myorders .buyer-order-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:16px;
  margin-bottom:18px;
  border-bottom:1px solid #eef2f7;
}

#myorders .buyer-order-header strong{
  font-size:20px;
  color:#0b2948;
}

#myorders .buyer-order-header p{
  margin:5px 0 0;
  color:#64748b;
  font-size:13px;
}
#myorders .buyer-order-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:90px;
  padding:8px 14px;
  border-radius:999px;
  background:#fff7d6;
  border:1px solid #f4c430;
  color:#8a6200;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
}
#myorders .buyer-order-items{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}

#myorders .buyer-order-item{
  padding:15px 16px;
  background:#f8fafc;
  border:1px solid #e7eaf3;
  border-radius:14px;
}

#myorders .buyer-order-item strong{
  display:block;
  margin-bottom:8px;
  color:#0f172a;
  font-size:17px;
}

#myorders .buyer-order-item p{
  margin:5px 0;
  color:#475569;
  font-size:14px;
  line-height:1.45;
}
#myorders .buyer-order-shipping{
  margin-top:18px;
  padding:16px;
  background:#f8fafc;
  border:1px solid #e7eaf3;
  border-radius:14px;
}

#myorders .buyer-order-shipping h4{
  margin:0 0 10px;
  color:#0b2948;
  font-size:15px;
}

#myorders .buyer-order-shipping p{
  margin:5px 0;
  color:#475569;
  font-size:14px;
  line-height:1.45;
}

#myorders .buyer-order-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:18px;
  padding:16px;
  background:#fff8e1;
  border:1px solid #f5d77a;
  border-radius:12px;
  color:#0b2948;
  font-size:17px;
  font-weight:800;
}

#myorders .buyer-order-total strong{
  font-size:20px;
}
@media(max-width:600px){

  #myorders .buyer-order-card{
    padding:16px;
    border-radius:15px;
  }

  #myorders .buyer-order-header{
    align-items:flex-start;
  }

  #myorders .buyer-order-status{
    min-width:auto;
    padding:7px 12px;
    font-size:11px;
  }

  #myorders .buyer-order-item{
    padding:13px;
  }

  #myorders .buyer-order-total{
    padding:14px;
  }
}
/* ===== BUYER ORDER STATUS COLORS ===== */

#myorders .buyer-order-status.status-new{
  background:#fff7d6;
  border-color:#f4c430;
  color:#8a6200;
}

#myorders .buyer-order-status.status-shipped{
  background:#e8f2ff;
  border-color:#8ab8f8;
  color:#1d4f91;
}

#myorders .buyer-order-status.status-delivered{
  background:#e8f8ee;
  border-color:#8fd4a7;
  color:#176b3a;
}
/* ===== BUYER ORDER TIMELINE ===== */

#myorders .buyer-order-timeline{
  width:100%;
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  align-items:center;
  gap:10px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #eef2f7;
}

#myorders .timeline-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  min-width:72px;
  color:#94a3b8;
  font-size:12px;
  font-weight:700;
  text-align:center;
}

#myorders .timeline-dot{
  width:14px;
  height:14px;
  border-radius:50%;
  background:#e2e8f0;
  border:3px solid #fff;
  box-shadow:0 0 0 2px #cbd5e1;
}

#myorders .timeline-line{
  height:3px;
  border-radius:999px;
  background:#e2e8f0;
}

#myorders .timeline-step.active{
  color:#0b2948;
}

#myorders .timeline-step.active .timeline-dot{
  background:#f4b400;
  box-shadow:0 0 0 2px #f4b400;
}

#myorders .timeline-line.active{
  background:#f4b400;
}

@media(max-width:600px){
  #myorders .buyer-order-timeline{
    gap:6px;
  }

  #myorders .timeline-step{
    min-width:58px;
    font-size:10px;
  }
}
/* ===== JEXALI UI UPGRADE ===== */

:root{
  --jexali-navy:#0b1533;
  --jexali-navy-2:#13214d;
  --jexali-blue:#2f6bff;
  --jexali-light-blue:#eef4ff;
  --jexali-gold:#f2b51d;
  --jexali-orange:#ff7a1a;
  --jexali-soft-orange:#fff3e8;
  --jexali-green:#1f9d63;
  --jexali-soft-green:#e9f8f0;
  --jexali-red:#d64545;
  --jexali-bg:#f6f8fc;
  --jexali-card:#ffffff;
  --jexali-border:#e6ebf2;
  --jexali-text:#1a2238;
  --jexali-muted:#6b7280;
  --jexali-shadow:0 16px 40px rgba(15, 23, 42, 0.08);
}

body{
  background:linear-gradient(180deg,#f7f9fd 0%,#eef3fb 100%);
  color:var(--jexali-text);
}

.wrap{
  width:min(1200px,92%);
  margin:0 auto;
}

/* ===== GENERAL SECTION DESIGN ===== */

.view{
  background:transparent;
  padding:28px 0 36px;
}

.panel,
#accountSection,
#shop,
#sell,
#dashboard,
#myorders,
#cart{
  position:relative;
}

.section-head,
.buyer-orders-header,
.cart-page-header{
  background:linear-gradient(135deg,#ffffff 0%,#f6f9ff 100%);
  border:1px solid var(--jexali-border);
  border-radius:24px;
  padding:28px;
  box-shadow:var(--jexali-shadow);
  margin-bottom:24px;
}

.section-head h2,
.buyer-orders-header h2,
.cart-page-header h2{
  margin:8px 0 6px;
  font-size:2rem;
  color:var(--jexali-navy);
}

.eyebrow{
  color:#9a6a00;
  font-weight:800;
  letter-spacing:2px;
  text-transform:uppercase;
}

.muted,
.shop-subtitle,
.buyer-orders-header p,
.cart-page-header p,
.section-head p{
  color:var(--jexali-muted);
}

/* ===== BUTTONS ===== */

.primary,
.secondary,
.view-all-btn,
.featured-view-all,
#registerBtn,
#loginBtn,
#logoutBtn,
.cart-checkout-btn,
#connectStripeBtn{
  border:none;
  border-radius:14px;
  font-weight:700;
  cursor:pointer;
  transition:all .25s ease;
}

.primary,
#registerBtn,
#loginBtn,
#connectStripeBtn,
.cart-checkout-btn{
  background:linear-gradient(135deg,var(--jexali-navy) 0%,var(--jexali-blue) 100%);
  color:#fff;
  box-shadow:0 12px 24px rgba(21,39,86,.18);
}

.primary:hover,
#registerBtn:hover,
#loginBtn:hover,
#connectStripeBtn:hover,
.cart-checkout-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(21,39,86,.22);
}

.secondary,
.featured-view-all,
.view-all-btn,
#logoutBtn{
  background:#fff;
  color:var(--jexali-navy);
  border:1px solid #d8e0ee;
}

.secondary:hover,
.featured-view-all:hover,
.view-all-btn:hover,
#logoutBtn:hover{
  background:var(--jexali-light-blue);
}

/* ===== SELL SECTION ===== */

#sell .panel{
  background:linear-gradient(180deg,#fff8ef 0%,#ffffff 40%);
  border:1px solid #f4dfbf;
  border-radius:30px;
  padding:26px;
  box-shadow:var(--jexali-shadow);
}

.sell-hero{
  display:grid;
  grid-template-columns:1.2fr .9fr;
  gap:24px;
  align-items:center;
  margin-bottom:24px;
  background:linear-gradient(135deg,#fff3e8 0%,#fffaf3 100%);
  border:1px solid #f3e2c2;
  border-radius:26px;
  padding:24px;
}

.sell-hero-text h2{
  margin:8px 0;
  color:var(--jexali-navy);
  font-size:2rem;
}

.sell-hero-image img{
  width:100%;
  border-radius:22px;
  display:block;
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.seller-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:18px 0 24px;
}

.seller-benefits span{
  background:#fff;
  border:1px solid #f0d8ad;
  color:#7c5411;
  padding:10px 14px;
  border-radius:999px;
  font-weight:700;
}

.sell-form-card{
  background:#fff;
  border:1px solid var(--jexali-border);
  border-radius:22px;
  padding:22px;
  box-shadow:0 10px 24px rgba(15,23,42,.04);
  margin-bottom:18px;
}

.sell-section-title h3{
  margin:0 0 6px;
  color:var(--jexali-navy);
}

.sell-section-title p{
  margin:0 0 18px;
  color:var(--jexali-muted);
}

.sell-row,
.pricing-row,
.variant-grid{
  display:grid;
  gap:16px;
}

.sell-row{
  grid-template-columns:1fr 1fr;
}

.pricing-row{
  grid-template-columns:repeat(3,1fr);
}

.variant-grid{
  grid-template-columns:repeat(2,1fr);
}

#productForm label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-weight:600;
  color:var(--jexali-text);
}

#productForm input,
#productForm textarea,
#productForm select{
  width:100%;
  border:1px solid #d8e2f0;
  border-radius:14px;
  padding:13px 14px;
  background:#fbfdff;
  color:var(--jexali-text);
  outline:none;
  transition:.2s ease;
}

#productForm input:focus,
#productForm textarea:focus,
#productForm select:focus{
  border-color:var(--jexali-blue);
  box-shadow:0 0 0 4px rgba(47,107,255,.12);
  background:#fff;
}

.variant-field{
  background:linear-gradient(180deg,#fbfcff 0%,#f8fbff 100%);
  border:1px solid #dfe7f3;
  border-radius:18px;
  padding:16px;
}

.variant-field span{
  font-weight:800;
  color:var(--jexali-navy);
}

.variant-field small{
  color:var(--jexali-muted);
  margin-top:6px;
}

.seller-size-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.seller-size-options label{
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  border:1px solid #dbe4f1;
  padding:8px 12px;
  border-radius:12px;
  font-weight:600;
}

/* ===== PHOTO UPLOAD ===== */

.product-photo-options{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.photo-upload{
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(135deg,#eef4ff 0%,#ffffff 100%);
  border:2px dashed #b9cbf0;
  border-radius:18px;
  padding:18px;
  cursor:pointer;
}

.photo-upload i{
  font-size:1.5rem;
  color:var(--jexali-blue);
}

.photo-upload input{
  display:none;
}

.photo-file-name{
  background:#fff7e8;
  border:1px solid #f1ddae;
  color:#7e5b12;
  padding:12px 14px;
  border-radius:12px;
  font-weight:600;
}

.photo-or{
  text-align:center;
  color:var(--jexali-muted);
  font-weight:700;
}

.image-url-field{
  background:#fbfdff;
  border:1px solid #dde7f2;
  border-radius:18px;
  padding:16px;
}

/* ===== PRODUCT GRID / CARDS ===== */

.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:22px;
}

.card{
  background:#fff;
  border:1px solid var(--jexali-border);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--jexali-shadow);
  transition:all .25s ease;
}

.card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 38px rgba(15,23,42,.12);
}

.card img,
.card .placeholder{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
  background:#f3f6fb;
}

.card-body{
  padding:18px;
}

.card .category{
  display:inline-block;
  background:var(--jexali-light-blue);
  color:var(--jexali-blue);
  font-size:.82rem;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  margin-bottom:10px;
}

.card h3{
  margin:6px 0 8px;
  color:var(--jexali-navy);
}

.card p{
  color:var(--jexali-muted);
  min-height:44px;
}

.card .price{
  font-size:1.2rem;
  font-weight:800;
  color:var(--jexali-orange);
  margin:12px 0;
}

/* ===== DASHBOARD / STATS ===== */

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-bottom:24px;
}

.stats div{
  background:linear-gradient(135deg,#ffffff 0%,#f5f8ff 100%);
  border:1px solid var(--jexali-border);
  border-radius:22px;
  padding:22px;
  box-shadow:var(--jexali-shadow);
}

.stats strong{
  display:block;
  font-size:2rem;
  color:var(--jexali-navy);
  margin-bottom:6px;
}

.stats span{
  color:var(--jexali-muted);
  font-weight:600;
}

/* ===== SELLER ORDERS ===== */

.seller-orders-section{
  margin-top:28px;
  background:linear-gradient(180deg,#fff 0%,#f7faff 100%);
  border:1px solid var(--jexali-border);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--jexali-shadow);
}

.seller-orders-head h3{
  margin:6px 0;
  color:var(--jexali-navy);
}

.order-card{
  background:#fff;
  border:1px solid #e4ebf4;
  border-radius:22px;
  padding:20px;
  margin-top:18px;
  box-shadow:0 10px 24px rgba(15,23,42,.05);
}

.order-header{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:14px;
}

.order-status-row{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.order-status-select,
.order-carrier-select,
.order-tracking-input{
  border:1px solid #d8e2f0;
  border-radius:12px;
  padding:10px 12px;
  background:#fbfdff;
}

.order-tracking-box{
  background:#f8fbff;
  border:1px solid #dde6f3;
  border-radius:18px;
  padding:18px;
  margin-bottom:18px;
}

.order-tracking-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:14px;
}

.order-item{
  background:#fff8ec;
  border:1px solid #f1dfbd;
  border-radius:16px;
  padding:14px;
  margin-bottom:12px;
}

.order-customer-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:18px;
}

.order-detail-box{
  background:#f9fbfe;
  border:1px solid #dfe7f2;
  border-radius:18px;
  padding:16px;
}

.order-total{
  background:#fff9e8;
  border:1px solid #f1dfac;
  border-radius:16px;
  padding:14px 16px;
  margin-top:16px;
  color:#7b5b16;
}

/* ===== MY ORDERS ===== */

#buyerOrders{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.buyer-order-card{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid var(--jexali-border);
  border-left:5px solid var(--jexali-gold);
  border-radius:26px;
  padding:24px;
  box-shadow:var(--jexali-shadow);
}

.buyer-order-header{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-bottom:18px;
}

.buyer-order-header strong{
  font-size:1.15rem;
  color:var(--jexali-navy);
}

.buyer-order-header p{
  color:var(--jexali-muted);
  margin:4px 0 0;
}

.buyer-order-status{
  align-self:flex-end;
  padding:8px 16px;
  border-radius:999px;
  font-weight:800;
  font-size:.9rem;
  border:1px solid transparent;
}

.status-new{
  background:#fff7da;
  color:#9a6a00;
  border-color:#f0d786;
}

.status-shipped{
  background:#e9f2ff;
  color:#2158c8;
  border-color:#bfd3ff;
}

.status-delivered{
  background:#eaf8f0;
  color:#1f8b58;
  border-color:#bfe8cf;
}

.buyer-order-timeline{
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto;
  align-items:center;
  gap:12px;
  margin-top:6px;
}

.timeline-step{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:.92rem;
  color:#8b93a5;
  font-weight:700;
}

.timeline-step.active{
  color:var(--jexali-navy);
}

.timeline-dot{
  width:18px;
  height:18px;
  border-radius:50%;
  border:3px solid #d7deea;
  background:#fff;
}

.timeline-step.active .timeline-dot{
  border-color:var(--jexali-gold);
  background:var(--jexali-gold);
  box-shadow:0 0 0 3px rgba(242,181,29,.18);
}

.timeline-line{
  height:3px;
  background:#e1e7f0;
  border-radius:999px;
}

.timeline-line.active{
  background:var(--jexali-gold);
}

.buyer-order-items{
  display:grid;
  gap:12px;
  margin-bottom:18px;
}

.buyer-order-item{
  background:#f8fbff;
  border:1px solid #dde6f2;
  border-radius:18px;
  padding:16px;
}

.buyer-tracking-box{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  background:#f9fbfe;
  border:1px solid #dde6f2;
  border-radius:18px;
  padding:16px;
  margin-bottom:16px;
}

.buyer-tracking-info{
  display:grid;
  grid-template-columns:repeat(2,minmax(140px,1fr));
  gap:16px;
}

.buyer-tracking-info span{
  display:block;
  color:var(--jexali-muted);
  font-size:.86rem;
  margin-bottom:4px;
  text-transform:uppercase;
  font-weight:800;
}

.buyer-track-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--jexali-navy);
  color:#fff;
  text-decoration:none;
  border-radius:14px;
  padding:12px 18px;
  font-weight:800;
}

.tracking-pending{
  background:#fff9ea;
  border-color:#f1dfb6;
}

.buyer-order-shipping{
  background:#fbfdff;
  border:1px solid #dfe7f2;
  border-radius:18px;
  padding:16px;
  margin-bottom:16px;
}

.buyer-order-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:linear-gradient(135deg,#fff9e6 0%,#fffdf5 100%);
  border:1px solid #f0dfaf;
  border-radius:18px;
  padding:16px 18px;
}

.buyer-order-total span{
  color:#7b5b16;
  font-weight:700;
}

.buyer-order-total strong{
  color:#7b5b16;
  font-size:1.3rem;
}

/* ===== PRODUCT MODAL ===== */

.product-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:20px;
}

.product-modal.open{
  display:flex;
}

.product-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(10,18,38,.65);
  backdrop-filter:blur(4px);
}

.product-modal-card{
  position:relative;
  width:min(980px,100%);
  background:#fff;
  border-radius:28px;
  overflow:hidden;
  z-index:2;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}

.product-modal-close{
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border:none;
  border-radius:50%;
  background:#fff4eb;
  color:var(--jexali-orange);
  font-size:1.5rem;
  cursor:pointer;
  z-index:3;
}

.product-modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}

.product-modal-image-wrap{
  background:linear-gradient(135deg,#f4f7fb 0%,#e9eff8 100%);
  padding:34px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-modal-image-wrap img{
  width:100%;
  max-width:320px;
  border-radius:20px;
  object-fit:cover;
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  background:#fff;
}

.product-modal-info{
  padding:40px 36px;
}

.product-modal-category{
  display:inline-block;
  background:#eef4ff;
  color:var(--jexali-blue);
  padding:7px 12px;
  border-radius:999px;
  font-weight:800;
  margin-bottom:12px;
}

#modalProductName{
  margin:0 0 12px;
  color:var(--jexali-navy);
  font-size:2rem;
}

.product-modal-description{
  color:var(--jexali-muted);
  line-height:1.7;
  margin-bottom:14px;
}

.product-modal-price{
  font-size:2rem;
  font-weight:900;
  color:var(--jexali-orange);
  margin-bottom:18px;
}

.product-option-group{
  margin-bottom:18px;
}

.product-option-group h4{
  margin:0 0 10px;
  color:var(--jexali-navy);
}

.product-option-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.product-option-btn{
  border:1px solid #d5ddeb;
  background:#fff;
  color:#3d465a;
  border-radius:12px;
  padding:10px 16px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.product-option-btn:hover{
  background:#f3f7ff;
  border-color:#bfcdf0;
}

.product-option-btn.selected{
  background:linear-gradient(135deg,var(--jexali-orange) 0%,#ff9d4d 100%);
  border-color:var(--jexali-orange);
  color:#fff;
  box-shadow:0 10px 22px rgba(255,122,26,.22);
}

.product-modal-cart{
  width:100%;
  margin-top:8px;
  padding:16px;
  font-size:1rem;
}

/* ===== CART PAGE ===== */

.cart-layout{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:24px;
  align-items:start;
}

.cart-products-panel{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid var(--jexali-border);
  border-radius:28px;
  padding:24px;
  box-shadow:var(--jexali-shadow);
}

.cart-panel-title{
  margin-bottom:18px;
}

.cart-panel-title h3{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  color:var(--jexali-navy);
  font-size:1.4rem;
}

#cartItems{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.cart-row{
  display:grid;
  grid-template-columns:110px 1fr auto;
  gap:16px;
  align-items:center;
  background:#fff;
  border:1px solid #e2e9f3;
  border-radius:22px;
  padding:16px;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.cart-item-image{
  width:110px;
  height:110px;
  border-radius:18px;
  overflow:hidden;
  background:#f3f6fb;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cart-item-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.cart-image-placeholder{
  font-size:2rem;
  color:#9ba8bf;
}

.cart-item-category{
  display:inline-block;
  background:#eef4ff;
  color:var(--jexali-blue);
  padding:5px 10px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:800;
  margin-bottom:8px;
}

.cart-item-name{
  display:block;
  color:var(--jexali-navy);
  font-size:1.1rem;
  margin-bottom:10px;
}

.cart-option-badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}

.cart-option-badges span{
  background:#fff4eb;
  border:1px solid #f1dbc1;
  color:#8a5610;
  padding:7px 10px;
  border-radius:999px;
  font-size:.85rem;
  font-weight:700;
}

.remove-cart{
  border:none;
  background:#fff1f1;
  color:var(--jexali-red);
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  cursor:pointer;
}

.cart-item-price{
  font-size:1.25rem;
  font-weight:900;
  color:var(--jexali-orange);
  white-space:nowrap;
}

.cart-empty{
  text-align:center;
  background:linear-gradient(180deg,#ffffff 0%,#f7faff 100%);
  border:1px dashed #cfd9e7;
  border-radius:24px;
  padding:40px 20px;
  color:var(--jexali-muted);
}

.cart-empty i{
  font-size:2.6rem;
  color:var(--jexali-blue);
  margin-bottom:12px;
}

.checkout-card{
  background:linear-gradient(180deg,#0e1b42 0%,#18295f 100%);
  color:#fff;
  border-radius:28px;
  padding:26px;
  box-shadow:0 20px 40px rgba(10,24,58,.22);
  position:sticky;
  top:100px;
}

.checkout-card h3{
  margin-top:0;
  font-size:1.5rem;
}

.summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  color:#e5ebff;
}

.summary-row strong{
  color:#fff;
}

.summary-divider{
  height:1px;
  background:rgba(255,255,255,.18);
  margin:8px 0;
}

.summary-row.total{
  font-size:1.12rem;
  font-weight:800;
}

.cart-checkout-btn{
  width:100%;
  margin-top:16px;
  padding:15px 16px;
  background:linear-gradient(135deg,var(--jexali-gold) 0%,#ffcb4d 100%);
  color:#192447;
  box-shadow:none;
}

.cart-checkout-btn:hover{
  background:linear-gradient(135deg,#ffcb4d 0%,#ffd86e 100%);
}

.secure-checkout-text{
  margin-top:14px;
  color:#dce5ff;
  font-size:.92rem;
  text-align:center;
}

/* ===== ACCOUNT SECTION ===== */

#accountSection{
  margin-top:28px;
  background:linear-gradient(180deg,#fff 0%,#f7faff 100%);
  border:1px solid var(--jexali-border);
  border-radius:28px;
  padding:28px;
  box-shadow:var(--jexali-shadow);
}

.account-intro{
  text-align:center;
  margin-bottom:24px;
}

.account-intro h2{
  color:var(--jexali-navy);
  font-size:2.2rem;
  margin:8px 0;
}

.account-box{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:24px;
  align-items:start;
}

.register-box,
.login-box{
  background:#fff;
  border:1px solid #e1e7f0;
  border-radius:22px;
  padding:22px;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.account-divider{
  width:1px;
  background:#e2e8f2;
  min-height:100%;
}

.register-box input,
.register-box select,
.login-box input{
  width:100%;
  margin-bottom:12px;
  border:1px solid #d7e0ec;
  border-radius:14px;
  padding:12px 14px;
  background:#fbfdff;
}

/* ===== FOOTER ===== */

footer{
  margin-top:36px;
  padding:20px;
  text-align:center;
  color:#e8edff;
  background:linear-gradient(135deg,var(--jexali-navy) 0%,#16285d 100%);
  border-top-left-radius:22px;
  border-top-right-radius:22px;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 980px){
  .sell-hero,
  .product-modal-grid,
  .cart-layout,
  .account-box,
  .order-customer-details{
    grid-template-columns:1fr;
  }

  .account-divider{
    display:none;
  }

  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .pricing-row,
  .sell-row,
  .variant-grid,
  .order-tracking-fields{
    grid-template-columns:1fr;
  }

  .product-modal-info{
    padding:26px;
  }
}

@media (max-width: 700px){
  .stats{
    grid-template-columns:1fr;
  }

  .cart-row{
    grid-template-columns:1fr;
    text-align:left;
  }

  .cart-item-image{
    width:100%;
    height:220px;
  }

  .buyer-tracking-info{
    grid-template-columns:1fr;
  }

  .buyer-order-timeline{
    grid-template-columns:1fr;
    gap:10px;
  }

  .timeline-line{
    height:18px;
    width:3px;
    margin:0 auto;
  }

  .buyer-order-status{
    align-self:flex-start;
  }
}
/* FIX PRODUCT MODAL SCROLL */

.product-modal-card{
  max-height:90vh;
  overflow-y:auto;
}
/* ===== JEXALI CART FINAL PREMIUM DESIGN ===== */

/* PAGE */
#cart{
  padding:18px 0 42px;
}

/* CART HEADER */
#cart .cart-page-header{
  position:relative;
  overflow:hidden;
  padding:30px 32px;
  border:1px solid #e5eaf2;
  border-radius:24px;
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f4f8ff 68%,
      #fff8e8 100%
    );
  box-shadow:0 14px 34px rgba(15,23,42,.07);
}

#cart .cart-page-header::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:7px;
  height:100%;
  background:linear-gradient(
    180deg,
    #f3b61f,
    #ff8a1f
  );
}

#cart .cart-page-header .eyebrow{
  color:#8a6410;
}

#cart .cart-page-header h2{
  color:#0b2948;
}

/* MAIN LAYOUT */
#cart .cart-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr);
  gap:26px;
  align-items:start;
}

/* SHOPPING CART PANEL */
#cart .cart-products-panel{
  padding:0;
  overflow:hidden;
  border:1px solid #e5eaf2;
  border-radius:24px;
  background:#fff;
  box-shadow:0 14px 34px rgba(15,23,42,.07);
}

#cart .cart-panel-title{
  padding:21px 24px;
  margin:0;
  background:linear-gradient(
    135deg,
    #ffffff,
    #f8fbff
  );
  border-bottom:1px solid #e8edf4;
}

#cart .cart-panel-title h3{
  color:#0b2948;
  font-size:20px;
}

#cart .cart-panel-title i{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#fff4d4;
  color:#d89400;
}

/* PRODUCTS AREA */
#cart #cartItems{
  padding:20px;
  gap:16px;
}

/* PRODUCT CARD */
#cart .cart-row{
  display:grid;
  grid-template-columns:96px minmax(0,1fr) auto;
  gap:18px;
  align-items:center;

  margin:0;
  padding:17px;

  border:1px solid #e5eaf2;
  border-left:4px solid #f3b61f;
  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #fcfdff 100%
    );

  box-shadow:0 6px 18px rgba(15,23,42,.04);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

#cart .cart-row:hover{
  transform:translateY(-2px);
  border-color:#d7deea;
  box-shadow:0 12px 26px rgba(15,23,42,.08);
}

/* PRODUCT IMAGE */
#cart .cart-item-image{
  width:96px;
  height:96px;
  border-radius:16px;
  overflow:hidden;
  background:#f4f6f9;
  border:1px solid #edf0f5;
}

#cart .cart-item-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* PRODUCT INFO */
#cart .cart-item-category{
  display:inline-flex;
  padding:5px 9px;
  margin-bottom:6px;

  border-radius:999px;

  background:#eef4ff;
  color:#2f6bff;

  font-size:10px;
  font-weight:900;
  letter-spacing:.7px;
}

#cart .cart-item-name{
  margin-bottom:9px;
  color:#0f172a;
  font-size:17px;
  font-weight:800;
}

/* COLOR + SIZE BADGES */
#cart .cart-option-badges{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:11px;
}

#cart .cart-option-badges span{
  padding:6px 10px;
  border:1px solid #f1ddb4;
  border-radius:999px;
  background:#fff8e9;
  color:#7d5a13;
  font-size:12px;
}

#cart .cart-option-badges b{
  color:#0f172a;
}

/* PRICE */
#cart .cart-item-price{
  align-self:start;
  padding:7px 10px;
  border-radius:10px;
  background:#fff7e5;
  color:#e69400;
  font-size:18px;
  font-weight:900;
}

/* REMOVE BUTTON */
#cart .remove-cart{
  display:inline-flex;
  align-items:center;
  gap:7px;

  padding:8px 11px;

  border:1px solid #fecaca;
  border-radius:10px;

  background:#fff5f5;
  color:#b42318;

  font-weight:800;
}

#cart .remove-cart:hover{
  background:#fee2e2;
}

/* ===== ORDER SUMMARY ===== */

#cart .checkout-card{
  width:100%;
  max-width:none;
  margin:0;
  padding:26px;

  position:sticky;
  top:100px;

  border:1px solid #20325f;
  border-radius:24px;

  background:
    linear-gradient(
      155deg,
      #0b1533 0%,
      #142654 100%
    );

  color:#fff;

  box-shadow:
    0 18px 38px rgba(11,21,51,.20);
}

#cart .checkout-card h3{
  margin:0 0 22px;
  color:#fff;
  font-size:22px;
}

#cart .checkout-card .summary-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:11px 0;
  color:#cbd5e1;
}

#cart .checkout-card .summary-row strong{
  color:#fff;
}

#cart .summary-divider{
  height:1px;
  margin:10px 0;
  padding:0 !important;
  background:rgba(255,255,255,.16);
}

#cart .checkout-card .summary-row.total{
  margin:0;
  padding:15px 0 8px;
  color:#fff;
  font-size:19px;
  font-weight:900;
}

#cart .checkout-card .total strong{
  color:#f8bd25;
  font-size:27px;
}

/* CHECKOUT BUTTON */
#cart .cart-checkout-btn{
  width:100%;
  margin-top:18px;
  padding:15px 18px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  border:0;
  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #f3b61f,
      #ffd35c
    );

  color:#111827;

  font-size:15px;
  font-weight:900;

  box-shadow:
    0 10px 22px rgba(243,182,31,.22);
}

#cart .cart-checkout-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 26px rgba(243,182,31,.30);
}

/* SECURE MESSAGE */
#cart .secure-checkout-text{
  margin:15px 0 0;
  text-align:center;
  color:#cbd5e1;
  font-size:12px;
}

#cart .secure-checkout-text i{
  color:#5ee49b;
}

/* ===== TABLET ===== */

@media(max-width:800px){

  #cart{
    padding-top:10px;
  }

  #cart .cart-layout{
    grid-template-columns:1fr;
    gap:20px;
  }

  #cart .checkout-card{
    position:static;
  }

  #cart .cart-page-header{
    padding:24px;
  }
}

/* ===== PHONE ===== */

@media(max-width:600px){

  #cart{
    padding:6px 0 26px;
  }

  #cart .cart-page-header{
    padding:20px 18px 20px 22px;
    border-radius:18px;
    margin-bottom:18px;
  }

  #cart .cart-page-header h2{
    margin:5px 0 5px;
    font-size:27px;
  }

  #cart .cart-page-header > p:last-child{
    font-size:13px;
  }

  #cart .cart-products-panel{
    border-radius:18px;
  }

  #cart .cart-panel-title{
    padding:16px;
  }

  #cart .cart-panel-title h3{
    font-size:17px;
  }

  #cart .cart-panel-title i{
    width:34px;
    height:34px;
  }

  #cart #cartItems{
    padding:12px;
    gap:12px;
  }

  /* PRODUCT ON PHONE */
  #cart .cart-row{
    grid-template-columns:76px minmax(0,1fr);
    gap:12px;

    padding:13px;

    border-left-width:4px;
    border-radius:15px;
  }

  #cart .cart-item-image{
    width:76px;
    height:76px;
    border-radius:13px;
  }

  #cart .cart-item-category{
    font-size:9px;
    padding:4px 8px;
  }

  #cart .cart-item-name{
    font-size:15px;
    margin-bottom:7px;
  }

  #cart .cart-option-badges{
    gap:5px;
    margin-bottom:8px;
  }

  #cart .cart-option-badges span{
    padding:5px 8px;
    font-size:10px;
  }

  #cart .remove-cart{
    padding:7px 9px;
    font-size:11px;
  }

  #cart .cart-item-price{
    grid-column:2;
    justify-self:start;

    padding:5px 8px;

    font-size:15px;
  }

  /* SUMMARY ON PHONE */
  #cart .checkout-card{
    padding:20px 18px;
    border-radius:18px;
  }

  #cart .checkout-card h3{
    font-size:20px;
    margin-bottom:16px;
  }

  #cart .checkout-card .summary-row{
    font-size:14px;
    padding:9px 0;
  }

  #cart .checkout-card .summary-row.total{
    font-size:17px;
  }

  #cart .checkout-card .total strong{
    font-size:24px;
  }

  #cart .cart-checkout-btn{
    padding:14px;
    font-size:14px;
    border-radius:11px;
  }
}

/* VERY SMALL PHONE */

@media(max-width:380px){

  #cart .cart-row{
    grid-template-columns:64px minmax(0,1fr);
  }

  #cart .cart-item-image{
    width:64px;
    height:64px;
  }

  #cart .cart-item-name{
    font-size:14px;
  }
}
/* ===== SHOP MOBILE 2 COLUMN GRID ===== */

@media(max-width:600px){

  #shop .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  #shop .card{
    min-width:0;
    border-radius:16px;
  }

  #shop .card img,
  #shop .card .placeholder{
    width:100%;
    height:155px;
    object-fit:cover;
  }

  #shop .card-body{
    padding:12px;
  }

  #shop .card .category{
    margin-bottom:6px;
    padding:4px 7px;
    font-size:9px;
  }

  #shop .card h3{
    margin:4px 0 6px;
    font-size:14px;
    line-height:1.25;
  }

  #shop .card p{
    min-height:32px;
    margin:5px 0;
    font-size:11px;
    line-height:1.35;
  }

  #shop .card .price{
    margin:8px 0;
    font-size:16px;
  }

  #shop .card .primary{
    width:100%;
    margin-top:8px;
    padding:10px 7px;
    border-radius:10px;
    font-size:11px;
  }
}

@media(max-width:380px){

  #shop .product-grid{
    gap:8px;
  }

  #shop .card img,
  #shop .card .placeholder{
    height:135px;
  }

  #shop .card-body{
    padding:10px;
  }

  #shop .card h3{
    font-size:13px;
  }
}
/* ===== SHOP MOBILE WIDER PRODUCT CARDS ===== */

@media(max-width:600px){

  #shop .product-grid{
    width:calc(100% + 16px);
    margin-left:-8px;
    gap:8px;
  }

  #shop .card{
    width:100%;
    border-radius:16px;
  }

  #shop .card img,
  #shop .card .placeholder{
    height:170px;
    object-fit:contain;
    background:#f8fafc;
    padding:5px;
  }

}
/* ===== CART QUANTITY CONTROLS ===== */

#cart .cart-quantity{
  display:inline-flex;
  align-items:center;
  gap:0;

  margin:4px 10px 10px 0;

  border:1px solid #dfe5ee;
  border-radius:12px;
  overflow:hidden;

  background:#f8fafc;

  box-shadow:0 4px 12px rgba(15,23,42,.05);
}

#cart .cart-quantity button{
  width:38px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  background:#fff;

  color:#0b2948;

  font-size:20px;
  font-weight:800;

  cursor:pointer;
  transition:.2s ease;
}

#cart .cart-quantity button:hover{
  background:#fff4d4;
  color:#d89400;
}

#cart .qty-value{
  min-width:40px;
  height:36px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-left:1px solid #e5eaf2;
  border-right:1px solid #e5eaf2;

  background:#f8fafc;

  color:#111827;

  font-size:14px;
  font-weight:900;
}

@media(max-width:600px){

  #cart .cart-quantity{
    margin-bottom:8px;
    border-radius:10px;
  }

  #cart .cart-quantity button{
    width:34px;
    height:32px;
    font-size:18px;
  }

  #cart .qty-value{
    min-width:36px;
    height:32px;
    font-size:13px;
  }
}
.card{
  position:relative;
}

.product-share-btn{
  position:absolute;
  top:12px;
  right:12px;

  width:40px;
  height:40px;

  border-radius:50%;
  border:1px solid rgba(0,0,0,.12);

  background:#fff;
  color:#111827;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:16px;
  cursor:pointer;

  box-shadow:0 3px 10px rgba(0,0,0,.14);

  z-index:5;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}

.product-share-btn:hover{
  transform:scale(1.07);
  box-shadow:0 5px 14px rgba(0,0,0,.20);
}

.product-share-btn:active{
  transform:scale(.95);
}
.modal-share-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:12px 18px;
  margin-top:14px;
  margin-right:8px;

  border:1px solid #d1d5db;
  border-radius:10px;

  background:#ffffff;
  color:#111827;

  font-size:15px;
  font-weight:600;

  cursor:pointer;

  transition:
    background .2s ease,
    border-color .2s ease,
    transform .15s ease;
}

.modal-share-btn i{
  font-size:16px;
}

.modal-share-btn:hover{
  background:#f3f4f6;
  border-color:#9ca3af;
}

.modal-share-btn:active{
  transform:scale(.97);
}
#modalProductImage{
  cursor:zoom-in;
}

#modalProductImage.zoomed{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:auto;
  height:auto;
  max-width:92vw;
  max-height:92vh;
  object-fit:contain;
  z-index:10000;
  background:#fff;
  padding:8px;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  cursor:zoom-out;
}
/* ===== JEXALI SHOP MOBILE FINAL HEADER ===== */

@media(max-width:600px){

  #shop .section-head{
    padding:18px;
    margin-bottom:18px;
    border-radius:18px;
    align-items:stretch;
  }

  #shop .section-head > div{
    width:100%;
  }

  #shop .section-head h2{
    font-size:28px;
    margin:4px 0 6px;
  }

  #shop .shop-subtitle{
    font-size:13px;
    line-height:1.45;
  }

  #shop #searchInput{
    width:100%;
    min-width:0;
    margin-top:12px;
    padding:13px 14px;
    font-size:14px;
    border-radius:11px;
  }

}
/* ===== JEXALI SHOP MOBILE FINAL PRODUCT CARDS ===== */

@media(max-width:600px){

  #shop .product-grid{
    width:100%;
    margin-left:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  #shop .card{
    min-width:0;
    border-radius:16px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  #shop .card img,
  #shop .card .placeholder{
    width:100%;
    height:160px;
    padding:0;
    object-fit:contain;
    background:#f8fafc;
  }

  #shop .card-body{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:11px;
  }

  #shop .card .category{
    align-self:flex-start;
    margin-bottom:5px;
    padding:4px 7px;
    font-size:9px;
  }

  #shop .card h3{
    margin:3px 0 6px;
    font-size:14px;
    line-height:1.25;
  }

  #shop .card p{
    min-height:0;
    margin:0 0 7px;
    font-size:11px;
    line-height:1.35;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  #shop .card .price{
    margin:5px 0 8px;
    font-size:16px;
  }

  #shop .card .primary{
    margin-top:auto;
    padding:10px 6px;
    font-size:11px;
    border-radius:10px;
  }

}
/* ===== JEXALI PRODUCT MODAL MOBILE FINAL ===== */

@media(max-width:600px){

  .product-modal{
    padding:8px;
    align-items:flex-start;
  }

  .product-modal-card{
    width:100%;
    max-height:96vh;
    margin-top:2vh;
    border-radius:18px;
    overflow-y:auto;
  }

  .product-modal-grid{
    grid-template-columns:1fr;
  }

  .product-modal-image-wrap{
    min-height:220px;
    padding:18px;
    border-radius:18px 18px 0 0;
  }

  .product-modal-image-wrap img{
    width:100%;
    max-width:100%;
    max-height:280px;
    object-fit:contain;
    border-radius:14px;
  }

  .product-modal-info{
    padding:20px 16px 18px;
  }

  #modalProductName{
    font-size:23px;
    line-height:1.2;
    margin-bottom:9px;
  }

  .product-modal-description{
    font-size:13px;
    line-height:1.5;
    margin-bottom:12px;
  }

  .product-modal-price{
    font-size:24px;
    margin-bottom:14px;
  }

  .product-option-group{
    margin-bottom:14px;
  }

  .product-option-list{
    gap:7px;
  }

  .product-option-btn{
    min-width:42px;
    padding:9px 11px;
    font-size:12px;
  }

  .modal-share-btn,
  .product-modal-cart{
    width:100%;
    margin-right:0;
  }

  .product-modal-close{
    top:10px;
    right:10px;
    width:38px;
    height:38px;
    font-size:22px;
  }

}
/* ===== JEXALI CART MOBILE FINAL PRODUCT ROWS ===== */

@media(max-width:600px){

  #cart #cartItems{
    padding:10px;
    gap:10px;
  }

  #cart .cart-row{
    grid-template-columns:82px minmax(0,1fr);
    gap:12px;
    padding:12px;
    border-radius:15px;
    align-items:start;
  }

  #cart .cart-item-image{
    width:82px;
    height:82px;
    border-radius:13px;
  }

  #cart .cart-item-info{
    min-width:0;
  }

  #cart .cart-item-name{
    font-size:15px;
    line-height:1.3;
    margin-bottom:7px;
  }

  #cart .cart-option-badges{
    gap:5px;
    margin-bottom:8px;
  }

  #cart .cart-option-badges span{
    padding:5px 7px;
    font-size:10px;
  }

  #cart .cart-quantity{
    margin:3px 8px 8px 0;
  }

  #cart .remove-cart{
    padding:7px 9px;
    font-size:11px;
  }

  #cart .cart-item-price{
    grid-column:2;
    justify-self:start;
    margin-top:2px;
    padding:5px 8px;
    font-size:15px;
  }

}
/* ===== JEXALI CART MOBILE FINAL SUMMARY ===== */

@media(max-width:600px){

  #cart .checkout-card{
    width:100%;
    padding:18px;
    border-radius:18px;
    position:static;
  }

  #cart .checkout-card h3{
    margin-bottom:14px;
    font-size:20px;
  }

  #cart .checkout-card .summary-row{
    padding:9px 0;
    font-size:14px;
  }

  #cart .checkout-card .summary-row.total{
    padding-top:13px;
    font-size:17px;
  }

  #cart .checkout-card .total strong{
    font-size:23px;
  }

  #cart .cart-checkout-btn{
    width:100%;
    min-height:48px;
    margin-top:14px;
    padding:14px;
    border-radius:12px;
    font-size:14px;
  }

  #cart .secure-checkout-text{
    margin-top:12px;
    font-size:11px;
    line-height:1.4;
  }

}
/* ===== SHOP MOBILE MORE SQUARE CARDS ===== */

@media(max-width:600px){

  #shop .card img,
  #shop .card .placeholder{
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;
    object-fit:contain;
    background:#f8fafc;
  }

  #shop .card p{
    display:none;
  }

}
/* ===== SHOP MOBILE BIGGER PRODUCT IMAGE ===== */

@media(max-width:600px){

  #shop .card img{
    transform:scale(1.10);
    transform-origin:center;
  }

}
/* ===== FEATURED PRODUCTS MOBILE BIGGER IMAGES ===== */

@media(max-width:600px){

  .featured-image{
    height:105px;
  }

  .featured-image img{
    object-fit:contain;
    transform:scale(1.10);
    transform-origin:center;
    background:#f8fafc;
  }

}
/* ===== FEATURED PRODUCTS MOBILE LARGE FINAL ===== */

@media(max-width:600px){

  .featured-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .featured-card{
    padding:8px;
    border-radius:16px;
  }

  .featured-image{
    width:100%;
    height:165px;
    margin-bottom:10px;
    overflow:hidden;
    border-radius:13px;
    background:#f8fafc;
  }

  .featured-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform:scale(1.18);
    transform-origin:center;
  }

  .featured-card h3{
    font-size:13px;
    line-height:1.25;
    min-height:auto;
    margin-bottom:6px;
  }

  .featured-price{
    font-size:15px;
    margin:5px 0 8px;
  }

  .product-category{
    font-size:9px;
  }

  .featured-card button{
    padding:9px 6px;
    font-size:11px;
  }

}
/* ===== SHOP MOBILE LARGE PRODUCT IMAGES FINAL ===== */

@media(max-width:600px){

  #shop .card img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform:scale(1.18);
    transform-origin:center;
  }

}
/* ===== JEXALI MOBILE EXTRA LARGE PRODUCT IMAGES ===== */

@media(max-width:600px){

  /* SHOP */
  #shop .card img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform:scale(1.30);
    transform-origin:center;
  }

  /* FEATURED PRODUCTS */
  .featured-image{
    height:200px;
  }

  .featured-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transform:scale(1.30);
    transform-origin:center;
  }

}
/* ===== SHOP BY CATEGORY IMAGE ZOOM ===== */

.category-photo{
  cursor:zoom-in;
}

.category-photo.category-zoomed{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);

  width:90vw;
  height:85vh;

  margin:0;
  z-index:10000;

  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#fff;

  border-radius:18px;

  box-shadow:
    0 0 0 100vmax rgba(0,0,0,.72),
    0 20px 60px rgba(0,0,0,.35);

  cursor:zoom-out;
}
/* ===== CATEGORY ZOOM MOBILE FINAL ===== */

@media(max-width:600px){

  .category-photo.category-zoomed{
    width:94vw;
    height:72vh;

    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;

    border-radius:20px;
    padding:10px;
  }

}
/* ===== SHOP MOBILE IMAGE SIZE FINAL BOOST ===== */

@media(max-width:600px){

  #shop .card img{
    transform:scale(1.42);
  }

}
/* ===== FEATURED PRODUCTS MOBILE IMAGE SIZE FINAL BOOST ===== */

@media(max-width:600px){

  .featured-image{
    height:220px;
  }

  .featured-image img{
    transform:scale(1.42);
  }

}
/* ===== MOBILE FULL PRODUCT VISIBILITY FINAL ===== */

@media(max-width:600px){

  /* SHOP PRODUCTS */
  #shop .card img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    transform:none;
    padding:2px;
  }

  #shop .card img,
  #shop .card .placeholder{
    aspect-ratio:1 / 1;
    height:auto;
    background:#f8fafc;
  }

  /* FEATURED PRODUCTS */
  .featured-image{
    width:100%;
    height:230px;
    background:#f8fafc;
    overflow:hidden;
  }

  .featured-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    transform:none;
    padding:2px;
  }

}
/* ===== MOBILE PRODUCT IMAGES FILL SQUARE FINAL ===== */

@media(max-width:600px){

  /* SHOP */
  #shop .card{
    overflow:hidden;
  }

  #shop .card img{
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;

    object-fit:cover;
    object-position:center;

    transform:scale(1.12);
    transform-origin:center;

    padding:0;
    background:#f8fafc;
  }

  /* FEATURED PRODUCTS */
  .featured-image{
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;

    overflow:hidden;
    border-radius:14px;
    background:#f8fafc;
  }

  .featured-image img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:scale(1.12);
    transform-origin:center;

    padding:0;
  }

}
/* ===== BUYER REFUND STATUS COLORS ===== */

.buyer-refund-status.refund-declined{
  background:#fee2e2;
  color:#b91c1c;
  border:1px solid #fecaca;
}

.buyer-refund-status.refund-approved,
.buyer-refund-status.refund-refunded{
  background:#dcfce7;
  color:#15803d;
  border:1px solid #bbf7d0;
}
/* =========================================================
   JEXALI PREMIUM DESIGN — HEADER + HOME FINAL
   ========================================================= */

:root{
  --jx-navy:#07152f;
  --jx-navy-soft:#10264f;
  --jx-gold:#f4b522;
  --jx-gold-light:#ffd568;
  --jx-blue:#2563eb;
  --jx-bg:#f5f7fb;
  --jx-card:#ffffff;
  --jx-text:#111827;
  --jx-muted:#667085;
  --jx-border:#e6eaf0;
  --jx-shadow:0 18px 45px rgba(7,21,47,.09);
  --jx-shadow-hover:0 24px 55px rgba(7,21,47,.15);
}

/* ================= HEADER ================= */

.topbar{
  min-height:76px;
  padding:10px 5%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:nowrap;

  background:rgba(7,21,47,.97);
  backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(255,255,255,.08);

  box-shadow:
    0 8px 28px rgba(4,12,30,.18);
}

.brand{
  flex-shrink:0;
}

.brand-logo{
  width:165px;
  max-height:58px;
  object-fit:contain;
}

.topbar .main-nav{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
}

.topbar .main-nav button{
  position:relative;

  padding:10px 13px;

  border:0;
  border-radius:10px;

  background:transparent;
  color:#e8edf7;

  font-size:14px;
  font-weight:700;

  transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;
}

.topbar .main-nav button:hover{
  background:rgba(255,255,255,.09);
  color:#fff;
  transform:translateY(-1px);
}

.topbar .cart-button{
  min-height:44px;
  padding:10px 15px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border-radius:12px;

  background:linear-gradient(
    135deg,
    var(--jx-gold),
    var(--jx-gold-light)
  );

  color:#09162e;

  font-weight:900;

  box-shadow:
    0 9px 20px rgba(244,181,34,.22);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.topbar .cart-button:hover{
  background:linear-gradient(
    135deg,
    #ffc535,
    #ffdf7e
  );

  transform:translateY(-2px);

  box-shadow:
    0 13px 26px rgba(244,181,34,.30);
}

#cartCount{
  background:#07152f;
  color:#fff;
}

/* ================= HOME BACKGROUND ================= */

#home{
  position:relative;
}

#home::before{
  content:"";
  position:absolute;
  inset:-40px -20px auto -20px;
  height:520px;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(37,99,235,.09),
      transparent 35%
    ),
    radial-gradient(
      circle at 88% 20%,
      rgba(244,181,34,.13),
      transparent 32%
    );

  pointer-events:none;
  z-index:-1;
}

/* ================= HERO ================= */

#home .hero{
  position:relative;

  margin-top:24px;

  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(380px,.95fr);
  gap:46px;
  align-items:center;

  min-height:540px;

  padding:64px;

  overflow:hidden;

  border:1px solid #dfe5ef;
  border-radius:32px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8fbff 58%,
      #fff9ea 100%
    );

  box-shadow:
    0 24px 70px rgba(7,21,47,.09);
}

#home .hero::after{
  content:"";

  position:absolute;
  right:-110px;
  bottom:-130px;

  width:360px;
  height:360px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(244,181,34,.20),
      transparent 68%
    );

  pointer-events:none;
}

#home .hero-content{
  position:relative;
  z-index:2;
  max-width:650px;
}

#home .hero-content .eyebrow{
  display:inline-flex;
  align-items:center;

  margin-bottom:12px;

  padding:7px 12px;

  border:1px solid #f1ddaa;
  border-radius:999px;

  background:#fff9e8;

  color:#8b6411;

  font-size:11px;
  font-weight:900;
  letter-spacing:1.6px;
}

#home .hero-content h1{
  margin:8px 0 20px;

  max-width:620px;

  color:var(--jx-navy);

  font-size:clamp(46px,5.4vw,70px);
  line-height:1.02;

  font-weight:950;
  letter-spacing:-2.3px;
}

#home .hero-content h1 span{
  color:#d99500;
}

#home .hero-text{
  max-width:560px;

  margin:0;

  color:#5f6878;

  font-size:17px;
  line-height:1.75;
}

#home .actions{
  display:flex;
  align-items:center;
  gap:12px;

  margin-top:28px;
}

#home .actions .primary,
#home .actions .secondary{
  min-height:50px;

  padding:14px 23px;

  border-radius:13px;

  font-size:14px;
  font-weight:900;
}

#home .actions .primary{
  background:var(--jx-navy);
  color:#fff;

  box-shadow:
    0 11px 24px rgba(7,21,47,.20);
}

#home .actions .primary:hover{
  background:#10264f;
}

#home .actions .secondary{
  border:1px solid #efcf77;

  background:linear-gradient(
    135deg,
    var(--jx-gold),
    var(--jx-gold-light)
  );

  color:#111827;
}

/* ================= HERO IMAGE ================= */

#home .hero-image{
  position:relative;

  grid-column:2;
  grid-row:1;

  width:100%;
  height:430px;

  overflow:hidden;

  border:8px solid #fff;
  border-radius:28px;

  background:#eef2f7;

  box-shadow:
    0 24px 48px rgba(7,21,47,.17);
}

#home .hero-image::after{
  content:"";

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 62%,
      rgba(7,21,47,.12)
    );

  pointer-events:none;
}

#home .hero-image img{
  width:100%;
  height:100%;

  display:block;

  object-fit:cover;
  object-position:center;

  transition:transform .5s ease;
}

#home .hero-image:hover img{
  transform:scale(1.025);
}

/* Hide older hero secondary cards if still present */

#home .hero-visual,
#home .hero-card{
  display:none;
}

/* ================= BENEFITS ================= */

#home .features{
  margin-top:22px;

  display:grid;
  grid-template-columns:repeat(4,1fr);

  overflow:hidden;

  border:1px solid var(--jx-border);
  border-radius:22px;

  background:#fff;

  box-shadow:
    0 14px 38px rgba(7,21,47,.06);
}

#home .features article{
  position:relative;

  padding:25px 20px;

  border:0;

  background:#fff;

  text-align:left;
}

#home .features article + article{
  border-left:1px solid #edf0f4;
}

#home .feature-icon{
  width:46px;
  height:46px;

  margin:0 0 13px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:13px;

  background:#f4f7fb;
}

#home .features h3{
  margin:0 0 7px;

  color:var(--jx-navy);

  font-size:15px;
  font-weight:900;
}

#home .features p{
  margin:0;

  color:#7a8290;

  font-size:12px;
  line-height:1.5;
}

/* ================= SECTION HEADINGS ================= */

#home .trending-section,
#home .featured-products,
#home .shop-categories{
  margin-top:68px;
}

#home .trending-head,
#home .featured-heading,
#home .category-heading{
  margin-bottom:24px;
}

#home .trending-head h2,
#home .featured-heading h2,
#home .category-heading h2{
  color:var(--jx-navy);

  font-size:32px;
  font-weight:900;
  letter-spacing:-.7px;
}

#home .trending-head p,
#home .category-heading p:last-child{
  color:var(--jx-muted);
}

/* ================= TRENDING ================= */

#home .trending-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}

#home .trending-card{
  min-width:0;

  padding:9px;

  border:1px solid var(--jx-border);
  border-radius:19px;

  background:#fff;

  box-shadow:
    0 8px 22px rgba(7,21,47,.05);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

#home .trending-card:hover{
  transform:translateY(-5px);

  box-shadow:
    0 18px 34px rgba(7,21,47,.11);
}

#home .trending-photo{
  height:175px;

  border-radius:14px;

  transition:transform .3s ease;
}

#home .trending-card h3{
  margin:12px 5px 4px;

  color:var(--jx-navy);

  font-size:14px;
  font-weight:900;
}

#home .trending-card p{
  margin:0 5px 7px;

  color:#7b8494;

  font-size:11px;
}

/* ================= FEATURED PRODUCTS ================= */

#home .featured-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

#home .featured-card{
  padding:10px;

  overflow:hidden;

  border:1px solid var(--jx-border);
  border-radius:22px;

  background:#fff;

  box-shadow:
    0 10px 28px rgba(7,21,47,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

#home .featured-card:hover{
  transform:translateY(-6px);

  box-shadow:
    var(--jx-shadow-hover);
}

#home .featured-image{
  width:100%;
  aspect-ratio:1 / 1;

  height:auto;

  overflow:hidden;

  border-radius:16px;

  background:#f4f6fa;
}

#home .featured-image img{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  transform:none;
}

#home .product-category{
  margin:13px 4px 7px;

  color:#6a7484;

  font-size:10px;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:.7px;
}

#home .featured-card h3{
  margin:0 4px 7px;

  color:var(--jx-navy);

  font-size:16px;
  line-height:1.3;

  font-weight:850;
}

#home .featured-price{
  margin:0 4px 13px;

  color:#d88700;

  font-size:19px;
  font-weight:950;
}

#home .featured-card button{
  min-height:43px;

  border-radius:12px;

  background:var(--jx-navy);

  font-weight:900;

  transition:
    transform .2s ease,
    background .2s ease;
}

#home .featured-card button:hover{
  background:#132957;
  transform:translateY(-1px);
}

/* ================= SHOP BY CATEGORY ================= */

#home .category-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

#home .category-card{
  padding:10px;

  border:1px solid var(--jx-border);
  border-radius:22px;

  background:#fff;

  box-shadow:
    0 10px 28px rgba(7,21,47,.06);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

#home .category-card:hover{
  transform:translateY(-6px);

  box-shadow:
    var(--jx-shadow-hover);
}

#home .category-photo{
  height:205px;

  margin-bottom:13px;

  border-radius:16px;
}

#home .category-card h3{
  margin:0 5px 12px;

  color:var(--jx-navy);

  font-size:17px;
  font-weight:900;
}

#home .category-card button{
  min-height:42px;

  border-radius:12px;

  background:#f3f6fb;
  color:var(--jx-navy);

  font-weight:900;

  transition:
    background .2s ease,
    color .2s ease;
}

#home .category-card button:hover{
  background:var(--jx-navy);
  color:#fff;
}

/* ================= HOME ACCOUNT ================= */

#accountSection{
  margin-top:72px;

  padding:34px;

  border:1px solid var(--jx-border);
  border-radius:28px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f7f9fd 100%
    );

  box-shadow:
    0 20px 50px rgba(7,21,47,.08);
}

#accountSection .account-intro h2{
  color:var(--jx-navy);
}

#accountSection .register-box,
#accountSection .login-box{
  border:1px solid var(--jx-border);
  border-radius:20px;

  box-shadow:none;
}

#accountSection input,
#accountSection select{
  border-radius:12px;
}

#registerBtn{
  background:linear-gradient(
    135deg,
    var(--jx-gold),
    var(--jx-gold-light)
  ) !important;

  color:#111827 !important;
}

#loginBtn{
  background:var(--jx-navy) !important;
}

/* ================= HOME MOBILE ================= */

@media(max-width:800px){

  .topbar{
    padding:10px 4%;
    gap:10px;
    flex-wrap:wrap;
  }

  .brand-logo{
    width:135px;
  }

  .topbar .main-nav{
    order:3;

    width:100%;
    flex-basis:100%;

    justify-content:flex-start;

    overflow-x:auto;

    padding-bottom:2px;

    scrollbar-width:none;
  }

  .topbar .main-nav::-webkit-scrollbar{
    display:none;
  }

  .topbar .main-nav button{
    flex:0 0 auto;
    padding:8px 10px;
    font-size:12px;
  }

  .topbar .cart-button{
    margin-left:auto;

    min-height:40px;

    padding:9px 12px;

    font-size:12px;
  }

  #home .hero{
    min-height:auto;

    grid-template-columns:1fr 1fr;
    gap:16px;

    padding:25px 18px;

    border-radius:22px;
  }

  #home .hero-content{
    grid-column:1;
    grid-row:1;
  }

  #home .hero-image{
    grid-column:2;
    grid-row:1;

    height:285px;

    border-width:5px;
    border-radius:18px;
  }

  #home .hero-content .eyebrow{
    padding:5px 8px;

    font-size:8px;
    letter-spacing:1px;
  }

  #home .hero-content h1{
    margin:6px 0 12px;

    font-size:31px;
    line-height:1.04;
    letter-spacing:-1px;
  }

  #home .hero-text{
    font-size:12px;
    line-height:1.5;
  }

  #home .actions{
    margin-top:16px;
    gap:7px;
  }

  #home .actions .primary,
  #home .actions .secondary{
    min-height:40px;

    padding:9px 10px;

    font-size:11px;
  }

  #home .features{
    grid-template-columns:repeat(4,1fr);
  }

  #home .features article{
    padding:13px 6px;

    text-align:center;
  }

  #home .feature-icon{
    width:32px;
    height:32px;

    margin:0 auto 8px;
  }

  #home .features h3{
    font-size:10px;
  }

  #home .features p{
    font-size:8px;
  }

  #home .trending-section,
  #home .featured-products,
  #home .shop-categories{
    margin-top:44px;
  }

  #home .trending-head h2,
  #home .featured-heading h2,
  #home .category-heading h2{
    font-size:25px;
  }

  #home .trending-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px;
  }

  #home .trending-card{
    padding:4px;
    border-radius:11px;
  }

  #home .trending-photo{
    height:84px;
    border-radius:8px;
  }

  #home .trending-card h3{
    margin:6px 2px 2px;
    font-size:8px;
  }

  #home .trending-card p{
    margin:0 2px 4px;
    font-size:7px;
  }

  #home .featured-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  #home .featured-card{
    border-radius:16px;
    padding:7px;
  }

  #home .featured-image{
    border-radius:12px;
  }

  #home .featured-image img{
    object-fit:cover;
    transform:scale(1.08);
  }

  #home .featured-card h3{
    font-size:13px;
  }

  #home .featured-price{
    font-size:15px;
  }

  #home .featured-card button{
    min-height:38px;
    padding:8px;
    font-size:11px;
  }

  #home .category-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  #home .category-card{
    border-radius:16px;
    padding:7px;
  }

  #home .category-photo{
    height:135px;
    border-radius:12px;
  }

  #home .category-card h3{
    font-size:14px;
  }

  #accountSection{
    margin-top:48px;
    padding:22px 16px;
    border-radius:22px;
  }
}

@media(max-width:380px){

  #home .hero{
    gap:11px;
    padding:20px 13px;
  }

  #home .hero-content h1{
    font-size:27px;
  }

  #home .hero-image{
    height:245px;
  }
}
/* ===== HEADER TEXT SIZE BOOST ===== */

.topbar .main-nav button{
  font-size:15px;
}

@media(max-width:800px){
  .topbar .main-nav button{
    font-size:13px;
  }
}
/* =========================================================
   JEXALI PREMIUM DESIGN — SHOP FINAL
   ========================================================= */

#shop{
  padding-top:22px;
}

/* ===== SHOP HEADER ===== */

#shop .section-head{
  position:relative;
  overflow:hidden;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;

  padding:34px 36px;
  margin-bottom:30px;

  border:1px solid #e3e8f0;
  border-radius:26px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f5f9ff 65%,
      #fff8e7 100%
    );

  box-shadow:
    0 18px 44px rgba(7,21,47,.08);
}

#shop .section-head::before{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:7px;
  height:100%;

  background:
    linear-gradient(
      180deg,
      #f4b522,
      #ff8a1f
    );
}

#shop .section-head > div{
  position:relative;
  z-index:1;
}

#shop .section-head .eyebrow{
  margin:0 0 6px;

  color:#9a6900;

  font-size:11px;
  font-weight:900;
  letter-spacing:1.7px;
}

#shop .section-head h2{
  margin:4px 0 7px;

  color:#07152f;

  font-size:36px;
  font-weight:950;
  letter-spacing:-1px;
}

#shop .shop-subtitle{
  margin:0;

  color:#697386;

  font-size:14px;
  line-height:1.5;
}

/* ===== SEARCH ===== */

#shop #searchInput{
  width:min(340px,100%);
  min-width:300px;
  height:50px;

  padding:0 18px;

  border:1px solid #d9e0ea;
  border-radius:14px;

  background:#fff;

  color:#111827;

  font-size:14px;

  outline:none;

  box-shadow:
    0 6px 18px rgba(7,21,47,.05);

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

#shop #searchInput:focus{
  border-color:#2f6bff;

  box-shadow:
    0 0 0 4px rgba(47,107,255,.10),
    0 8px 20px rgba(7,21,47,.06);
}

/* ===== PRODUCT GRID ===== */

#shop .product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

/* ===== PRODUCT CARD ===== */

#shop .card{
  position:relative;

  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:1px solid #e5eaf1;
  border-radius:24px;

  background:#fff;

  box-shadow:
    0 10px 30px rgba(7,21,47,.07);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

#shop .card:hover{
  transform:translateY(-6px);

  border-color:#d8dee8;

  box-shadow:
    0 22px 44px rgba(7,21,47,.13);
}

/* ===== PRODUCT IMAGE ===== */

#shop .card > img,
#shop .card > .placeholder{
  width:100%;
  aspect-ratio:1 / 1;
  height:auto;

  display:block;

  object-fit:cover;
  object-position:center;

  background:#f6f8fb;
}

/* ===== PRODUCT INFO ===== */

#shop .card-body{
  flex:1;

  display:flex;
  flex-direction:column;

  padding:19px;
}

#shop .card .category{
  align-self:flex-start;

  margin:0 0 9px;

  padding:6px 10px;

  border-radius:999px;

  background:#eef4ff;
  color:#2f6bff;

  font-size:10px;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:.6px;
}

#shop .card h3{
  margin:0 0 8px;

  color:#07152f;

  font-size:18px;
  font-weight:900;
  line-height:1.3;
}

#shop .card p{
  margin:0 0 12px;

  color:#737c8d;

  font-size:13px;
  line-height:1.55;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

#shop .card .price{
  margin:auto 0 12px;

  color:#d98900;

  font-size:22px;
  font-weight:950;
}

/* ===== ADD TO CART ===== */

#shop .card .primary{
  width:100%;
  min-height:46px;

  margin-top:4px;
  padding:12px 15px;

  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #07152f,
      #132957
    );

  color:#fff;

  font-size:13px;
  font-weight:900;

  box-shadow:
    0 8px 18px rgba(7,21,47,.16);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

#shop .card .primary:hover{
  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #10264f,
      #1b3972
    );

  box-shadow:
    0 12px 24px rgba(7,21,47,.22);
}

/* ===== SHARE BUTTON ===== */

#shop .product-share-btn{
  top:13px;
  right:13px;

  width:42px;
  height:42px;

  border:1px solid rgba(7,21,47,.10);
  border-radius:50%;

  background:rgba(255,255,255,.94);
  color:#07152f;

  box-shadow:
    0 7px 18px rgba(7,21,47,.13);

  backdrop-filter:blur(8px);
}

#shop .product-share-btn:hover{
  background:#07152f;
  color:#fff;

  transform:scale(1.06);
}

/* ===== TABLET ===== */

@media(max-width:950px){

  #shop .product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

/* ===== MOBILE ===== */

@media(max-width:600px){

  #shop{
    padding-top:8px;
  }

  #shop .section-head{
    display:block;

    padding:22px 18px 20px 23px;
    margin-bottom:18px;

    border-radius:20px;
  }

  #shop .section-head h2{
    font-size:29px;
  }

  #shop .shop-subtitle{
    font-size:12px;
  }

  #shop #searchInput{
    width:100%;
    min-width:0;
    height:46px;

    margin-top:16px;

    font-size:13px;
  }

  #shop .product-grid{
    width:100%;
    margin:0;

    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
  }

  #shop .card{
    min-width:0;

    border-radius:17px;
  }

  #shop .card > img,
  #shop .card > .placeholder{
    width:100%;
    aspect-ratio:1 / 1;
    height:auto;

    object-fit:cover;
    object-position:center;

    transform:none;
    padding:0;
  }

  #shop .card-body{
    padding:11px;
  }

  #shop .card .category{
    margin-bottom:6px;

    padding:4px 7px;

    font-size:8px;
  }

  #shop .card h3{
    margin-bottom:6px;

    font-size:14px;
    line-height:1.25;
  }

  #shop .card p{
    display:none;
  }

  #shop .card .price{
    margin:5px 0 9px;

    font-size:17px;
  }

  #shop .card .primary{
    min-height:39px;

    padding:9px 5px;

    border-radius:10px;

    font-size:10px;
  }

  #shop .product-share-btn{
    top:8px;
    right:8px;

    width:34px;
    height:34px;

    font-size:13px;
  }

}
/* ===== SHOP PRODUCT IMAGES FULL VIEW FINAL ===== */

#shop .card > img,
#shop .card > .placeholder{
  width:100%;
  height:300px;
  aspect-ratio:auto;

  object-fit:contain;
  object-position:center;

  transform:none;
  padding:4px;

  background:#ffffff;
}

@media(max-width:600px){

  #shop .card > img,
  #shop .card > .placeholder{
    width:100%;
    height:190px;

    object-fit:contain;
    object-position:center;

    transform:none;
    padding:3px;

    background:#ffffff;
  }

}
/* ===== MOBILE PRODUCT IMAGES FULL CARD - NO WHITE SPACE ===== */
@media (max-width:600px){

  /* SHOP PRODUCT CARDS */
  #shop .card{
    overflow:hidden;
  }

  #shop .card img,
  #shop .card .placeholder{
    width:100%;
    height:190px;
    aspect-ratio:auto;
    object-fit:cover;
    object-position:center;
    display:block;
    background:#f8fafc;
    padding:0;
    margin:0;
    transform:scale(1.18);
    transform-origin:center;
  }

  /* FEATURED PRODUCT CARDS */
  .featured-card{
    overflow:hidden;
  }

  .featured-image{
    width:100%;
    height:190px;
    aspect-ratio:auto;
    overflow:hidden;
    background:#f8fafc;
    border-radius:14px;
  }

  .featured-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
    padding:0;
    margin:0;
    transform:scale(1.18);
    transform-origin:center;
  }
}
/* ===== MOBILE CATEGORY CARDS TEMU STYLE ===== */

@media(max-width:600px){

  #home .category-card{
    padding:0;
    overflow:hidden;
  }

  #home .category-photo{
    width:100%;
    height:185px;

    margin:0 0 12px;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    border-radius:0;
  }

  #home .category-card h3{
    padding:0 10px;
    margin:0 0 10px;
  }

  #home .category-card button{
    width:calc(100% - 20px);
    margin:0 10px 10px;
  }

}
/* ===== SHOP BY CATEGORY MOBILE - BIGGER IMAGES FINAL ===== */

@media(max-width:600px){

  .category-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  .category-card{
    padding:8px;
    border-radius:16px;
    overflow:hidden;
  }

  .category-photo{
    width:100%;
    height:185px;   /* ogmante wotè imaj la */
    margin-bottom:10px;
    border-radius:14px;

    background-size:cover;      /* fè imaj la ranpli card la */
    background-position:center; /* kenbe sant la byen */
    background-repeat:no-repeat;
  }

  .category-card h3{
    font-size:14px;
    margin:4px 0 8px;
    line-height:1.2;
  }

  .category-card button{
    padding:9px 6px;
    font-size:11px;
    border-radius:10px;
  }
}
/* ===== SHOP MOBILE PRODUCT IMAGES EXTRA FULL ===== */

@media(max-width:600px){

  #shop .card img{
    width:100%;
    height:210px;

    object-fit:cover;
    object-position:center;

    transform:scale(1.25);
    transform-origin:center;

    padding:0;
    margin:0;
  }

}
/* ===== SHOP MOBILE FINAL FIX: FULL IMAGE + CATEGORY VISIBLE ===== */
@media(max-width:600px){

  #shop .product-grid{
    width:100%;
    margin-left:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  #shop .card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border-radius:16px;
  }

  /* fè tout imaj la parèt nèt */
  #shop .card img,
  #shop .card .placeholder{
    width:100%;
    height:190px;
    object-fit:contain;
    object-position:center;
    background:#f8fafc;
    padding:6px;
    transform:none !important;
    aspect-ratio:auto !important;
  }

  #shop .card-body{
    display:flex;
    flex-direction:column;
    padding:10px;
  }

  /* category yo pou yo toujou vizib */
  #shop .card .category{
    display:inline-flex;
    align-self:flex-start;
    margin-bottom:6px;
    padding:4px 8px;
    font-size:10px;
    line-height:1.2;
    white-space:nowrap;
  }

  #shop .card h3{
    margin:0 0 6px;
    font-size:14px;
    line-height:1.25;
  }

  /* kite description la kout pou category ak title rete vizib */
  #shop .card p{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0 0 8px;
    font-size:11px;
    line-height:1.35;
  }

  #shop .card .price{
    margin:4px 0 8px;
    font-size:16px;
  }

  #shop .card .primary{
    margin-top:auto;
    padding:10px 8px;
    font-size:11px;
    border-radius:10px;
  }
}
/* ===== MOBILE PRODUCT IMAGES BIG + FULL FINAL ===== */
@media(max-width:600px){

  /* SHOP PRODUCTS */
  #shop .card{
    overflow:hidden;
  }

  #shop .card img,
  #shop .card .placeholder{
    width:100%;
    height:220px;

    display:block;

    object-fit:cover;
    object-position:center;

    padding:0;
    margin:0;

    transform:none !important;

    background:#f8fafc;
  }

  #shop .card-body{
    position:relative;
    z-index:2;

    padding:11px;

    background:#fff;
  }

  #shop .card .category{
    position:relative;
    z-index:3;

    display:inline-flex;

    margin:0 0 7px;

    font-size:10px;
  }


  /* FEATURED PRODUCTS */
  #home .featured-card{
    overflow:hidden;
  }

  #home .featured-image{
    width:100%;
    height:220px;

    margin:0;

    overflow:hidden;

    border-radius:14px 14px 0 0;

    background:#f8fafc;
  }

  #home .featured-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

    padding:0;
    margin:0;

    transform:none !important;
  }

  #home .featured-card{
    padding:0 0 8px;
  }

  #home .featured-card .product-category,
  #home .featured-card h3,
  #home .featured-card .featured-price{
    margin-left:10px;
    margin-right:10px;
  }

  #home .featured-card button{
    width:calc(100% - 20px);
    margin-left:10px;
    margin-right:10px;
  }

}
/* =========================================================
   JEXALI PREMIUM PRODUCT MODAL FINAL
   ========================================================= */

.product-modal-overlay{
  background:rgba(5,15,35,.76);
  backdrop-filter:blur(7px);
}

.product-modal-card{
  width:min(980px,96%);
  max-height:92vh;

  overflow-y:auto;

  border:1px solid rgba(255,255,255,.18);
  border-radius:28px;

  background:#fff;

  box-shadow:
    0 35px 90px rgba(0,0,0,.32);
}

.product-modal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
}

/* IMAGE SIDE */

.product-modal-image-wrap{
  min-height:540px;

  padding:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      145deg,
      #f7f9fc,
      #edf2f8
    );

  border-radius:28px 0 0 28px;
}

.product-modal-image-wrap img{
  width:100%;
  max-width:420px;
  max-height:480px;

  object-fit:contain;
  object-position:center;

  border-radius:20px;

  background:#fff;

  box-shadow:
    0 18px 38px rgba(7,21,47,.10);
}

/* DETAILS SIDE */

.product-modal-info{
  padding:46px 38px 38px;
}

.product-modal-category{
  display:inline-flex;

  margin-bottom:12px;

  padding:7px 11px;

  border-radius:999px;

  background:#eef4ff;
  color:#2563eb;

  font-size:11px;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:.7px;
}

#modalProductName{
  margin:0 0 12px;

  color:#07152f;

  font-size:32px;
  line-height:1.15;
  font-weight:950;
}

.product-modal-description{
  margin-bottom:17px;

  color:#687386;

  font-size:14px;
  line-height:1.7;
}

.product-modal-price{
  margin-bottom:24px;

  color:#d98900;

  font-size:30px;
  font-weight:950;
}

/* OPTIONS */

.product-option-group{
  margin:20px 0;
}

.product-option-group h4{
  margin:0 0 10px;

  color:#07152f;

  font-size:14px;
  font-weight:900;
}

.product-option-list{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.product-option-btn{
  min-width:46px;

  padding:10px 14px;

  border:1px solid #d9e0ea;
  border-radius:11px;

  background:#fff;
  color:#344054;

  font-size:13px;
  font-weight:800;

  cursor:pointer;

  transition:.2s ease;
}

.product-option-btn:hover{
  border-color:#f4b522;
  background:#fffaf0;
}

.product-option-btn.selected{
  border-color:#f4b522;

  background:
    linear-gradient(
      135deg,
      #f4b522,
      #ffd568
    );

  color:#111827;

  box-shadow:
    0 7px 16px rgba(244,181,34,.24);
}

/* ADD TO CART */

.product-modal-cart{
  width:100%;
  min-height:50px;

  margin-top:10px;

  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #07152f,
      #132957
    );

  color:#fff;

  font-weight:900;

  box-shadow:
    0 11px 24px rgba(7,21,47,.18);
}

/* SHARE */

.modal-share-btn{
  min-height:45px;

  border:1px solid #dce2eb;
  border-radius:12px;

  background:#f8fafc;
  color:#07152f;

  font-weight:800;
}

/* CLOSE */

.product-modal-close{
  width:42px;
  height:42px;

  top:14px;
  right:14px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(255,255,255,.96);
  color:#07152f;

  box-shadow:
    0 7px 20px rgba(7,21,47,.14);
}

/* ================= MOBILE ================= */

@media(max-width:600px){

  .product-modal{
    padding:7px;
    align-items:flex-start;
  }

  .product-modal-card{
    width:100%;
    max-height:96vh;

    margin-top:2vh;

    border-radius:20px;
  }

  .product-modal-grid{
    grid-template-columns:1fr;
  }

  .product-modal-image-wrap{
    min-height:0;
    height:310px;

    padding:12px;

    border-radius:20px 20px 0 0;

    background:#f5f7fa;
  }

  .product-modal-image-wrap img{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;

    object-fit:contain;
    object-position:center;

    border-radius:14px;

    box-shadow:none;
  }

  .product-modal-info{
    padding:20px 16px 18px;
  }

  .product-modal-category{
    margin-bottom:8px;

    padding:5px 9px;

    font-size:9px;
  }

  #modalProductName{
    margin-bottom:8px;

    font-size:23px;
  }

  .product-modal-description{
    margin-bottom:11px;

    font-size:12px;
    line-height:1.5;
  }

  .product-modal-price{
    margin-bottom:16px;

    font-size:25px;
  }

  .product-option-group{
    margin:14px 0;
  }

  .product-option-list{
    gap:7px;
  }

  .product-option-btn{
    min-width:42px;

    padding:9px 11px;

    font-size:11px;
  }

  .product-modal-cart{
    min-height:48px;

    font-size:13px;
  }

  .modal-share-btn{
    width:100%;
    margin:10px 0 0;
  }

  .product-modal-close{
    width:38px;
    height:38px;

    top:10px;
    right:10px;

    font-size:21px;
  }
}
/* =========================================================
   JEXALI PREMIUM SELL PAGE FINAL
   ========================================================= */

#sell{
  padding-top:20px;
}

#sell .panel{
  max-width:1080px;
  margin:0 auto;
  padding:30px;

  border:1px solid #e5eaf1;
  border-radius:30px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfcff 100%
    );

  box-shadow:
    0 22px 55px rgba(7,21,47,.08);
}

/* ===== SELL HERO ===== */

#sell .sell-hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:34px;
  align-items:center;

  margin-bottom:28px;
  padding:32px;

  border:1px solid #f0dfb9;
  border-radius:26px;

  background:
    linear-gradient(
      135deg,
      #fff9e9 0%,
      #ffffff 55%,
      #f3f7ff 100%
    );
}

#sell .sell-hero-text h2{
  margin:8px 0 12px;

  color:#07152f;

  font-size:38px;
  font-weight:950;
  letter-spacing:-1px;
}

#sell .sell-hero-text > p{
  color:#667085;
  line-height:1.65;
}

#sell .sell-hero-image img{
  width:100%;
  max-height:310px;

  object-fit:contain;

  border-radius:20px;
}

/* ===== SELLER BENEFITS ===== */

#sell .seller-benefits{
  display:flex;
  flex-wrap:wrap;
  gap:10px;

  margin:20px 0 0;
}

#sell .seller-benefits span{
  display:inline-flex;
  align-items:center;

  padding:9px 13px;

  border:1px solid #f0ddb0;
  border-radius:999px;

  background:#fff;

  color:#6f5315;

  font-size:12px;
  font-weight:800;
}

#sell .seller-benefits i{
  width:auto;
  height:auto;

  margin-right:7px;

  background:none;
  color:#d99500;
}

/* ===== FORM CARDS ===== */

#sell .sell-form-card{
  margin-top:18px;
  padding:24px;

  border:1px solid #e5eaf1;
  border-radius:22px;

  background:#fff;

  box-shadow:
    0 10px 26px rgba(7,21,47,.05);
}

#sell .sell-section-title{
  margin-bottom:20px;
}

#sell .sell-section-title h3{
  display:flex;
  align-items:center;

  margin:0 0 7px;

  color:#07152f;

  font-size:20px;
  font-weight:900;
}

#sell .sell-section-title h3 i{
  width:38px;
  height:38px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-right:10px;

  border-radius:11px;

  background:#fff5d8;
  color:#d99500;
}

#sell .sell-section-title p{
  margin:0;

  color:#7a8393;

  font-size:13px;
}

/* ===== INPUTS ===== */

#sell #productForm label{
  color:#344054;

  font-size:13px;
  font-weight:800;
}

#sell #productForm input,
#sell #productForm select,
#sell #productForm textarea{
  min-height:47px;

  padding:12px 14px;

  border:1px solid #d9e0ea;
  border-radius:12px;

  background:#fbfcfe;
  color:#111827;

  outline:none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

#sell #productForm textarea{
  min-height:125px;
}

#sell #productForm input:focus,
#sell #productForm select:focus,
#sell #productForm textarea:focus{
  border-color:#2f6bff;

  background:#fff;

  box-shadow:
    0 0 0 4px rgba(47,107,255,.10);
}

/* ===== ROWS ===== */

#sell .sell-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

#sell .pricing-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

/* ===== PHOTO UPLOAD ===== */

#sell .photo-upload{
  min-height:210px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:28px;

  border:2px dashed #c9d5e6;
  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #f7faff,
      #ffffff
    );

  transition:
    border-color .2s ease,
    background .2s ease,
    transform .2s ease;
}

#sell .photo-upload:hover{
  border-color:#f4b522;

  background:#fffaf0;

  transform:translateY(-2px);
}

#sell .photo-upload > i{
  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:13px;

  border-radius:16px;

  background:#fff3cf;
  color:#d99500;

  font-size:25px;
}

#sell .photo-upload-text strong{
  color:#07152f;

  font-size:16px;
}

#sell .photo-upload-text small{
  color:#7a8393;
}

/* ===== VARIANTS ===== */

#sell .variant-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

#sell .variant-field{
  padding:18px;

  border:1px solid #e2e8f0;
  border-radius:17px;

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #f8fbff
    );
}

#sell .variant-field > span{
  color:#07152f;

  font-weight:900;
}

#sell .variant-field > span i{
  color:#d99500;
}

/* ===== SIZE BUTTONS ===== */

#sell .seller-size-options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  margin-top:8px;
}

#sell .seller-size-options label span{
  min-width:46px;

  padding:9px 11px;

  border:1px solid #d9e0ea;
  border-radius:10px;

  background:#fff;
  color:#344054;

  font-size:12px;
  font-weight:800;
}

#sell .seller-size-options input:checked + span{
  border-color:#f4b522;

  background:
    linear-gradient(
      135deg,
      #f4b522,
      #ffd568
    );

  color:#111827;

  box-shadow:
    0 6px 14px rgba(244,181,34,.20);
}

/* ===== PUBLISH BUTTON ===== */

#sell #productForm > .primary{
  width:100%;
  min-height:54px;

  margin-top:20px;
  padding:14px 20px;

  border:0;
  border-radius:14px;

  background:
    linear-gradient(
      135deg,
      #07152f,
      #153263
    );

  color:#fff;

  font-size:15px;
  font-weight:900;

  box-shadow:
    0 12px 26px rgba(7,21,47,.20);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

#sell #productForm > .primary:hover{
  transform:translateY(-2px);

  background:
    linear-gradient(
      135deg,
      #10264f,
      #1c3d78
    );

  box-shadow:
    0 16px 32px rgba(7,21,47,.25);
}

/* ================= MOBILE ================= */

@media(max-width:700px){

  #sell{
    padding-top:8px;
  }

  #sell .panel{
    padding:15px;

    border-radius:21px;
  }

  #sell .sell-hero{
    grid-template-columns:1fr;

    gap:16px;

    padding:20px;

    border-radius:19px;
  }

  #sell .sell-hero-text h2{
    font-size:29px;
  }

  #sell .sell-hero-image{
    text-align:center;
  }

  #sell .sell-hero-image img{
    max-height:220px;
  }

  #sell .seller-benefits{
    gap:7px;
  }

  #sell .seller-benefits span{
    padding:7px 10px;

    font-size:10px;
  }

  #sell .sell-form-card{
    padding:17px;

    border-radius:17px;
  }

  #sell .sell-row,
  #sell .pricing-row,
  #sell .variant-grid{
    grid-template-columns:1fr;
  }

  #sell .photo-upload{
    min-height:180px;
  }

  #sell .sell-section-title h3{
    font-size:17px;
  }

  #sell #productForm input,
  #sell #productForm select,
  #sell #productForm textarea{
    font-size:14px;
  }

}
/* =========================================================
   JEXALI PREMIUM SELLER DASHBOARD FINAL
   ========================================================= */

#dashboard{
  padding-top:18px;
}

#dashboard .section-head{
  position:relative;
  overflow:hidden;

  padding:32px 34px;
  margin-bottom:24px;

  border:1px solid #e3e8f0;
  border-radius:26px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f5f9ff 70%,
      #fff8e8 100%
    );

  box-shadow:
    0 18px 44px rgba(7,21,47,.08);
}

#dashboard .section-head::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:7px;
  height:100%;

  background:
    linear-gradient(
      180deg,
      #f4b522,
      #ff8a1f
    );
}

#dashboard .section-head h2{
  margin:5px 0 7px;
  color:#07152f;
  font-size:35px;
  font-weight:950;
  letter-spacing:-1px;
}

#dashboard .section-head p{
  margin:0;
  color:#697386;
}

/* ===== STATS ===== */

#dashboard .stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:0 0 26px;
}

#dashboard .stats div{
  position:relative;
  overflow:hidden;

  min-height:125px;
  padding:22px;

  border:1px solid #e5eaf1;
  border-radius:22px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f7faff
    );

  box-shadow:
    0 12px 28px rgba(7,21,47,.06);
}

#dashboard .stats div::after{
  content:"";
  position:absolute;
  right:-20px;
  bottom:-28px;

  width:80px;
  height:80px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(244,181,34,.13),
      transparent 70%
    );
}

#dashboard .stats strong{
  display:block;

  margin-bottom:9px;

  color:#07152f;

  font-size:30px;
  font-weight:950;
}

#dashboard .stats span{
  color:#6f7888;

  font-size:13px;
  font-weight:700;
}

/* ===== STRIPE BUTTON ===== */

#dashboard #connectStripeBtn{
  min-height:46px;
  padding:12px 18px;

  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #07152f,
      #153263
    );

  color:#fff;

  font-weight:900;

  box-shadow:
    0 10px 22px rgba(7,21,47,.17);
}

/* ===== SELLER LISTINGS ===== */

#dashboard #sellerListings{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

#dashboard #sellerListings .card{
  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:1px solid #e5eaf1;
  border-radius:22px;

  background:#fff;

  box-shadow:
    0 10px 28px rgba(7,21,47,.07);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

#dashboard #sellerListings .card:hover{
  transform:translateY(-5px);

  box-shadow:
    0 20px 40px rgba(7,21,47,.12);
}

#dashboard #sellerListings .card img,
#dashboard #sellerListings .placeholder{
  width:100%;
  height:240px;

  object-fit:cover;
  object-position:center;

  background:#f5f7fa;
}

#dashboard #sellerListings .card-body{
  flex:1;
  display:flex;
  flex-direction:column;

  padding:17px;
}

#dashboard #sellerListings .category{
  align-self:flex-start;

  padding:5px 9px;
  margin-bottom:8px;

  border-radius:999px;

  background:#eef4ff;
  color:#2f6bff;

  font-size:9px;
  font-weight:900;
}

#dashboard #sellerListings .card h3{
  margin:0 0 7px;

  color:#07152f;

  font-size:17px;
  font-weight:900;
}

#dashboard #sellerListings .price{
  margin-top:auto;

  color:#d98900;

  font-size:20px;
  font-weight:950;
}

/* ===== SHARE PRODUCT ===== */

#dashboard .share-product{
  min-height:43px;

  margin-top:12px;

  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #07152f,
      #153263
    );

  box-shadow:
    0 8px 18px rgba(7,21,47,.15);
}

/* ===== RECENT ORDERS SECTION ===== */

#dashboard .seller-orders-section,
#sellerOrders{
  margin-top:32px;
}

#sellerOrders .order-card{
  overflow:hidden;

  margin-top:18px;
  padding:0;

  border:1px solid #e4e9f0;
  border-left:5px solid #f4b522;
  border-radius:22px;

  background:#fff;

  box-shadow:
    0 14px 34px rgba(7,21,47,.07);
}

#sellerOrders .order-header{
  margin:0;
  padding:18px 20px;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #fffdf7
    );

  border-bottom:1px solid #e7ebf1;
}

#sellerOrders .order-header strong{
  color:#07152f;
  font-size:18px;
  font-weight:950;
}

#sellerOrders .order-header span{
  color:#7a8494;
  font-size:12px;
}

/* ===== ORDER CONTENT ===== */

#sellerOrders .order-status-row,
#sellerOrders .order-tracking-box,
#sellerOrders .order-item,
#sellerOrders .order-customer-details,
#sellerOrders .order-old-details,
#sellerOrders .order-total,
#sellerOrders .seller-refund-request{
  margin-left:18px;
  margin-right:18px;
}

#sellerOrders .order-status-row{
  margin-top:18px;
  padding:14px 15px;

  border:1px solid #e4e9f0;
  border-radius:14px;

  background:#f8fafc;
}

#sellerOrders .order-status-select{
  min-height:42px;

  border-radius:999px;

  font-size:13px;
  font-weight:900;
}

/* ===== TRACKING ===== */

#sellerOrders .order-tracking-box{
  padding:17px;

  border:1px solid #eadcae;
  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #fffdf7,
      #fff9e9
    );
}

#sellerOrders .order-tracking-fields{
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:13px;
}

#sellerOrders .order-carrier-select,
#sellerOrders .order-tracking-input{
  min-height:44px;

  border:1px solid #d8dee8;
  border-radius:11px;

  background:#fff;
}

#sellerOrders .save-tracking-btn{
  min-height:44px;

  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #f4b522,
      #ffd568
    );

  color:#111827;

  font-weight:900;

  box-shadow:
    0 8px 17px rgba(244,181,34,.22);
}

/* ===== ORDER ITEMS ===== */

#sellerOrders .order-item{
  margin-top:14px;
  padding:15px;

  border:1px solid #e7ebf1;
  border-left:4px solid #d7deea;
  border-radius:15px;

  background:#fbfcfe;
}

#sellerOrders .order-item strong{
  color:#07152f;
}

/* ===== CUSTOMER + SHIPPING ===== */

#sellerOrders .order-customer-details{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;

  margin-top:16px;
}

#sellerOrders .order-detail-box{
  padding:16px;

  border:1px solid #e3e8ef;
  border-radius:15px;

  background:#f9fbfe;
}

#sellerOrders .order-detail-box h4{
  color:#07152f;
}

/* ===== ORDER TOTAL ===== */

#sellerOrders .order-total{
  margin-top:16px;
  margin-bottom:18px;

  padding:14px 16px;

  border:1px solid #efdca1;
  border-radius:14px;

  background:#fff8df;

  color:#6f5315;

  font-weight:900;
}

/* ===== REFUND REQUEST ===== */

#sellerOrders .seller-refund-request{
  margin-top:16px;
  margin-bottom:18px;

  padding:17px;

  border:1px solid #efdca9;
  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #fffaf0,
      #fff
    );
}

#sellerOrders .seller-refund-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  margin-bottom:12px;
}

#sellerOrders .seller-refund-header strong{
  color:#07152f;
  font-weight:950;
}

#sellerOrders .seller-refund-header span{
  padding:6px 10px;

  border-radius:999px;

  background:#fff3cf;
  color:#8a6400;

  font-size:11px;
  font-weight:900;
}

#sellerOrders .seller-refund-actions{
  display:flex;
  gap:10px;

  margin-top:14px;
}

#sellerOrders .approve-refund-btn,
#sellerOrders .decline-refund-btn{
  flex:1;

  min-height:43px;

  border-radius:11px;

  font-weight:900;
}

#sellerOrders .approve-refund-btn{
  background:#15803d;
  color:#fff;
}

#sellerOrders .decline-refund-btn{
  border:1px solid #fecaca;

  background:#fff1f2;
  color:#b91c1c;
}

/* ================= TABLET ================= */

@media(max-width:950px){

  #dashboard #sellerListings{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

/* ================= MOBILE ================= */

@media(max-width:700px){

  #dashboard{
    padding-top:7px;
  }

  #dashboard .section-head{
    padding:22px 18px 20px 23px;

    border-radius:20px;
  }

  #dashboard .section-head h2{
    font-size:28px;
  }

  #dashboard .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  #dashboard .stats div{
    min-height:105px;
    padding:16px;

    border-radius:17px;
  }

  #dashboard .stats strong{
    font-size:23px;
  }

  #dashboard .stats span{
    font-size:11px;
  }

  #dashboard #sellerListings{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }

  #dashboard #sellerListings .card{
    border-radius:16px;
  }

  #dashboard #sellerListings .card img,
  #dashboard #sellerListings .placeholder{
    width:100%;
    height:175px;

    object-fit:cover;
  }

  #dashboard #sellerListings .card-body{
    padding:11px;
  }

  #dashboard #sellerListings .card h3{
    font-size:14px;
  }

  #dashboard #sellerListings .price{
    font-size:16px;
  }

  #dashboard .share-product{
    padding:9px 6px;
    font-size:11px;
  }

  #sellerOrders .order-header{
    padding:15px 16px;
  }

  #sellerOrders .order-status-row,
  #sellerOrders .order-tracking-box,
  #sellerOrders .order-item,
  #sellerOrders .order-customer-details,
  #sellerOrders .order-old-details,
  #sellerOrders .order-total,
  #sellerOrders .seller-refund-request{
    margin-left:12px;
    margin-right:12px;
  }

  #sellerOrders .order-tracking-fields,
  #sellerOrders .order-customer-details{
    grid-template-columns:1fr;
  }

  #sellerOrders .seller-refund-actions{
    flex-direction:column;
  }
}
/* =========================================================
   JEXALI PREMIUM BUYER MY ORDERS FINAL
   ========================================================= */

#myorders{
  padding-top:18px;
}

/* ===== HEADER ===== */

#myorders .buyer-orders-header{
  position:relative;
  overflow:hidden;

  padding:32px 34px;
  margin-bottom:24px;

  border:1px solid #e3e8f0;
  border-radius:26px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f5f9ff 70%,
      #fff8e8 100%
    );

  box-shadow:
    0 18px 44px rgba(7,21,47,.08);
}

#myorders .buyer-orders-header::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:7px;
  height:100%;

  background:
    linear-gradient(
      180deg,
      #f4b522,
      #ff8a1f
    );
}

#myorders .buyer-orders-header h2{
  margin:5px 0 7px;

  color:#07152f;

  font-size:35px;
  font-weight:950;
  letter-spacing:-1px;
}

#myorders .buyer-orders-header p{
  margin:0;

  color:#697386;
}

/* ===== ORDER LIST ===== */

#myorders #buyerOrders{
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* ===== ORDER CARD ===== */

#myorders .buyer-order-card{
  position:relative;

  overflow:hidden;

  padding:0;

  border:1px solid #e4e9f0;
  border-left:5px solid #f4b522;
  border-radius:24px;

  background:#fff;

  box-shadow:
    0 14px 34px rgba(7,21,47,.07);
}

/* ===== ORDER HEADER ===== */

#myorders .buyer-order-header{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  margin:0;
  padding:18px 20px;

  border-bottom:1px solid #e8edf3;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #fffdf7
    );
}

#myorders .buyer-order-header strong{
  color:#07152f;

  font-size:18px;
  font-weight:950;
}

#myorders .buyer-order-header p{
  margin:5px 0 0;

  color:#7b8494;

  font-size:12px;
}

/* ===== STATUS BADGE ===== */

#myorders .buyer-order-status{
  flex-shrink:0;

  min-width:95px;

  padding:8px 13px;

  border-radius:999px;

  font-size:11px;
  font-weight:900;

  text-align:center;
}

/* ===== TIMELINE ===== */

#myorders .buyer-order-timeline{
  margin:18px 20px 0;
  padding:18px;

  border:1px solid #e4e9f0;
  border-radius:16px;

  background:#f8fafc;
}

#myorders .timeline-step{
  color:#8b95a5;

  font-size:11px;
  font-weight:800;
}

#myorders .timeline-step.active{
  color:#07152f;
}

#myorders .timeline-dot{
  width:15px;
  height:15px;
}

#myorders .timeline-step.active .timeline-dot{
  background:#f4b522;

  box-shadow:
    0 0 0 3px rgba(244,181,34,.18);
}

#myorders .timeline-line.active{
  background:#f4b522;
}

/* ===== ORDER ITEMS ===== */

#myorders .buyer-order-items{
  display:grid;
  gap:12px;

  margin:18px 20px;
}

#myorders .buyer-order-item{
  padding:15px;

  border:1px solid #e5eaf1;
  border-left:4px solid #d6dee9;
  border-radius:15px;

  background:#fbfcfe;
}

#myorders .buyer-order-item strong{
  margin-bottom:7px;

  color:#07152f;

  font-size:16px;
  font-weight:900;
}

#myorders .buyer-order-item p{
  color:#5f6979;

  font-size:13px;
}

/* ===== TRACKING ===== */

#myorders .buyer-tracking-box{
  margin:18px 20px;
  padding:16px;

  border:1px solid #dce4ee;
  border-radius:16px;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #ffffff
    );
}

#myorders .buyer-tracking-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

#myorders .buyer-tracking-info span{
  color:#7a8494;

  font-size:10px;
  font-weight:900;
}

#myorders .buyer-tracking-info strong{
  color:#07152f;
}

#myorders .buyer-track-btn{
  margin-top:14px;

  min-height:43px;

  border-radius:11px;

  background:
    linear-gradient(
      135deg,
      #07152f,
      #153263
    );

  font-weight:900;
}

/* ===== SHIPPING ===== */

#myorders .buyer-order-shipping{
  margin:18px 20px;
  padding:16px;

  border:1px solid #e2e8f0;
  border-radius:16px;

  background:#f9fbfe;
}

#myorders .buyer-order-shipping h4{
  margin-bottom:10px;

  color:#07152f;

  font-size:15px;
  font-weight:900;
}

/* ===== REFUND STATUS ===== */

#myorders .buyer-refund-status{
  margin:18px 20px;
  padding:14px 16px;

  border-radius:14px;

  font-size:13px;
  font-weight:800;
}

#myorders .buyer-refund-status strong{
  display:block;

  margin-bottom:6px;

  font-size:14px;
}

#myorders .buyer-refund-btn{
  margin:18px 20px;

  min-height:44px;

  padding:11px 16px;

  border:0;
  border-radius:12px;

  background:
    linear-gradient(
      135deg,
      #07152f,
      #153263
    );

  color:#fff;

  font-weight:900;

  cursor:pointer;

  box-shadow:
    0 9px 20px rgba(7,21,47,.16);
}

#myorders .buyer-refund-expired{
  margin:18px 20px;
  padding:13px 15px;

  border:1px solid #e3e8ef;
  border-radius:13px;

  background:#f8fafc;

  color:#7a8494;

  font-size:12px;
  font-weight:700;
}

/* ===== TOTAL ===== */

#myorders .buyer-order-total{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin:18px 20px 20px;
  padding:15px 17px;

  border:1px solid #efdca1;
  border-radius:15px;

  background:
    linear-gradient(
      135deg,
      #fff8df,
      #fffdf4
    );

  color:#6f5315;
}

#myorders .buyer-order-total strong{
  color:#d98900;

  font-size:21px;
  font-weight:950;
}

/* ================= MOBILE ================= */

@media(max-width:600px){

  #myorders{
    padding-top:7px;
  }

  #myorders .buyer-orders-header{
    padding:22px 18px 20px 23px;

    border-radius:20px;
  }

  #myorders .buyer-orders-header h2{
    font-size:28px;
  }

  #myorders .buyer-order-card{
    border-radius:18px;
  }

  #myorders .buyer-order-header{
    align-items:flex-start;

    padding:15px;
  }

  #myorders .buyer-order-header strong{
    font-size:16px;
  }

  #myorders .buyer-order-status{
    min-width:auto;

    padding:7px 10px;

    font-size:10px;
  }

  #myorders .buyer-order-timeline,
  #myorders .buyer-order-items,
  #myorders .buyer-tracking-box,
  #myorders .buyer-order-shipping,
  #myorders .buyer-refund-status,
  #myorders .buyer-refund-btn,
  #myorders .buyer-refund-expired,
  #myorders .buyer-order-total{
    margin-left:12px;
    margin-right:12px;
  }

  #myorders .buyer-order-timeline{
    grid-template-columns:auto 1fr auto 1fr auto;

    gap:5px;

    padding:13px 9px;
  }

  #myorders .timeline-step{
    min-width:48px;

    font-size:9px;
  }

  #myorders .buyer-tracking-info{
    grid-template-columns:1fr;
  }

  #myorders .buyer-track-btn{
    width:100%;
  }

  #myorders .buyer-order-total{
    padding:13px 14px;
  }

  #myorders .buyer-order-total strong{
    font-size:19px;
  }
}
/* =========================================================
   JEXALI PREMIUM CART FINAL
   ========================================================= */

#cart{
  padding-top:18px;
}

/* ===== CART HEADER ===== */

#cart .cart-page-header{
  position:relative;
  overflow:hidden;

  padding:32px 34px;
  margin-bottom:26px;

  border:1px solid #e3e8f0;
  border-radius:26px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f5f9ff 68%,
      #fff8e8 100%
    );

  box-shadow:
    0 18px 44px rgba(7,21,47,.08);
}

#cart .cart-page-header::before{
  content:"";

  position:absolute;
  top:0;
  left:0;

  width:7px;
  height:100%;

  background:
    linear-gradient(
      180deg,
      #f4b522,
      #ff8a1f
    );
}

#cart .cart-page-header h2{
  margin:5px 0 7px;

  color:#07152f;

  font-size:35px;
  font-weight:950;
  letter-spacing:-1px;
}

#cart .cart-page-header p{
  margin:0;
  color:#697386;
}

/* ===== MAIN LAYOUT ===== */

#cart .cart-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1.55fr)
    minmax(310px,.72fr);

  gap:25px;

  align-items:start;
}

/* ===== PRODUCTS PANEL ===== */

#cart .cart-products-panel{
  overflow:hidden;

  padding:0;

  border:1px solid #e4e9f0;
  border-radius:24px;

  background:#fff;

  box-shadow:
    0 15px 36px rgba(7,21,47,.07);
}

#cart .cart-panel-title{
  margin:0;
  padding:20px 22px;

  border-bottom:1px solid #e8edf3;

  background:
    linear-gradient(
      135deg,
      #f8fbff,
      #ffffff
    );
}

#cart .cart-panel-title h3{
  margin:0;

  display:flex;
  align-items:center;
  gap:11px;

  color:#07152f;

  font-size:19px;
  font-weight:950;
}

#cart .cart-panel-title i{
  width:38px;
  height:38px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  background:#fff3cf;
  color:#d99500;
}

/* ===== ITEMS AREA ===== */

#cart #cartItems{
  display:flex;
  flex-direction:column;
  gap:14px;

  padding:18px;
}

/* ===== PRODUCT ROW ===== */

#cart .cart-row{
  display:grid;

  grid-template-columns:
    105px minmax(0,1fr) auto;

  gap:17px;
  align-items:center;

  margin:0;
  padding:15px;

  border:1px solid #e4e9f0;
  border-left:4px solid #f4b522;
  border-radius:18px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fbfcff
    );

  box-shadow:
    0 7px 18px rgba(7,21,47,.04);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

#cart .cart-row:hover{
  transform:translateY(-2px);

  border-color:#d7dee8;

  box-shadow:
    0 12px 26px rgba(7,21,47,.08);
}

/* ===== IMAGE ===== */

#cart .cart-item-image{
  width:105px;
  height:105px;

  overflow:hidden;

  border:1px solid #edf0f4;
  border-radius:15px;

  background:#f5f7fa;
}

#cart .cart-item-image img{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  display:block;
}

/* ===== PRODUCT INFO ===== */

#cart .cart-item-category{
  display:inline-flex;

  margin-bottom:6px;

  padding:5px 9px;

  border-radius:999px;

  background:#eef4ff;
  color:#2563eb;

  font-size:9px;
  font-weight:900;

  text-transform:uppercase;
  letter-spacing:.6px;
}

#cart .cart-item-name{
  display:block;

  margin-bottom:9px;

  color:#07152f;

  font-size:17px;
  font-weight:900;
}

/* ===== OPTIONS ===== */

#cart .cart-option-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;

  margin-bottom:10px;
}

#cart .cart-option-badges span{
  padding:5px 9px;

  border:1px solid #eadcae;
  border-radius:999px;

  background:#fff9e8;
  color:#755613;

  font-size:11px;
  font-weight:700;
}

#cart .cart-option-badges b{
  color:#07152f;
}

/* ===== QUANTITY ===== */

#cart .cart-quantity{
  display:inline-flex;
  align-items:center;

  margin:2px 8px 8px 0;

  overflow:hidden;

  border:1px solid #dce3ec;
  border-radius:11px;

  background:#fff;
}

#cart .cart-quantity button{
  width:36px;
  height:34px;

  border:0;

  background:#fff;
  color:#07152f;

  font-size:18px;
  font-weight:900;

  cursor:pointer;
}

#cart .cart-quantity button:hover{
  background:#fff5d8;
  color:#b97900;
}

#cart .qty-value{
  min-width:38px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-left:1px solid #e4e9f0;
  border-right:1px solid #e4e9f0;

  background:#f8fafc;

  color:#07152f;

  font-size:13px;
  font-weight:900;
}

/* ===== REMOVE ===== */

#cart .remove-cart{
  padding:8px 10px;

  border:1px solid #fecaca;
  border-radius:10px;

  background:#fff5f5;
  color:#b42318;

  font-size:12px;
  font-weight:900;

  cursor:pointer;
}

#cart .remove-cart:hover{
  background:#fee2e2;
}

/* ===== PRICE ===== */

#cart .cart-item-price{
  align-self:start;

  padding:7px 10px;

  border-radius:10px;

  background:#fff7e5;
  color:#d98900;

  font-size:18px;
  font-weight:950;

  white-space:nowrap;
}

/* ===== EMPTY CART ===== */

#cart .cart-empty{
  padding:55px 20px;

  text-align:center;

  color:#737d8e;
}

#cart .cart-empty i{
  font-size:38px;
  color:#f4b522;
}

#cart .cart-empty h3{
  margin:12px 0 6px;

  color:#07152f;

  font-size:19px;
}

/* ===== ORDER SUMMARY ===== */

#cart .checkout-card{
  width:100%;
  max-width:none;

  margin:0;
  padding:26px;

  position:sticky;
  top:100px;

  overflow:hidden;

  border:1px solid #1f3566;
  border-radius:24px;

  background:
    linear-gradient(
      155deg,
      #07152f 0%,
      #132957 100%
    );

  color:#fff;

  box-shadow:
    0 22px 46px rgba(7,21,47,.24);
}

#cart .checkout-card h3{
  margin:0 0 20px;

  color:#fff;

  font-size:22px;
  font-weight:950;
}

#cart .checkout-card .summary-row{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:18px;

  padding:10px 0;

  color:#cbd5e1;

  font-size:14px;
}

#cart .checkout-card .summary-row strong{
  color:#fff;
}

#cart .summary-divider{
  height:1px;

  margin:10px 0;
  padding:0 !important;

  background:rgba(255,255,255,.15);
}

#cart .checkout-card .summary-row.total{
  padding-top:15px;

  color:#fff;

  font-size:18px;
  font-weight:900;
}

#cart .checkout-card .total strong{
  color:#ffd05a;

  font-size:27px;
  font-weight:950;
}

/* ===== CHECKOUT BUTTON ===== */

#cart .cart-checkout-btn{
  width:100%;
  min-height:51px;

  margin-top:17px;
  padding:14px 16px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  border:0;
  border-radius:13px;

  background:
    linear-gradient(
      135deg,
      #f4b522,
      #ffd568
    );

  color:#07152f;

  font-size:14px;
  font-weight:950;

  box-shadow:
    0 11px 24px rgba(244,181,34,.24);

  transition:
    transform .2s ease,
    box-shadow .2s ease;
}

#cart .cart-checkout-btn:hover{
  transform:translateY(-2px);

  box-shadow:
    0 15px 28px rgba(244,181,34,.32);
}

/* ===== SECURE CHECKOUT ===== */

#cart .secure-checkout-text{
  margin:14px 0 0;

  color:#cdd6e5;

  font-size:11px;
  line-height:1.45;

  text-align:center;
}

#cart .secure-checkout-text i{
  margin-right:5px;
  color:#5ee49b;
}

/* ================= MOBILE ================= */

@media(max-width:700px){

  #cart{
    padding-top:7px;
  }

  #cart .cart-page-header{
    padding:22px 18px 20px 23px;

    border-radius:20px;
  }

  #cart .cart-page-header h2{
    font-size:28px;
  }

  #cart .cart-layout{
    grid-template-columns:1fr;
    gap:18px;
  }

  #cart .cart-products-panel{
    border-radius:18px;
  }

  #cart .cart-panel-title{
    padding:15px;
  }

  #cart #cartItems{
    padding:10px;
    gap:10px;
  }

  #cart .cart-row{
    grid-template-columns:86px minmax(0,1fr);

    gap:11px;

    padding:11px;

    border-radius:15px;
  }

  #cart .cart-item-image{
    width:86px;
    height:86px;

    border-radius:12px;
  }

  #cart .cart-item-name{
    margin-bottom:6px;

    font-size:14px;
    line-height:1.3;
  }

  #cart .cart-item-category{
    padding:4px 7px;

    font-size:8px;
  }

  #cart .cart-option-badges{
    gap:4px;
    margin-bottom:7px;
  }

  #cart .cart-option-badges span{
    padding:4px 7px;

    font-size:9px;
  }

  #cart .cart-quantity{
    margin-bottom:6px;
  }

  #cart .cart-quantity button{
    width:32px;
    height:30px;

    font-size:16px;
  }

  #cart .qty-value{
    min-width:34px;
    height:30px;

    font-size:12px;
  }

  #cart .remove-cart{
    padding:6px 8px;

    font-size:10px;
  }

  #cart .cart-item-price{
    grid-column:2;

    justify-self:start;

    padding:5px 8px;

    font-size:15px;
  }

  #cart .checkout-card{
    position:static;

    padding:20px 18px;

    border-radius:18px;
  }

  #cart .checkout-card h3{
    margin-bottom:15px;

    font-size:20px;
  }

  #cart .checkout-card .summary-row{
    padding:8px 0;

    font-size:13px;
  }

  #cart .checkout-card .summary-row.total{
    font-size:16px;
  }

  #cart .checkout-card .total strong{
    font-size:23px;
  }

  #cart .cart-checkout-btn{
    min-height:48px;

    font-size:13px;
  }
}
/* =========================================================
   JEXALI PREMIUM FOOTER FINAL
   ========================================================= */

footer{
  width:100%;

  margin-top:60px;
  padding:30px 5%;

  text-align:center;

  border-top:1px solid rgba(255,255,255,.08);
  border-radius:26px 26px 0 0;

  background:
    linear-gradient(
      135deg,
      #07152f 0%,
      #10264f 55%,
      #162e5e 100%
    );

  color:#cbd5e1;

  box-shadow:
    0 -10px 30px rgba(7,21,47,.08);
}

footer p{
  margin:0;

  font-size:13px;
  line-height:1.6;
}

footer strong{
  color:#ffffff;
  font-weight:900;
}

footer a{
  color:#ffd568;

  font-weight:800;
  text-decoration:none;

  transition:color .2s ease;
}

footer a:hover{
  color:#ffffff;
}

/* MOBILE */

@media(max-width:600px){

  footer{
    margin-top:40px;
    padding:24px 18px;

    border-radius:20px 20px 0 0;
  }

  footer p{
    font-size:11px;
  }
}
/* =========================================================
   JEXALI FINAL MOBILE POLISH
   ========================================================= */

@media(max-width:600px){

  body{
    overflow-x:hidden;
  }

  .wrap{
    width:94%;
    padding-left:0;
    padding-right:0;
  }

  /* GLOBAL HEADINGS */
  .section-head h2,
  .buyer-orders-header h2,
  .cart-page-header h2{
    font-size:27px !important;
    line-height:1.15;
  }

  /* GLOBAL BUTTON FEEL */
  button,
  .primary,
  .secondary{
    min-height:42px;
  }

  /* CARDS */
  .card,
  .buyer-order-card,
  .order-card,
  .sell-form-card,
  .cart-products-panel,
  .checkout-card{
    border-radius:16px;
  }

  /* SHOP */
  #shop .product-grid{
    gap:10px;
  }

  #shop .card-body{
    padding:10px;
  }

  /* SELL */
  #sell .panel{
    padding:14px;
  }

  /* DASHBOARD */
  #dashboard .stats{
    gap:10px;
  }

  /* MY ORDERS */
  #myorders #buyerOrders{
    gap:16px;
  }

  /* CART */
  #cart .cart-layout{
    gap:16px;
  }

  /* INPUTS */
  input,
  select,
  textarea{
    font-size:16px;
  }

  /* FOOTER */
  footer{
    margin-top:32px;
  }
}