/* ===========================
   STICKIFY — style moderne
   =========================== */

/* Reset simple */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#fbfdff; --primary:#1565c0; --accent:#ffca28; --muted:#6b7280;
  --glass: rgba(255,255,255,0.7);
  --card-shadow: 0 10px 30px rgba(2,6,23,0.08);
  --radius:16px;
  --max-width:1200px;
}

body{
  font-family: Inter, "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#fbfdff 0%, #f1f6fb 100%);
  color:#0f1724;
  -webkit-font-smoothing:antialiased;
}

/* NAV */
.nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1rem 2rem; background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(10,15,30,0.03);
}
.brand{ display:flex; flex-direction:column; }
.logo{ font-weight:800; color:var(--primary); font-size:1.25rem; }
.logo span{ color:var(--accent); }
.slogan{ font-size:0.75rem; color:var(--muted); }

/* Controls */
.controls{ display:flex; align-items:center; gap:.6rem; }
.controls input[type="search"]{
  padding:.6rem .9rem; border-radius:999px; border:1px solid #e6eef8; width:220px;
  box-shadow:none; outline:none; transition:all .18s ease;
}
.controls input:focus{ box-shadow: 0 6px 18px rgba(21,101,192,0.08); transform:translateY(-1px); }
.controls select{ padding:.55rem .6rem; border-radius:10px; border:1px solid #e6eef8; }
.cart-btn{ background:var(--primary); color:white; padding:.5rem .8rem; border-radius:10px; border:none; font-weight:700; }

/* HERO */
.hero{ display:flex; gap:2rem; align-items:center; justify-content:space-between; max-width:var(--max-width); margin:2rem auto; padding:2rem; }
.hero-inner{ max-width:640px; }
.hero h1{ font-size:2.4rem; color: #062a52; line-height:1.05; margin-bottom:.6rem; }
.hero p{ color:var(--muted); margin-bottom:1rem; }
.hero-ctas{ display:flex; gap:1rem; }
.hero button{ background:var(--accent); color:#06324a; border:none; padding:.8rem 1.2rem; border-radius:999px; font-weight:700; cursor:pointer; transition:all .18s; }
.hero button:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(255,202,40,0.12); }
.hero .secondary{ display:inline-flex; align-items:center; padding:.6rem 1rem; border-radius:999px; border:2px solid rgba(5,70,128,0.06); color:var(--primary); text-decoration:none; }

/* hero art */
.hero-art{ width:320px; display:flex; justify-content:center; align-items:center; }
.mock-phone{ background:linear-gradient(160deg,#fff 0%, #f7fbff 100%); width:220px; height:360px; border-radius:24px; display:flex; align-items:center; justify-content:center; color:var(--muted); box-shadow:var(--card-shadow); border:1px solid rgba(10,20,40,0.02); }

/* TOOLBAR */
.toolbar{ max-width:var(--max-width); margin:0 auto; padding:0 2rem 1rem; display:flex; justify-content:space-between; align-items:center; color:var(--muted); }

/* GRID */
.products-grid{ max-width:var(--max-width); margin:0 auto; padding:1rem 2rem 4rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; }
.product-card{ background:white; border-radius:14px; box-shadow:var(--card-shadow); overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; display:flex; flex-direction:column; }
.product-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 40px rgba(10,20,40,0.08); }
.thumb{ height:180px; display:flex; align-items:center; justify-content:center; background:linear-gradient(120deg,#f8fbff,#fff); }
.thumb img{ max-width:85%; max-height:85%; object-fit:contain; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.06)); }
.meta{ padding:1rem; display:flex; flex-direction:column; gap:.6rem; flex:1; }
.meta h3{ font-size:1.05rem; color:#062a52; }
.p-artist{ font-size:.85rem; color:var(--muted); }
.p-footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.p-price{ font-weight:800; color: #0f1724; }
.p-actions .btn{ padding:.45rem .6rem; border-radius:8px; border:none; cursor:pointer; font-weight:700; }
.p-actions .view{ background:transparent; color:var(--primary); border:1px solid rgba(21,101,192,0.08); }
.p-actions .add{ background:var(--accent); color:#06324a; }

/* CART PANEL */
.cart-panel{ position:fixed; right:24px; top:96px; width:340px; max-height:80vh; background:white; border-radius:12px; box-shadow:0 18px 50px rgba(2,8,23,0.18); overflow:auto; display:flex; flex-direction:column; z-index:80; }
.hidden{ display:none; }
.cart-header{ display:flex; justify-content:space-between; align-items:center; padding:1rem 1rem; border-bottom:1px solid #f6f8fb; }
.cart-items{ padding:1rem; display:flex; flex-direction:column; gap:.75rem; }
.cart-item{ display:flex; gap:.75rem; align-items:center; }
.cart-item img{ width:56px; height:56px; object-fit:cover; border-radius:8px; }
.cart-footer{ padding:1rem; border-top:1px solid #f6f8fb; display:flex; justify-content:space-between; align-items:center; }

/* MODAL */
.modal{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(6,10,25,0.45); z-index:100; padding:2rem; }
.modal.hidden{ display:none; }
.modal-card{ width:min(980px,95%); background:white; border-radius:14px; overflow:hidden; box-shadow:0 30px 80px rgba(2,8,23,0.25); }
.modal-body{ display:flex; gap:1rem; padding:1rem; }
.modal-left{ flex:1; display:flex; align-items:center; justify-content:center; padding:1rem; background:linear-gradient(180deg,#fbfdff,#f7fbff); }
.modal-left img{ max-width:85%; max-height:420px; object-fit:contain; }
.modal-right{ flex:1; padding:1rem 1.5rem; display:flex; flex-direction:column; gap:.8rem; }
.modal-right h2{ font-size:1.4rem; color:var(--primary); }
.artist{ color:var(--muted); font-size:.9rem; }

/* forms */
.custom-controls label{ font-size:.85rem; color:var(--muted); display:block; margin-top:.4rem; }
.custom-controls input[type="text"], .custom-controls input[type="color"], .custom-controls input[type="range"]{
  width:100%; padding:.55rem .6rem; margin-top:.35rem; border-radius:10px; border:1px solid #eef6ff;
}

/* AR mock */
.ar-mock{ margin-top:.6rem; height:120px; border-radius:10px; background:linear-gradient(180deg,#fff,#f6f9ff); display:flex; align-items:center; justify-content:center; color:var(--muted); border:1px dashed #e6eef8; }

/* FOOTER */
footer{ padding:2rem; margin-top:2rem; background:linear-gradient(180deg,#ffffff,#f7fbff); color:var(--muted); }
.footer-inner{ max-width:var(--max-width); margin:0 auto; display:flex; justify-content:space-between; }

/* Responsive */
@media (max-width:900px){
  .hero{ flex-direction:column; align-items:flex-start; padding:1rem; }
  .hero-art{ order:-1; margin-bottom:1rem; }
  .controls input[type="search"]{ width:140px; }
  .cart-panel{ right:12px; top:84px; width:320px; }
  .modal-body{ flex-direction:column; }
}
@media (max-width:520px){
  .controls{ gap:.4rem; }
  .controls select{ display:none; }
  .controls input[type="search"]{ display:none; }
  .products-grid{ grid-template-columns:repeat(2,1fr); gap:.8rem; padding:1rem; }
}