/* =========================
   GLOBAL RESET
========================= */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
width: 100%;
overflow-x: hidden;
}

html {
-webkit-text-size-adjust: 100%;
}

body {
font-family: 'Playfair Display', serif;
font-size: 16px;
background: #ffffff;
color: #000;
line-height: 1.5;
}



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

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
border-bottom: 1px solid #e5e5e5;
background: #ffffff;
position: sticky;
top: 0;
z-index: 999;
}

.logo {
font-size: 26px;
letter-spacing: 3px;
font-weight: 600;
}

.cart-btn {
background: #000;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 14px;
}

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

.hero {
height: 90vh;
background: linear-gradient(90deg,#e6dfd8,#d9d2cb);
position: relative;
display: flex;
align-items: center;
padding-left: 100px;
overflow: hidden;
}

.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("n.png") center no-repeat;
background-size: 500px;
filter: blur(50px);
opacity: 0.35;
z-index: 1;
}

.hero-content {
position: relative;
z-index: 3;
max-width: 520px;
color: #2f353a;
}

.hero-title {
font-size: 72px;
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
}

.hero-subtitle {
font-size: 18px;
margin-bottom: 28px;
color: #5c6368;
}

.hero-btn {
background: #2f353a;
color: #fff;
border: none;
padding: 14px 30px;
cursor: pointer;
}

/* =========================
   SPLIT IMAGE
========================= */

.product-split {
position: absolute;
right: 60px;
bottom: 0;
width: 420px;
height: 520px;
z-index: 3;
}

.piece {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.6s ease;
}

.left-piece {
clip-path: inset(0 50% 0 0);
}

.right-piece {
clip-path: inset(0 0 0 50%);
}

.hero.split-active .left-piece {
transform: translateX(-160px);
}

.hero.split-active .right-piece {
transform: translateX(160px);
}

/* =========================
   CATEGORY BAR
========================= */

.category-bar {
display: flex;
gap: 15px;
padding: 20px 40px;
overflow-x: auto;
background: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
}

.category {
background: #ffffff;
border: 1px solid #ddd;
padding: 12px;
text-align: center;
min-width: 140px;
cursor: pointer;
}

.category img {
width: 60px;
height: 60px;
object-fit: cover;
margin-bottom: 8px;
}

/* =========================
   BREADCRUMB
========================= */

.breadcrumb {
padding: 20px 40px;
font-size: 14px;
color: #666;
}

/* =========================
   FILTER BAR
========================= */

.filter-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px 20px;
flex-wrap: wrap;
gap: 10px;
}

.filter-bar h2 {
font-size: 28px;
}

.filter-btn {
background: #000;
color: #fff;
border: none;
padding: 10px 18px;
cursor: pointer;
}

.sort {
padding: 10px 14px;
border: 1px solid #ccc;
}

/* =========================
   PRODUCTS GRID
========================= */

.products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
padding: 0 40px 50px;
}

/* NEW PRODUCT CARD */

.product-card {
position: relative;
border: 1px solid #e5e5e5;
padding: 15px;
text-align: center;
background: #ffffff;
transition: 0.3s;
}

.product-card:hover {
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
transform: translateY(-4px);
}

.product-image img {
width: 100%;
height: 240px;
object-fit: contain;
margin-bottom: 12px;
}

.product-name {
font-size: 16px;
margin-bottom: 6px;
}

.price-section {
margin-top: 5px;
}

.original-price {
text-decoration: line-through;
color: #888;
margin-right: 6px;
}

.selling-price {
font-weight: bold;
font-size: 16px;
}

.add-cart-btn {
margin-top: 10px;
padding: 12px;
width: 100%;
background: #8B5E3C;
color: #fff;
border: none;
cursor: pointer;
}

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

/* DISCOUNT BADGE */

.discount-badge {
position: absolute;
top: 10px;
right: 10px;
background: #e58a7a;
color: white;
padding: 4px 8px;
font-size: 14px;
}

/* =========================
   SERVICE SECTION
========================= */

.service-section {
background: #ffffff;
padding: 50px 40px;
border-top: 1px solid #e5e5e5;
}

.service-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}

.service-item {
flex: 1;
padding: 10px 20px;
min-width: 180px;
}

.divider {
width: 1px;
height: 60px;
background: #e5e5e5;
}

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

@media (max-width: 768px) {

.products {
grid-template-columns: repeat(2, 1fr);
padding: 0 20px 40px;
}

.hero {
height: 48vh;
padding-left: 20px;
}

.hero-title {
font-size: 24px;
}

.product-split {
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 150px;
height: 170px;
}

}.cart-btn {
position: relative;
}

.cart-badge {
position: absolute;
top: -8px;
right: -8px;

background: #8B5E3C; /* brown */
color: white;

font-size: 12px;
font-weight: bold;

width: 22px;
height: 22px;

border-radius: 50%;

display: flex;
align-items: center;
justify-content: center;
}
/* =========================
   GLOBAL RESET
========================= */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
width: 100%;
overflow-x: hidden;
}

body {
font-family: 'Playfair Display', serif;
background: #ffffff;
color: #000;
line-height: 1.5;
}

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

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
border-bottom: 1px solid #e5e5e5;
background: #ffffff;
position: sticky;
top: 0;
z-index: 999;
}

.logo {
font-size: 26px;
letter-spacing: 3px;
font-weight: 600;
}

.cart-btn {
background: #000;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 14px;
position: relative;
}

.cart-badge {
position: absolute;
top: -8px;
right: -8px;
background: #8B5E3C;
color: white;
font-size: 12px;
font-weight: bold;
width: 22px;
height: 22px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

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

.hero {
height: 90vh;
background: linear-gradient(90deg,#e6dfd8,#d9d2cb);
position: relative;
display: flex;
align-items: center;
padding-left: 100px;
overflow: hidden;
}

.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("n.png") center no-repeat;
background-size: 500px;
filter: blur(50px);
opacity: 0.35;
z-index: 1;
}

.hero-content {
position: relative;
z-index: 3;
max-width: 520px;
color: #2f353a;
}

.hero-title {
font-size: 72px;
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
}

.hero-subtitle {
font-size: 18px;
margin-bottom: 28px;
color: #5c6368;
}

.hero-btn {
background: #2f353a;
color: #fff;
border: none;
padding: 14px 30px;
cursor: pointer;
}

/* =========================
   SPLIT IMAGE
========================= */

.product-split {
position: absolute;
right: 60px;
bottom: 0;
width: 420px;
height: 520px;
z-index: 3;
}

.piece {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.6s ease;
}

.left-piece {
clip-path: inset(0 50% 0 0);
}

.right-piece {
clip-path: inset(0 0 0 50%);
}

.hero.split-active .left-piece {
transform: translateX(-160px);
}

.hero.split-active .right-piece {
transform: translateX(160px);
}

/* =========================
   CATEGORY BAR
========================= */

.category-bar {
display: flex;
gap: 15px;
padding: 20px 40px;
overflow-x: auto;
background: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
}

.category {
background: #ffffff;
border: 1px solid #ddd;
padding: 12px;
text-align: center;
min-width: 140px;
cursor: pointer;
}

.category img {
width: 60px;
height: 60px;
object-fit: cover;
margin-bottom: 8px;
}

/* =========================
   BREADCRUMB
========================= */

.breadcrumb {
padding: 20px 40px;
font-size: 14px;
color: #666;
}

/* =========================
   FILTER BAR
========================= */

.filter-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 40px 20px;
flex-wrap: wrap;
gap: 10px;
}

.filter-bar h2 {
font-size: 28px;
}

.filter-btn {
background: #000;
color: #fff;
border: none;
padding: 10px 18px;
cursor: pointer;
}

.sort {
padding: 10px 14px;
border: 1px solid #ccc;
}

/* =========================
   PRODUCTS GRID
========================= */

.products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
padding: 0 40px 50px;
}

/* PRODUCT CARD */

.product-card {
position: relative;
border: 1px solid #e5e5e5;
padding: 15px;
text-align: center;
background: #ffffff;
transition: 0.3s;
}

.product-card:hover {
box-shadow: 0 10px 25px rgba(0,0,0,0.12);
transform: translateY(-4px);
}

.product-image {
position: relative;
}

.product-image img {
width: 100%;
height: 240px;
object-fit: contain;
margin-bottom: 12px;
}

.product-name {
font-size: 16px;
margin-bottom: 6px;
}

.price-section {
margin-top: 5px;
}

.original-price {
text-decoration: line-through;
color: #888;
margin-right: 6px;
}

.selling-price {
font-weight: bold;
font-size: 16px;
}

/* ADD TO CART */

.add-cart-btn {
margin-top: 10px;
padding: 12px;
width: 100%;
background: #8B5E3C;
color: #fff;
border: none;
cursor: pointer;
font-weight: 600;
}

.add-cart-btn:hover {
background: #6d472e;
}

/* =========================
   QUANTITY CONTROL
========================= */

.qty-overlay {

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

background: #e53935;

color: white;

border-radius: 20px;

overflow: hidden;

height: 40px;

margin-top: 10px;

}

.qty-minus,
.qty-plus {

border: none;

background: transparent;

color: white;

font-size: 18px;

width: 40px;

cursor: pointer;

}

.qty-number {

width: 40px;

text-align: center;

font-weight: bold;

}

/* DISCOUNT BADGE */

.discount-badge {
position: absolute;
top: 10px;
right: 10px;
background: #e58a7a;
color: white;
padding: 4px 8px;
font-size: 14px;
}

/* =========================
   SERVICE SECTION
========================= */

.service-section {
background: #ffffff;
padding: 50px 40px;
border-top: 1px solid #e5e5e5;
}

.service-container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}

.service-item {
flex: 1;
padding: 10px 20px;
min-width: 180px;
}

.divider {
width: 1px;
height: 60px;
background: #e5e5e5;
}

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

@media (max-width: 768px) {

.products {
grid-template-columns: repeat(2, 1fr);
padding: 0 20px 40px;
}

.hero {
height: 48vh;
padding-left: 20px;
}

.hero-title {
font-size: 24px;
}

.product-split {
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 150px;
height: 170px;
}

}
/* =========================
   CART PAGE LAYOUT
========================= */

.cart-container {

display: grid;

grid-template-columns: 2fr 1fr;

gap: 30px;

padding: 30px 40px;

background: #fafafa;

font-family: 'Inter', sans-serif;

}



/* LEFT SIDE */

.cart-left {

display: flex;

flex-direction: column;

gap: 20px;

}



/* OFFER BOX */

.offer-box {

display: flex;

justify-content: space-between;

align-items: center;

background: #ffffff;

padding: 18px;

border: 1px solid #e5e5e5;

border-radius: 6px;

}



.live-btn {

background: #8B5E3C;

color: white;

border: none;

padding: 10px 16px;

cursor: pointer;

font-weight: 600;

border-radius: 4px;

}

.live-btn:hover {

background: #6d472e;

}



/* =========================
   CART ITEM
========================= */

.cart-item {

display: flex;

align-items: center;

gap: 18px;

background: #ffffff;

border: 1px solid #e5e5e5;

padding: 16px;

border-radius: 6px;

transition: 0.2s;

}



.cart-item:hover {

box-shadow: 0 6px 18px rgba(0,0,0,0.08);

}



/* IMAGE — FIXED SIZE */

.cart-item img {

width: 90px;

height: 90px;

object-fit: contain;

flex-shrink: 0;

border: 1px solid #eee;

padding: 6px;

background: #ffffff;

border-radius: 6px;

}



/* PRODUCT INFO */

.item-info {

flex: 1;

}



.item-info h4 {

font-size: 16px;

margin-bottom: 6px;

font-weight: 600;

}



.item-info p {

font-size: 16px;

font-weight: bold;

margin-bottom: 10px;

font-family: 'Inter', sans-serif;

}



/* =========================
   QUANTITY CONTROL
========================= */

.qty-overlay {

display: inline-flex;

align-items: center;

background: #e53935;

color: white;

border-radius: 20px;

overflow: hidden;

height: 36px;

margin-bottom: 10px;

}



.qty-minus,
.qty-plus {

border: none;

background: transparent;

color: white;

font-size: 18px;

width: 36px;

cursor: pointer;

}



.qty-number {

width: 32px;

text-align: center;

font-weight: bold;

}



/* REMOVE BUTTON */

.remove-btn {

background: transparent;

border: 1px solid #ccc;

padding: 6px 12px;

cursor: pointer;

border-radius: 4px;

font-size: 14px;

}



.remove-btn:hover {

background: #000;

color: white;

border-color: #000;

}



/* =========================
   RIGHT SIDE
========================= */

.cart-right {

display: flex;

flex-direction: column;

gap: 16px;

}



/* BOXES */

.coupon-box,
.delivery-box,
.summary-box {

background: #ffffff;

border: 1px solid #e5e5e5;

padding: 18px;

border-radius: 6px;

}



/* PINCODE INPUT */

.delivery-box input {

width: 100%;

padding: 10px;

margin-top: 10px;

border: 1px solid #ccc;

border-radius: 4px;

}



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

.summary-row {

display: flex;

justify-content: space-between;

margin-bottom: 12px;

font-size: 15px;

font-family: 'Inter', sans-serif;

}



.summary-row.total {

font-size: 18px;

font-weight: bold;

}



/* PLACE ORDER BUTTON */

.place-order-btn {

width: 100%;

margin-top: 18px;

padding: 14px;

background: #8B5E3C;

color: white;

border: none;

cursor: pointer;

font-size: 15px;

font-weight: 600;

border-radius: 4px;

}



.place-order-btn:hover {

background: #6d472e;

}



/* EMPTY CART */

#cart-items h3 {

text-align: center;

padding: 40px;

color: #777;

}



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

@media (max-width: 768px) {

.cart-container {

grid-template-columns: 1fr;

padding: 20px;

}



.cart-item {

flex-direction: row;

align-items: center;

}



.cart-item img {

width: 80px;

height: 80px;

}

}
/* TOPBAR */

.topbar {

background: #8B5E3C;

color: white;

padding: 6px 0;

font-size: 14px;

overflow: hidden;

}

.marquee {

white-space: nowrap;

animation: scrollText 15s linear infinite;

}

@keyframes scrollText {

0% {
transform: translateX(100%);
}

100% {
transform: translateX(-100%);
}

}



/* HEADER */

.header {

display: flex;

align-items: center;

justify-content: space-between;

padding: 18px 40px;

border-bottom: 1px solid #e5e5e5;

background: white;

position: sticky;

top: 0;

z-index: 999;

}



/* MENU */

.nav-menu {

display: flex;

gap: 25px;

}

.nav-menu a {

text-decoration: none;

color: black;

font-weight: 600;

font-size: 15px;

}

.nav-menu a:hover {

color: #8B5E3C;

}



/* SEARCH */

.search-area {

flex: 1;

display: flex;

justify-content: center;

}

.search-area input {

width: 300px;

padding: 10px 14px;

border: 1px solid #ccc;

border-radius: 4px;

}



/* MOBILE */

@media (max-width: 768px) {

.nav-menu {

display: none;

}

.search-area input {

width: 180px;

}

}
.original-price {

text-decoration: line-through;

color: #888;

margin-right: 8px;

font-size: 14px;

}

.selling-price {

font-weight: bold;

color: black;

font-size: 16px;

}
.original-price {
    text-decoration: line-through;
    color: #888;
    font-size: 14px;
    margin-right: 8px;
}

.selling-price {
    font-weight: bold;
    font-size: 16px;
    color: black;
}