/* Sephora-inspired theme by ChatGPT — clean, black/white with red accents */
:root{
  --ink:#111;
  --bg:#fff;
  --muted:#6b7280;
  --ring:#e5e7eb;
  --card:#ffffff;
  --brand:#E11B22; /* red accent */
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Header */
.header{
  position:sticky; top:0; z-index:1000;
  background:#fff;
  border-bottom:1px solid var(--ring);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:10px 20px;
  display:flex; align-items:center; gap:16px;
}
.logo{font-weight:800; letter-spacing:.5px; font-size:22px}
.search{
  flex:1; display:flex; align-items:center; gap:8px;
  border:1px solid var(--ring); padding:8px 12px; border-radius:999px;
}
.search input{
  border:0; outline:none; width:100%; font-size:14px;
}
.header-icons{display:flex; gap:14px; margin-left:auto}
.header-icons a{color:var(--ink); text-decoration:none; position:relative}
.header-icons .cart-count{
  position:absolute; right:-6px; top:-6px; background:var(--brand); color:#fff;
  font-size:11px; line-height:1; padding:3px 6px; border-radius:999px;
}
/* Nav / Mega */
.navbar{
  border-top:1px solid var(--ring);
  background:#fff;
}
.navbar-inner{
  max-width:1200px; margin:0 auto; padding:0 20px;
  display:flex; gap:24px; align-items:center;
  overflow:auto;
}
.navbar a{
  padding:14px 8px; display:block; text-decoration:none; color:#000; font-weight:700; text-transform:uppercase; font-size:13px; white-space:nowrap;
}
.navbar a:hover{color:var(--brand)}
.mega-wrap{position:relative}
.mega{position:absolute; left:0; right:0; top:100%; background:#fff; border:1px solid var(--ring); box-shadow:var(--shadow); display:none}
.mega-grid{max-width:1200px; margin:0 auto; padding:20px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px}
.mega-col h4{margin:0 0 10px; font-size:14px}
.mega-col a{font-weight:500; text-transform:none; color:#111; opacity:.9}
.mega-wrap:hover .mega{display:block}

/* Mobile menu */
.burger{display:none; background:none; border:0; font-size:20px}
.drawer{
  position:fixed; inset:0 0 0 auto; width:85%; max-width:360px; background:#fff;
  transform:translateX(100%); transition:transform .3s ease; z-index:1200;
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
.drawer.open{transform:translateX(0)}
.drawer header{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--ring)}
.drawer nav a{display:block; padding:14px 16px; border-bottom:1px solid #f2f2f2; text-decoration:none; color:#111; font-weight:600}
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.4); opacity:0; pointer-events:none; transition:opacity .2s; z-index:1100}
.backdrop.show{opacity:1; pointer-events:auto}

/* Hero */
.hero{
  background:#000; color:#fff; text-align:center; padding:60px 20px;
}
.hero h1{font-size:42px; margin:10px 0 10px}
.hero p{opacity:.9; margin:0 0 20px}
.btn{
  display:inline-block; background:var(--brand); color:#fff; padding:12px 22px; border-radius:999px;
  text-decoration:none; font-weight:700; letter-spacing:.3px; border:0; cursor:pointer
}
.btn.outline{background:#fff; color:#111; border:1px solid #111}

/* Sections */
.container{max-width:1200px; margin:0 auto; padding:24px 20px}
.grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
@media (max-width:1024px){ .grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){ .grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){ .grid{grid-template-columns:1fr}}

/* Product Card Styling */
.card {
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
}

/* Image 1:1 square */
.card img {
  width: 100%;
  aspect-ratio: 1/1;    /* ensures square images */
  object-fit: contain;  /* keep proportions, no cropping */
  background: #fafafa;  /* subtle bg */
}

/* Card body */
.card-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Brand name: dark grey, uppercase */
.card-body .brand {
  font-size: 0.8rem;
  font-weight: 600;
  color: #555;          /* dark grey */
  text-transform: uppercase;
}

/* Item name: black, bold */
.card-body .title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #000;          /* black */
  text-decoration: none;
  display: block;
}

/* Price: smaller, black */
.card-body .price {
  font-size: 0.85rem;
  font-weight: 500;
  color: #000;
}

/* Discount styling */
.card-body .price del {
  color: #cc2230;       /* red strike */
  margin-right: 6px;
  font-weight: 400;
}
.card-body .price ins {
  text-decoration: none;
  color: #000;
}

.card .hover-bar{
  position:absolute; inset:auto 0 0 0; background:#fff; border-top:1px solid var(--ring);
  padding:10px; display:flex; gap:10px; transform:translateY(100%); transition:transform .2s ease;
}
.card:hover .hover-bar{transform:translateY(0)}
.quick-btn,.add-btn{
  flex:1; border:1px solid #111; background:#111; color:#fff; padding:10px; border-radius:8px; cursor:pointer; font-weight:700
}
.quick-btn{background:#fff; color:#111}
.badge{position:absolute; left:10px; top:10px; background:#111; color:#fff; font-size:11px; padding:6px 8px; border-radius:999px}

/* Banners */
.banner{border-radius:var(--radius); overflow:hidden; position:relative}
.banner img{width:100%; display:block}
.banner .text{position:absolute; left:20px; bottom:20px; color:#fff; font-weight:800; font-size:24px}

/* Footer */
.footer{background:#000; color:#fff; margin-top:40px}
.footer .cols{display:grid; gap:20px; grid-template-columns:repeat(4,1fr)}
.footer a{color:#fff; text-decoration:none; opacity:.9}
.footer small{opacity:.7}

/* Product page */
.product{display:grid; gap:24px; grid-template-columns:1.2fr 1fr}
.product .gallery{display:grid; grid-template-columns:80px 1fr; gap:14px}
.thumbs{display:grid; gap:10px}
.thumbs img{width:100%; border:1px solid var(--ring); border-radius:10px; cursor:pointer}
.mainimg{border:1px solid var(--ring); border-radius:10px; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; background:#f7f7f7}
.options{display:flex; gap:10px; flex-wrap:wrap; margin:10px 0}
.pill{border:1px solid var(--ring); padding:8px 12px; border-radius:999px; cursor:pointer}
.qty{display:flex; align-items:center; gap:10px}
.qty input{width:60px; padding:8px; border:1px solid var(--ring); border-radius:8px}
@media (max-width:900px){ .product{grid-template-columns:1fr} }

/* Cart drawer */
.cart-drawer{position:fixed; inset:0 0 0 auto; width:420px; max-width:92vw; background:#fff; transform:translateX(100%); transition:transform .25s ease; z-index:1300; box-shadow:var(--shadow); display:flex; flex-direction:column}
.cart-drawer.open{transform:translateX(0)}
.cart-drawer header{padding:14px 16px; border-bottom:1px solid var(--ring); display:flex; justify-content:space-between; align-items:center}
.cart-items{flex:1; overflow:auto; padding:10px 16px; display:flex; flex-direction:column; gap:12px}
.cart-item{display:grid; grid-template-columns:64px 1fr auto; gap:10px; align-items:center; border:1px solid var(--ring); border-radius:10px; padding:8px}
.cart-item img{width:64px; height:64px; object-fit:cover; border-radius:8px}
.cart-item .x{background:none; border:0; font-weight:800; cursor:pointer}
.cart-summary{border-top:1px solid var(--ring); padding:16px}
.cart-summary .row{display:flex; justify-content:space-between; margin:6px 0}
.checkout{width:100%;}

/* Modal (Quick View) */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1400}
.modal.show{display:flex}
.modal .sheet{background:#fff; width:min(900px,95vw); border-radius:16px; box-shadow:var(--shadow); border:1px solid var(--ring); overflow:hidden}
.modal header{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid var(--ring)}
.modal body{display:block; padding:16px}
.close{background:none; border:0; font-size:22px; cursor:pointer}
/* Breadcrumbs */
.breadcrumbs{font-size:13px; color:var(--muted); margin:10px 0}
.breadcrumbs a{text-decoration:none; color:inherit}
/* Utilities */
.row{display:flex; align-items:center; gap:10px}
.space{height:20px}
.hidden{display:none !important}


/* Header bottom border */
.header{border-bottom:1px solid #e5e7eb}

/* Slider card look */
.hero-slider{position:relative;overflow:hidden;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 1px 0 rgba(0,0,0,.02);margin:16px auto 24px;max-width:1100px}
.hero-slider .slides{display:flex;transition:transform .5s ease}
.hero-slider .slide{min-width:100%;height:360px;background:var(--bg) no-repeat center/cover;display:flex;align-items:flex-end;position:relative}
.hero-slider .slide::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.00),rgba(0,0,0,.20) 60%,rgba(0,0,0,.35))}
.hero-slider .slide .slide-content{position:relative;color:#fff;padding:28px 24px 24px;max-width:720px}
.hero-slider .eyebrow{font-weight:700;letter-spacing:.2px;margin:0 0 6px}
.hero-slider h1{margin:0 0 14px;font-size:28px;line-height:1.15}
.hero-slider .cta{display:inline-block;padding:10px 16px;border-radius:8px;background:#fff;color:#4338ca;text-decoration:none;font-weight:600;text-transform:uppercase;font-size:14px}
.hero-slider .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.8);border:0;border-radius:999px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.hero-slider .nav:hover{background:#fff}
.hero-slider .prev{left:8px}
.hero-slider .next{right:8px}
.hero-slider .dots{position:absolute;right:16px;top:12px;display:flex;gap:8px}
.hero-slider .dots button{width:10px;height:10px;border-radius:999px;border:0;background:rgba(255,255,255,.6);cursor:pointer}
.hero-slider .dots button[aria-selected="true"]{background:#fff}
@media(min-width:1024px){.hero-slider .slide{height:420px}.hero-slider h1{font-size:34px}}