*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color: #1f2937; background: #ffffff; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }

.topbar { height: 16px; background: linear-gradient(90deg, #ff00a8, #ff43c3); }

.header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 0; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark { width: 34px; height: 34px; display: grid; place-items: center; background: linear-gradient(135deg, #b388ff, #80d0ff); color: #1b063d; border-radius: 8px; font-weight: 800; }
.logo-text { font-weight: 800; letter-spacing: .5px; background: linear-gradient(90deg,#b388ff,#80d0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

.nav { display: flex; flex-wrap: wrap; gap: 18px; }
.nav a { text-decoration: none; color: #6b21a8; position: relative; }
.nav a::after { content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:#6b21a8; transition: width .2s; }
.nav a:hover::after { width:100%; }
.header-actions .link { margin-left: 16px; text-decoration: none; color:#6b7280; }
.header-actions .link:hover { color:#111827; }

.product { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; padding: 20px 0 60px; }
.gallery { display: grid; gap: 10px; }
.main-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; }
.gallery-nav { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 10px; }
.gallery-nav button { height: 40px; border: 1px solid #e5e7eb; background: #fff; border-radius: 8px; cursor: pointer; }
.gallery-nav .thumb { height: 40px; border: 1px dashed #f59e0b; border-radius: 6px; background: #fff7ed; }

.details h1 { font-size: 28px; line-height: 1.25; margin: 8px 0 12px; }

.rating-line { display:flex; align-items:center; gap:10px; margin:6px 0 10px; }
.stars span { color: #f59e0b; font-size: 20px; }
.rating-count { color: #2563eb; text-decoration: none; }
.rating-count:hover { text-decoration: underline; }

.meta { color: #6b7280; margin-bottom: 14px; }
.meta .brand { color: #2563eb; text-decoration: none; margin-left: 6px; }

.cta { display:inline-block; margin: 12px 0 16px; background:#f59e0b; color:#fff; font-weight:700; border:none; padding: 12px 18px; border-radius:6px; text-decoration:none; }
.cta:hover { filter: brightness(0.95); }

.excerpt { color: #374151; margin-bottom: 16px; }

.price { display:flex; align-items:center; gap:14px; margin-top: 8px; }
.price .current { font-size: 28px; font-weight: 800; color:#ef4444; }
.price .old { color:#9ca3af; text-decoration: line-through; }
.price .badge { background:#fee2e2; color:#b91c1c; font-weight:700; padding:6px 10px; border-radius: 6px; }

.footer { padding: 24px 0; border-top: 1px solid #e5e7eb; color:#6b7280; font-size:14px; }

@media (max-width: 900px){
  .product { grid-template-columns: 1fr; }
  .nav { display:none; }
}