/* ============================================================
   shop.css — GoodVizes shop features
   Loaded AFTER style.css. Does not touch header/nav/logo rules.
   Palette matches existing brand: gold #DAA520 on dark header,
   light content background.
   ============================================================ */

:root{
  --gv-gold:#DAA520;
  --gv-gold-dark:#B8860B;
  --gv-ink:#1a1a1a;
  --gv-bg:#FAFAFA;
  --gv-card:#ffffff;
  --gv-border:#ececec;
  --gv-muted:#8a8a8a;
  --gv-danger:#C0392B;
  --gv-radius:14px;
}

body{ background:var(--gv-bg); }

/* -------- category chips -------- */
.category-scroll{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:14px 16px;
  scrollbar-width:none;
}
.category-scroll::-webkit-scrollbar{ display:none; }

.cat-chip{
  flex:0 0 auto;
  padding:8px 16px;
  border-radius:999px;
  border:1px solid var(--gv-border);
  background:var(--gv-card);
  color:var(--gv-ink);
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  transition:.15s ease;
}
.cat-chip.active{
  background:var(--gv-gold);
  border-color:var(--gv-gold);
  color:#1a1a1a;
}

/* -------- product grid -------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  padding:4px 16px 40px;
}
@media (min-width:640px){
  .product-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:960px){
  .product-grid{ grid-template-columns:repeat(4,1fr); }
}

.product-card{
  background:var(--gv-card);
  border:1px solid var(--gv-border);
  border-radius:var(--gv-radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.product-img{
  aspect-ratio:1/1;
  background:#f2f2f2;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#c7c7c7;
  position:relative;
  cursor:pointer;
}
.product-img img{ width:100%; height:100%; object-fit:cover; }
.stock-tag{
  position:absolute; top:8px; left:8px;
  background:rgba(0,0,0,.75); color:#fff;
  font-size:.65rem; font-weight:700;
  padding:3px 8px; border-radius:6px;
  text-transform:uppercase;
}

.product-info{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; }
.product-name{ font-size:.88rem; font-weight:600; color:var(--gv-ink); line-height:1.25; cursor:pointer; }
.product-price{ font-size:.95rem; font-weight:700; color:var(--gv-gold-dark); }

/* -------- add to cart: split control --------
   Default state: single full-width "Add to cart" button.
   Once an item is added, it splits into two buttons — a
   decrement (−) and an increment (+) — with the live qty
   between them, so shoppers can adjust quantity right on
   the card without opening the cart. */
.add-controls{ margin-top:2px; }

.add-btn{
  width:100%;
  border:none;
  background:var(--gv-ink);
  color:#fff;
  font-weight:600;
  font-size:.8rem;
  padding:9px 10px;
  border-radius:9px;
  cursor:pointer;
  transition:.15s ease;
}
.add-btn:hover{ background:var(--gv-gold-dark); }
.add-btn:disabled{ background:#d9d9d9; color:#999; cursor:not-allowed; }

.qty-split{
  display:flex;
  align-items:stretch;
  border-radius:9px;
  overflow:hidden;
  border:1px solid var(--gv-ink);
}
.qty-split button{
  flex:0 0 34px;
  border:none;
  background:var(--gv-ink);
  color:#fff;
  font-size:1rem;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease;
}
.qty-split button:hover{ background:var(--gv-gold-dark); }
.qty-split .qty-count{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  font-weight:700;
  color:var(--gv-ink);
  background:#fff;
}

/* -------- badges -------- */
.icon-btn{ position:relative; }
.cart-badge{
  position:absolute; top:-6px; right:-8px;
  background:var(--gv-gold); color:#1a1a1a;
  font-size:.65rem; font-weight:800;
  min-width:17px; height:17px;
  border-radius:999px;
  display:none; align-items:center; justify-content:center;
  padding:0 4px;
}

/* -------- states -------- */
.loading-state,.empty-state{
  grid-column:1/-1;
  text-align:center;
  color:var(--gv-muted);
  padding:60px 20px;
  font-size:.9rem;
}

/* -------- generic page shell -------- */
.gv-page{ max-width:720px; margin:0 auto; padding:20px 16px 40px; }
.gv-page h1{ font-size:1.3rem; margin:4px 0 18px; color:var(--gv-ink); }

/* -------- cart -------- */
.cart-item{
  display:flex; gap:12px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--gv-border);
}
.cart-item img{ width:60px; height:60px; border-radius:10px; object-fit:cover; background:#f2f2f2; }
.cart-item-details{ flex:1; }
.cart-item-name{ font-weight:600; font-size:.9rem; color:var(--gv-ink); }
.cart-item-price{ color:var(--gv-gold-dark); font-weight:700; font-size:.85rem; margin-top:2px; }

.qty-control{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.qty-control button{
  width:26px; height:26px; border-radius:8px; border:1px solid var(--gv-border);
  background:#fff; font-weight:700; cursor:pointer;
}
.qty-control span{ min-width:16px; text-align:center; font-weight:600; }
.remove-link{ color:var(--gv-danger); font-size:.75rem; font-weight:600; cursor:pointer; margin-left:auto; }

.cart-summary{
  background:var(--gv-card); border:1px solid var(--gv-border);
  border-radius:var(--gv-radius); padding:16px; margin-top:18px;
}
.summary-row{ display:flex; justify-content:space-between; padding:5px 0; font-size:.9rem; color:var(--gv-ink); }
.summary-row.total{ font-weight:800; font-size:1.05rem; border-top:1px solid var(--gv-border); margin-top:6px; padding-top:10px; }

.gv-btn{
  width:100%; border:none; background:var(--gv-gold);
  color:#1a1a1a; font-weight:800; font-size:.95rem;
  padding:14px; border-radius:12px; cursor:pointer; margin-top:14px;
  transition:.15s ease;
}
.gv-btn:hover{ background:var(--gv-gold-dark); color:#fff; }
.gv-btn.secondary{ background:#fff; border:1px solid var(--gv-border); color:var(--gv-ink); }
.gv-btn:disabled{ background:#e2e2e2; color:#999; cursor:not-allowed; }

/* -------- forms (checkout / account) -------- */
.gv-field{ margin-bottom:14px; }
.gv-field label{ display:block; font-size:.8rem; font-weight:600; color:var(--gv-ink); margin-bottom:6px; }
.gv-field input,.gv-field textarea,.gv-field select{
  width:100%; border:1px solid var(--gv-border); border-radius:10px;
  padding:12px; font-size:.9rem; background:#fff; color:var(--gv-ink);
  font-family:inherit;
}
.gv-field input:focus,.gv-field textarea:focus{ outline:2px solid var(--gv-gold); border-color:var(--gv-gold); }

.form-error{ color:var(--gv-danger); font-size:.82rem; margin:-6px 0 12px; display:none; }
.form-error.show{ display:block; }
.form-success{ color:#1e7d34; font-size:.82rem; margin:-6px 0 12px; display:none; }
.form-success.show{ display:block; }

/* -------- account / auth tabs -------- */
.auth-tabs{ display:flex; gap:6px; background:#eee; padding:4px; border-radius:12px; margin-bottom:20px; }
.auth-tab{ flex:1; text-align:center; padding:10px; border-radius:9px; font-weight:700; font-size:.85rem; cursor:pointer; color:var(--gv-muted); }
.auth-tab.active{ background:#fff; color:var(--gv-ink); }

.account-card{ background:var(--gv-card); border:1px solid var(--gv-border); border-radius:var(--gv-radius); padding:16px; margin-bottom:14px; }
.account-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--gv-border); font-size:.88rem; }
.account-row:last-child{ border-bottom:none; }
.logout-link{ color:var(--gv-danger); font-weight:600; font-size:.85rem; cursor:pointer; }

.order-card{ background:var(--gv-card); border:1px solid var(--gv-border); border-radius:var(--gv-radius); padding:14px; margin-bottom:12px; }
.order-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.order-status{ font-size:.7rem; font-weight:800; padding:4px 10px; border-radius:999px; text-transform:uppercase; }
.order-status.pending{ background:#FFF3CD; color:#8a6d00; }
.order-status.processing{ background:#DDEBFF; color:#1652A6; }
.order-status.completed{ background:#DEF7E4; color:#1E7D34; }
.order-status.cancelled{ background:#FBE0DE; color:#C0392B; }

/* -------- profile avatar (account page + admin) --------
   .avatar-upload is the positioning box (no overflow clip),
   .avatar-photo is the circular mask around the image, and
   .avatar-edit-btn sits on top of both as a sibling so it's
   never clipped by the photo's rounded overflow:hidden. */
.avatar-block{ display:flex; flex-direction:column; align-items:center; margin-bottom:20px; }
.avatar-upload{ position:relative; width:88px; height:88px; }
.avatar-photo{
  width:100%; height:100%; border-radius:50%;
  background:#eee; overflow:hidden; border:2px solid var(--gv-border);
}
.avatar-upload img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar-upload .avatar-placeholder{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#bbb;
}
.avatar-edit-btn{
  position:absolute; bottom:-2px; right:-2px; z-index:2;
  width:28px; height:28px; border-radius:50%;
  background:var(--gv-gold); color:#1a1a1a; border:2px solid #fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.avatar-edit-btn svg{ width:14px; height:14px; }
.avatar-upload input[type="file"]{ display:none; }

.account-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.edit-link{ color:var(--gv-gold-dark); font-weight:700; font-size:.8rem; cursor:pointer; }

/* -------- payment method (checkout) -------- */
.pay-methods{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.pay-method{
  display:flex; align-items:flex-start; gap:10px;
  border:1px solid var(--gv-border); border-radius:12px; padding:12px;
  cursor:pointer; transition:.15s ease;
}
.pay-method.selected{ border-color:var(--gv-gold); background:#FFFBEF; }
.pay-method input[type="radio"]{ margin-top:3px; accent-color:var(--gv-gold-dark); flex-shrink:0; }
.pay-method-label{ font-weight:700; font-size:.9rem; color:var(--gv-ink); }
.pay-method-desc{ font-size:.78rem; color:var(--gv-muted); margin-top:2px; }
.bank-details{
  background:#FFFBEF; border:1px dashed var(--gv-gold); border-radius:10px;
  padding:12px; margin-top:10px; font-size:.85rem; display:none;
}
.bank-details.show{ display:block; }
.bank-details div{ padding:2px 0; }
.bank-details strong{ color:var(--gv-ink); }

/* -------- delivery estimate -------- */
.delivery-estimate{
  display:flex; align-items:center; gap:8px;
  background:#EFF7EF; color:#1E7D34; border-radius:10px;
  padding:10px 12px; font-size:.82rem; font-weight:600; margin:12px 0;
}
.delivery-estimate i{ width:16px; height:16px; flex-shrink:0; }
.order-card .delivery-estimate{ margin:8px 0 0; }

/* -------- skeleton card variants -------- */
.skeleton-card .product-img.skeleton{ border-radius:0; }
.skeleton-order-card{ background:var(--gv-card); border:1px solid var(--gv-border); border-radius:var(--gv-radius); padding:14px; margin-bottom:12px; }

/* -------- product detail page -------- */
.product-detail{ padding-bottom:20px; }
.product-detail-img{
  width:100%; aspect-ratio:1/1; background:#f2f2f2;
  display:flex; align-items:center; justify-content:center; color:#c7c7c7;
}
.product-detail-img img{ width:100%; height:100%; object-fit:cover; }
.product-detail-body{ padding:18px 16px 40px; max-width:720px; margin:0 auto; }
.product-detail-name{ font-size:1.25rem; font-weight:700; color:var(--gv-ink); margin-bottom:6px; }
.product-detail-price{ font-size:1.1rem; font-weight:800; color:var(--gv-gold-dark); margin-bottom:16px; }
.product-detail-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.product-detail-meta span{
  font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:999px;
  background:#eee; color:var(--gv-muted); text-transform:uppercase;
}
.product-detail-desc{ font-size:.9rem; color:var(--gv-ink); margin-bottom:22px; white-space:pre-line; }