*{
box-sizing:border-box;
margin:0;
padding:0;
font-family:Arial, sans-serif;
}

body{
background:#FFFFFF;
color:#333;
}

/* Header */

header{
background:#ff6600;
color:white;
padding:20px;
text-align:center;
font-size:28px;
font-weight:bold;
}

/* Layout */

main{
display:flex;
gap:20px;
padding:20px;
}

/* Product Grid */

.product-list{
flex:3;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
gap:20px;
}

/* Product Card */

.product-card{
background:white;
border:1px solid #ddd;
border-radius:20px;
padding:15px;
display:flex;
flex-direction:column;
transition:0.3s;
}

.product-card:hover{
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

.product-image{
width:100%;
height:180px;
object-fit:contain;
margin-bottom:10px;
}

.product-title{
font-size:14px;
font-weight:600;
margin-bottom:6px;
}

.product-rating{
color:#ff9900;
font-size:14px;
margin-bottom:6px;
}

.product-price{
font-size:18px;
font-weight:bold;
margin-bottom:5px;
}

.product-mrp{
text-decoration:line-through;
color:#888;
font-size:14px;
margin-left:6px;
}

.discount{
color:#cc0c39;
font-size:14px;
margin-bottom:10px;
}

.add-to-cart-btn{
background:#ffd814;
border:none;
padding:10px;
border-radius:20px;
cursor:pointer;
font-weight:bold;
}

.add-to-cart-btn:hover{
background:#f7ca00;
}

/* Cart Sidebar */

.cart-sidebar{
flex:1;
background:#ffe0b3;
border-radius:10px;
padding:20px;
max-height:80vh;
overflow-y:auto;
}

.cart-sidebar h2{
margin-bottom:10px;
}

.cart-item{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:12px;
border-bottom:1px solid #ddd;
padding-bottom:5px;
}

.cart-item-name{
flex:1;
font-size:13px;
}

.cart-item-qty{
display:flex;
align-items:center;
gap:5px;
}

.cart-item-qty button{
background:#ff6600;
border:none;
color:white;
padding:4px 8px;
cursor:pointer;
border-radius:4px;
}

.cart-item-price{
font-weight:bold;
margin-left:10px;
}

.remove-btn{
background:none;
border:none;
color:red;
font-size:18px;
cursor:pointer;
}

.cart-summary{
margin-top:20px;
text-align:right;
font-weight:bold;
}

#checkout-btn{
margin-top:10px;
width:100%;
background:#ff6600;
color:white;
border:none;
padding:10px;
border-radius:20px;
cursor:pointer;
}

#checkout-btn:hover{
background:#e65c00;
}

/* Responsive */

@media(max-width:768px){

main{
flex-direction:column;
}

.cart-sidebar{
max-height:none;
}

}






@media (max-width: 768px) {

  .header-top,
  .top-bar,
  #top-bar,
  .topbar,
  .header-top-wrapper,
  .topbar-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
  }

}






/* News */
body {
    margin: 0;
    font-family: Arial, sans-serif;
}

/* Main bar */
.flash-news-bar {
    display: flex;
    width: 100%;
    height: 55px;
    overflow: hidden;
    border-top: 3px solid #FFD700;   /* gold */
    border-bottom: 3px solid #FFD700;
}

/* Flash title */
.flash-title {
    background: #800000;  /* maroon */
    color: #FFD700;       /* gold text */
    padding: 0 25px;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 1px;
    animation: blink 1.2s infinite;
}

/* Blink effect */
@keyframes blink {
    0%   { opacity: 1; }
    50%  { opacity: 0.4; }
    100% { opacity: 1; }
}

/* News area */
.news-container {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: #fff8dc; /* light gold */
}

/* Moving track */
.news-track {
    white-space: nowrap;
    animation: scrollNews 35s linear infinite;
}

/* News items */
.news-item {
    display: inline-block;
    margin-right: 60px;
    font-size: 15px;
    color: #333;
}

/* Highlight */
.news-item strong {
    color: #800000;
}

/* Animation */
@keyframes scrollNews {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Pause on hover */
.news-container:hover .news-track {
    animation-play-state: paused;
}