/* ── Beauty Store — Global Styles ── */
:root {
  --primary: #1a1a2e;
  --accent: #c9a96e;      /* warm gold */
  --rose: #e8a2a2;
  --light-bg: #faf9f7;
  --white: #ffffff;
  --text: #1a1a1a;
  --muted: #7a7a7a;
  --border: #e8e4df;
  --radius: 8px;
  --radius-lg: 14px;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--light-bg); color:var(--text); line-height:1.6; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; }

/* ── Utility ── */
.container { width:100%; max-width:1280px; margin:0 auto; padding:0 24px; }
.text-center { text-align:center; }
.text-gold { color:var(--accent); }
.section { padding:72px 0; }
.section-sm { padding:48px 0; }
.section-title { font-size:clamp(24px,4vw,36px); font-weight:700; letter-spacing:-0.5px; margin-bottom:8px; }
.section-sub { color:var(--muted); font-size:16px; margin-bottom:40px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
       padding:12px 24px; border-radius:var(--radius); font-size:14px; font-weight:600;
       border:2px solid transparent; transition:all .2s; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:hover { background:#2a2a4a; }
.btn-gold { background:var(--accent); color:#fff; }
.btn-gold:hover { background:#b8935a; }
.btn-outline { background:transparent; border-color:var(--primary); color:var(--primary); }
.btn-outline:hover { background:var(--primary); color:#fff; }
.btn-sm { padding:8px 16px; font-size:13px; }
.btn-lg { padding:16px 32px; font-size:16px; }

/* ── Nav ── */
.nav {
  position:sticky; top:0; z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 8px rgba(0,0,0,.06);
}
.nav__top {
  background:var(--primary);
  color:#fff;
  text-align:center;
  font-size:12px;
  padding:6px;
  letter-spacing:.5px;
}
.nav__inner {
  display:flex; align-items:center; gap:16px;
  padding:12px 24px;
  max-width:1280px; margin:0 auto;
}
.nav__logo {
  font-size:22px; font-weight:800; letter-spacing:-1px;
  color:var(--primary); white-space:nowrap;
}
.nav__logo span { color:var(--accent); }
.nav__search {
  flex:1; max-width:400px;
  display:flex; align-items:center;
  background:var(--light-bg); border:1px solid var(--border);
  border-radius:var(--radius); padding:8px 14px; gap:8px;
}
.nav__search input { border:none; background:transparent; font-size:14px; outline:none; width:100%; }
.nav__actions { display:flex; align-items:center; gap:12px; margin-left:auto; }
.nav__actions a { font-size:13px; color:var(--muted); }
.nav__actions a:hover { color:var(--text); }
.nav__cart-btn { position:relative; display:flex; align-items:center; gap:6px; }
.nav__cart-count {
  position:absolute; top:-6px; right:-6px;
  background:var(--accent); color:#fff;
  font-size:10px; font-weight:700;
  width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  display:none;
}
.nav__links {
  display:flex; gap:0;
  border-top:1px solid var(--border);
  overflow-x:auto;
}
.nav__links a {
  padding:10px 18px; font-size:13px; font-weight:500;
  color:var(--muted); white-space:nowrap;
  border-bottom:2px solid transparent; transition:all .15s;
}
.nav__links a:hover, .nav__links a.active { color:var(--primary); border-color:var(--accent); }
.nav-toggle { display:none; background:none; border:none; font-size:22px; padding:4px; }

/* ── Hero ── */
.hero {
  background:linear-gradient(135deg, var(--primary) 0%, #2d2d4f 60%, #1a2a3a 100%);
  color:#fff; padding:80px 0 60px;
  position:relative; overflow:hidden;
}
.hero::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 70% 50%, rgba(201,169,110,.15), transparent 60%);
}
.hero__inner { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; position:relative; z-index:1; }
.hero__eyebrow { font-size:12px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.hero__title { font-size:clamp(32px,5vw,56px); font-weight:800; line-height:1.1; letter-spacing:-1.5px; margin-bottom:20px; }
.hero__title span { color:var(--accent); }
.hero__desc { font-size:16px; color:rgba(255,255,255,.75); margin-bottom:32px; max-width:440px; }
.hero__actions { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px; }
.hero__visual { display:flex; justify-content:center; align-items:center; }
.hero__visual img { border-radius:var(--radius-lg); max-height:420px; object-fit:cover; box-shadow:var(--shadow-lg); }
.hero__placeholder {
  width:360px; height:420px; border-radius:var(--radius-lg);
  background:linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center;
  font-size:80px;
}

/* ── Category Strip ── */
.cat-strip { background:var(--white); border-bottom:1px solid var(--border); padding:0; }
.cat-strip__list {
  display:flex; gap:0; overflow-x:auto;
  padding:0; scrollbar-width:none;
}
.cat-strip__list::-webkit-scrollbar { display:none; }
.cat-strip__item {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 20px; cursor:pointer; text-align:center; white-space:nowrap;
  border-bottom:2px solid transparent; transition:all .15s;
  color:var(--muted); font-size:13px; font-weight:500;
}
.cat-strip__item:hover, .cat-strip__item.active {
  color:var(--primary); border-color:var(--accent);
}
.cat-strip__icon { font-size:22px; }

/* ── Product Grid ── */
.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:24px; }
.product-card {
  background:var(--white); border-radius:var(--radius-lg);
  border:1px solid var(--border); overflow:hidden;
  transition:box-shadow .2s, transform .2s;
  cursor:pointer;
}
.product-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.product-card__img {
  aspect-ratio:1; background:#f5f3f0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.product-card__img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.product-card:hover .product-card__img img { transform:scale(1.04); }
.product-card__img-placeholder { font-size:48px; color:#ccc; }
.product-card__body { padding:14px; }
.product-card__brand { font-size:11px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.product-card__name { font-size:14px; font-weight:600; line-height:1.3; margin-bottom:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product-card__price { font-size:16px; font-weight:700; color:var(--primary); }
.product-card__rrp { font-size:12px; color:var(--muted); text-decoration:line-through; margin-left:6px; }
.product-card__footer { padding:0 14px 14px; }
.product-card__btn { width:100%; }

/* ── Brands strip ── */
.brands-strip { background:var(--white); padding:32px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.brands-strip__list { display:flex; gap:32px; align-items:center; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.brands-strip__list::-webkit-scrollbar { display:none; }
.brands-strip__item { font-size:15px; font-weight:700; color:var(--muted); white-space:nowrap; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:color .15s; }
.brands-strip__item:hover { color:var(--primary); }

/* ── Section headers ── */
.section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; }
.section-head a { font-size:13px; color:var(--accent); font-weight:600; }

/* ── Featured banner ── */
.feat-banner {
  border-radius:var(--radius-lg); overflow:hidden;
  background:linear-gradient(135deg, #e8d5c4, #f5e6d3);
  padding:48px 40px; display:flex; align-items:center; gap:40px;
}
.feat-banner__text h2 { font-size:28px; font-weight:700; margin-bottom:8px; }
.feat-banner__text p { color:var(--muted); margin-bottom:20px; }
.feat-banner__emoji { font-size:80px; }

/* ── Newsletter ── */
.newsletter { background:var(--primary); color:#fff; padding:72px 0; text-align:center; }
.newsletter h2 { font-size:32px; font-weight:700; margin-bottom:12px; }
.newsletter p { color:rgba(255,255,255,.7); margin-bottom:32px; }
.newsletter__form { display:flex; gap:12px; max-width:480px; margin:0 auto; }
.newsletter__form input {
  flex:1; padding:14px 18px; border-radius:var(--radius);
  border:none; font-size:15px; outline:none;
}
.newsletter__note { font-size:12px; color:rgba(255,255,255,.5); margin-top:12px; }

/* ── Footer ── */
.footer { background:#111; color:rgba(255,255,255,.6); padding:56px 0 32px; }
.footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px; }
.footer__brand { font-size:22px; font-weight:800; color:#fff; margin-bottom:12px; }
.footer__brand span { color:var(--accent); }
.footer__desc { font-size:14px; line-height:1.7; margin-bottom:20px; }
.footer__col h4 { font-size:13px; font-weight:700; color:#fff; text-transform:uppercase; letter-spacing:1px; margin-bottom:16px; }
.footer__col ul li { margin-bottom:8px; }
.footer__col ul li a { font-size:14px; transition:color .15s; }
.footer__col ul li a:hover { color:#fff; }
.footer__bottom { border-top:1px solid rgba(255,255,255,.08); padding-top:24px; display:flex; justify-content:space-between; align-items:center; font-size:13px; }

/* ── Product Page ── */
.product-page { padding:48px 0; }
.product-page__grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.product-gallery { }
.product-gallery__main { aspect-ratio:1; background:#f5f3f0; border-radius:var(--radius-lg); overflow:hidden; margin-bottom:12px; }
.product-gallery__main img { width:100%; height:100%; object-fit:cover; }
.product-gallery__thumbs { display:flex; gap:8px; }
.product-gallery__thumb { width:72px; height:72px; border-radius:var(--radius); background:#f5f3f0; overflow:hidden; border:2px solid transparent; cursor:pointer; }
.product-gallery__thumb.active { border-color:var(--accent); }
.product-gallery__thumb img { width:100%; height:100%; object-fit:cover; }
.product-detail__brand { font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.product-detail__name { font-size:clamp(22px,3vw,32px); font-weight:700; margin-bottom:16px; line-height:1.2; }
.product-detail__price { font-size:28px; font-weight:800; color:var(--primary); margin-bottom:24px; }
.product-detail__rrp { font-size:16px; color:var(--muted); text-decoration:line-through; font-weight:400; margin-left:8px; }
.product-detail__desc { color:var(--muted); font-size:15px; line-height:1.7; margin-bottom:24px; }
.product-detail__attrs { margin-bottom:24px; }
.product-detail__attr { display:flex; gap:8px; font-size:14px; margin-bottom:6px; }
.product-detail__attr span:first-child { font-weight:600; min-width:100px; }
.product-detail__actions { display:flex; gap:12px; margin-bottom:32px; }
.product-detail__actions .btn { flex:1; }
.product-detail__tabs { border-bottom:1px solid var(--border); display:flex; gap:0; margin-bottom:24px; }
.product-detail__tab { padding:12px 20px; font-size:14px; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; color:var(--muted); }
.product-detail__tab.active { color:var(--primary); border-color:var(--accent); }

/* ── Shop / Listing ── */
.shop-layout { display:grid; grid-template-columns:240px 1fr; gap:32px; padding:48px 0; }
.shop-filters { }
.shop-filters h3 { font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:12px; color:var(--muted); }
.filter-group { margin-bottom:28px; }
.filter-item { display:flex; align-items:center; gap:8px; font-size:14px; margin-bottom:8px; cursor:pointer; }
.filter-item input { cursor:pointer; }
.shop-main__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.shop-main__count { color:var(--muted); font-size:14px; }
.shop-main__sort select { padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius); font-size:14px; outline:none; }

/* ── Cart Sidebar ── */
.cart-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; }
.cart-overlay.open { display:block; }
.cart-drawer {
  position:fixed; top:0; right:-480px; width:100%; max-width:480px; height:100%;
  background:var(--white); z-index:201; transition:right .3s ease;
  display:flex; flex-direction:column;
  box-shadow:-4px 0 24px rgba(0,0,0,.15);
}
.cart-drawer.open { right:0; }
.cart-drawer__header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.cart-drawer__header h3 { font-size:18px; font-weight:700; }
.cart-drawer__close { background:none; border:none; font-size:22px; cursor:pointer; }
.cart-drawer__body { flex:1; overflow-y:auto; padding:24px; }
.cart-drawer__footer { padding:20px 24px; border-top:1px solid var(--border); }
.cart-item { display:flex; gap:14px; margin-bottom:20px; align-items:flex-start; }
.cart-item__img { width:72px; height:72px; border-radius:var(--radius); background:#f5f3f0; overflow:hidden; flex-shrink:0; }
.cart-item__img img { width:100%; height:100%; object-fit:cover; }
.cart-item__details { flex:1; }
.cart-item__name { font-size:14px; font-weight:600; margin-bottom:4px; }
.cart-item__brand { font-size:12px; color:var(--muted); margin-bottom:8px; }
.cart-item__price { font-size:15px; font-weight:700; }
.cart-item__remove { font-size:12px; color:var(--muted); cursor:pointer; margin-top:4px; display:inline-block; }
.cart-subtotal { display:flex; justify-content:space-between; font-size:16px; font-weight:700; margin-bottom:16px; }

/* ── Search ── */
.search-bar { background:var(--white); border-bottom:1px solid var(--border); padding:12px 0; }
.search-bar__inner { display:flex; gap:12px; align-items:center; }
.search-bar__input { flex:1; padding:10px 16px; border:1px solid var(--border); border-radius:var(--radius); font-size:15px; outline:none; }
.search-bar__input:focus { border-color:var(--accent); }

/* ── Loader / Empty ── */
.loading { text-align:center; padding:48px; color:var(--muted); }
.spinner { display:inline-block; width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.empty-state { text-align:center; padding:64px; color:var(--muted); }
.empty-state__icon { font-size:48px; margin-bottom:16px; }

/* ── Responsive ── */
@media(max-width:1024px) {
  .hero__inner { grid-template-columns:1fr; }
  .hero__visual { display:none; }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .shop-layout { grid-template-columns:1fr; }
  .shop-filters { display:none; }
}
@media(max-width:768px) {
  .nav__search { display:none; }
  .nav-toggle { display:block; }
  .product-page__grid { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr; }
  .newsletter__form { flex-direction:column; }
  .section { padding:48px 0; }
}