/* ===========================
   YZY CONCEPT — Netizen Theme
   =========================== */

/* ----- Base tokens ----- */
:root{
  --bg:#f4f4f4;
  --fg:#111;
  --muted:#7a7a7a;
  --border:#e6e6e6;
  --gap:clamp(18px,2.4vw,42px);
  --maxw:1500px;
}

html{font-size:clamp(15px,0.9vw + 10px,18px)}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  line-height:1.35; letter-spacing:-0.01em;
}

/* ----- Header / nav ----- */
.site-header{
  background:transparent; border:none; box-shadow:none;
  position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
}
.site-header .site-title{
  font-size:clamp(26px,3vw + 10px,68px);
  text-transform:uppercase; font-weight:800; text-align:center;
}
.site-header .nav{
  justify-content:center; gap:1.2rem; margin-top:.5rem;
  text-transform:uppercase; font-size:clamp(12px,0.6vw + 9px,14px);
}
.site-header .nav a{opacity:.6}
.site-header .nav a:hover{opacity:1}

/* ----- Page titles ----- */
.page-title{
  text-align:center;
  font-size:clamp(30px,4vw + 12px,92px);
  text-transform:uppercase; letter-spacing:.02em;
  margin:12vh 0 2rem 0;
}

/* ----- Product grid ----- */
.product-list{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
  max-width:1200px; margin:var(--gap) auto 8rem auto;
  list-style:none; padding:0;
}
@media(min-width:700px){.product-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.product-list{grid-template-columns:repeat(3,1fr)}}

.product{
  border:none; background:transparent; overflow:hidden;
}
.product a{display:block}

/* full-color images */
.product img{
  width:100%; height:clamp(320px,32vw,560px);
  object-fit:cover; object-position:center;
  border:1px solid var(--border);
  transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
  filter:none !important;
}
.product:hover img{
  transform:scale(1.02);
  box-shadow:0 20px 60px rgba(0,0,0,.08);
  border-color:transparent;
}

/* text under image */
.product .product-details{
  padding:.75rem .25rem 0 .25rem;
  display:flex; flex-direction:column; align-items:center; gap:.25rem;
  text-align:center;
}
.product .product-title{
  text-transform:uppercase; font-weight:800;
  font-size:clamp(12px,0.8vw + 10px,16px);
}
.product .product-price{
  font-size:clamp(12px,0.5vw + 9px,14px);
  color:var(--muted); font-weight:600;
  transition:opacity .25s ease; opacity:.8;
}
.product:hover .product-price{opacity:1}

/* ----- Product page ----- */
.product-single .product-title{
  font-size:clamp(28px,2.6vw + 14px,60px);
  text-transform:uppercase; font-weight:800;
}
.product-single .product-price{
  font-size:clamp(18px,1.2vw + 10px,26px);
}
.product-single .product-images img{
  border:1px solid var(--border); filter:none !important;
  transition:transform .35s ease, border-color .35s ease;
}
.product-single .product-images img:hover{
  transform:scale(1.01); border-color:transparent;
}
.product-single .product-description{
  max-width:60ch; color:var(--muted); line-height:1.5;
}

/* buttons */
button.add-to-cart{
  width:100%; padding:1.1rem;
  text-transform:uppercase; font-weight:800;
  border:1px solid var(--fg); background:var(--fg); color:var(--bg);
  transition:background .25s ease, color .25s ease, transform .06s ease;
}
button.add-to-cart:hover{background:transparent; color:var(--fg)}
button.add-to-cart:active{transform:translateY(1px)}

/* ----- Cart ----- */
.cart{
  max-width:900px; margin:4rem auto; border-top:1px solid var(--border);
}
.cart h1{text-align:center}
.cart .item{
  display:grid; grid-template-columns:100px 1fr auto; gap:1rem;
  padding:1.1rem 0; border-bottom:1px solid var(--border);
}
.cart .thumb img{width:100px; height:120px; object-fit:cover}

/* ----- Footer ----- */
.site-footer{
  border-top:1px solid var(--border);
  margin-top:6rem; padding:2rem 0; opacity:.7; font-size:.9rem;
}

/* subtle link underline */
.content a:not(.btn){
  background:linear-gradient(currentColor,currentColor) bottom / 0 1px no-repeat;
  transition:background-size .25s ease;
}
.content a:hover{background-size:100% 1px}

/* reduce motion */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important}
}