:root { --pink:#e2137a; --pink-d:#c20d68; --ink:#1d1d1f; --muted:#6b7280; --line:#ececec; --bg:#faf7f8; }
* { box-sizing: border-box; }
body { margin:0; font-family: "Segoe UI", system-ui, sans-serif; color: var(--ink); background:#fff; }
a { color: inherit; text-decoration: none; }
.topbar { background: var(--pink); color:#fff; overflow:hidden; height:38px; display:flex; align-items:center; }
.ticker { display:flex; gap:42px; white-space:nowrap; animation: slide 28s linear infinite; }
.ticker a { color:#fff; font-size:13px; font-weight:600; }
@keyframes slide { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.site-header { border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:20; }
.header-row { display:flex; align-items:center; gap:16px; padding:12px 0; }
.menu-btn { font-size:28px; color:var(--ink); padding:0; }
.brand { display:flex; align-items:center; gap:10px; min-width:180px; }
.brand img { height:52px; width:auto; }
.logo-mark { width:46px; height:46px; border-radius:14px; background:var(--pink); color:#fff; display:grid; place-items:center; font-size:22px; }
.brand-text { font-weight:800; line-height:1.05; letter-spacing:-.03em; }
.brand-text small { display:block; font-weight:500; font-size:11px; color:var(--muted); max-width:180px; }
.search-form { flex:1; display:flex; align-items:center; border:1px solid #e5e7eb; border-radius:999px; padding:4px 4px 4px 14px; background:#fff; }
.search-form input { border:0; outline:0; flex:1; padding:8px; }
.btn-pink { background:var(--pink); color:#fff; border:0; border-radius:999px; font-weight:700; padding:8px 18px; }
.btn-pink:hover { background:var(--pink-d); color:#fff; }
.btn-outline-pink { border:1px solid var(--pink); color:var(--pink); background:#fff; border-radius:999px; font-weight:700; }
.head-icons { display:flex; gap:14px; font-size:22px; }
.head-icons a { position:relative; }
.cart-link span { position:absolute; top:-6px; right:-8px; background:var(--pink); color:#fff; border-radius:99px; font-size:11px; min-width:16px; text-align:center; }
.catbar { border-top:1px solid var(--line); }
.catbar .container-xl { display:flex; gap:22px; font-weight:700; padding:10px 0; }
.nav-accent { color: var(--pink); }
.cat-item { position:relative; }
.cat-drop { display:none; position:absolute; top:100%; left:0; background:#fff; border:1px solid var(--line); border-radius:12px; min-width:200px; padding:8px; box-shadow:0 10px 30px rgba(0,0,0,.06); z-index:30; }
.cat-item:hover .cat-drop { display:block; }
.cat-drop a { display:block; padding:8px 10px; border-radius:8px; font-weight:600; }
.cat-drop a:hover { background:#fff0f6; color:var(--pink); }
.campaign-head { display:flex; justify-content:space-between; align-items:end; margin:22px 0 12px; }
.campaign-head h2 { font-size:18px; margin:0; color:var(--pink); font-weight:800; }
.filters { display:flex; gap:8px; overflow:auto; padding-bottom:8px; }
.filters button, .filters a { border:1px solid #eee; background:#fff; border-radius:999px; padding:8px 14px; font-weight:700; white-space:nowrap; }
.filters .on { background:var(--pink); color:#fff; border-color:var(--pink); }
.banner-grid { display:grid; grid-template-columns: 1.2fr 1fr; gap:14px; }
.banner { border-radius:22px; min-height:260px; padding:28px; color:#fff; position:relative; overflow:hidden; background:#1b1b1d; display:flex; align-items:flex-end; }
.banner::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05) 20%, rgba(0,0,0,.72)); z-index:1; }
.banner h3 { font-size:32px; font-weight:800; margin:8px 0; color:#fff; }
.banner p { color:#fff; }
.banner img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.banner .inner { position:relative; z-index:2; text-shadow:0 2px 14px rgba(0,0,0,.45); }
.banner-row { display:grid; grid-template-columns: repeat(4, 1fr); gap:12px; margin-top:12px; }
.banner.sm { min-height:190px; padding:16px; }
.banner.sm h3 { font-size:20px; }
.section-title { display:flex; justify-content:space-between; align-items:center; margin:28px 0 12px; }
.section-title h2 { font-size:22px; font-weight:800; margin:0; }
.product-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; }
.product-card { border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.pc-img { height:210px; background:#f6f6f6; display:grid; place-items:center; position:relative; }
.pc-img img { width:100%; height:100%; object-fit:cover; }
.ph { font-size:42px; color:#ccc; }
.badge-off { position:absolute; left:10px; top:10px; background:var(--pink); color:#fff; border-radius:999px; padding:4px 8px; font-size:12px; font-weight:800; }
.pc-body { padding:12px; display:flex; flex-direction:column; gap:6px; flex:1; }
.pc-brand { color:var(--muted); font-size:12px; font-weight:700; text-transform:uppercase; }
.pc-name { font-weight:700; min-height:44px; }
.pc-price s { color:#999; margin-right:6px; font-size:13px; }
.pc-price strong { color:var(--pink); font-size:18px; }
.brands { display:flex; gap:10px; overflow:auto; padding-bottom:8px; }
.brand-pill { border:1px solid var(--line); border-radius:16px; padding:16px 22px; font-weight:800; background:#fff; min-width:140px; text-align:center; }
.brand-pill img { height:36px; object-fit:contain; }
.site-footer { background:#1b1b1d; color:#ddd; margin-top:48px; padding:40px 0 16px; }
.site-footer h5 { color:#fff; }
.site-footer a { display:block; color:#ddd; padding:3px 0; }
.socials { display:flex; gap:10px; }
.socials a { width:40px; height:40px; border-radius:50%; background:#2c2c2e; display:grid; place-items:center; font-size:18px; }
.copy { border-top:1px solid #333; margin-top:20px; padding-top:12px; font-size:13px; color:#999; }
.wa-float { position:fixed; right:16px; bottom:18px; width:56px; height:56px; border-radius:50%; background:#25d366; color:#fff; display:grid; place-items:center; font-size:30px; z-index:40; box-shadow:0 8px 20px rgba(0,0,0,.2); }
.cookie-bar { position:fixed; left:12px; right:12px; bottom:12px; background:#fff; border-radius:18px; box-shadow:0 10px 40px rgba(0,0,0,.15); padding:16px; z-index:50; max-width:720px; }
.cookie-bar[hidden] { display:none; }
.pdp { display:grid; grid-template-columns: 1.1fr .9fr; gap:28px; margin:24px 0 40px; }
.pdp.right { grid-template-columns: .9fr 1.1fr; }
.pdp.right .gallery { order:2; }
.gallery-main { border-radius:20px; background:#f4f4f4; min-height:420px; display:grid; place-items:center; overflow:hidden; cursor:zoom-in; }
.gallery-main img { width:100%; max-height:520px; object-fit:contain; }
.thumbs { display:flex; gap:8px; margin-top:10px; overflow:auto; }
.thumbs button { border:2px solid transparent; padding:0; border-radius:12px; overflow:hidden; background:#f4f4f4; width:74px; height:74px; }
.thumbs button.on { border-color:var(--pink); }
.thumbs img { width:100%; height:100%; object-fit:cover; }
.price-xl { font-size:32px; color:var(--pink); font-weight:800; }
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.88); display:grid; place-items:center; z-index:80; }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:92vw; max-height:88vh; }
.lightbox button { position:absolute; top:12px; right:18px; background:none; border:0; color:#fff; font-size:40px; }
.video-box iframe, .video-box video { width:100%; border-radius:16px; min-height:220px; }
.admin-wrap { display:grid; grid-template-columns: 240px 1fr; min-height:100vh; }
.admin-side { background:#1b1b1d; color:#fff; padding:16px; }
.admin-side a { display:block; color:#eee; padding:8px 10px; border-radius:8px; }
.admin-side a.on, .admin-side a:hover { background:var(--pink); color:#fff; }
.admin-main { padding:20px; background:#f6f6f7; }
.table img.thumb { width:54px; height:54px; object-fit:cover; border-radius:8px; }
@media (max-width: 992px) {
  .banner-grid, .banner-row, .product-grid, .pdp, .pdp.right { grid-template-columns: 1fr 1fr; }
  .pdp.right .gallery { order:0; }
  .banner-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .product-grid, .banner-grid, .banner-row, .pdp { grid-template-columns: 1fr; }
  .brand-text small { display:none; }
}