:root{
    --page:#FFFFFF;
    --page-ink:#1E1B15;
    --page-soft:#6E6759;
    --page-faint:#A8A092;
    --page-line:rgba(0,0,0,0.08);
    --ring:#FFFFFF;
    --card-grad:#FFFFFF;
    --card-line:rgba(0,0,0,0.09);
    --card-ink:#1E1B15;
    --card-soft:#6E6759;
    --card-faint:#A8A092;
    --card-chip:#F4F1EA;
    --badge:#C7A24C;
    --badge-ink:#211705;
    --green:#2E7D46;
    --red:#B3261E;
    --shadow:0 4px 14px rgba(30,24,10,0.10);
  }
  *{box-sizing:border-box;}
  body{
    margin:0; background:var(--page); color:var(--page-ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    padding-bottom:70px;
  }
  a{color:inherit;}
  button{font-family:inherit;}
  input,select,textarea{font-family:inherit;}
  :focus-visible{outline:2px solid var(--card-ink); outline-offset:2px;}
  .wrap{max-width:900px; margin:0 auto; padding-inline:16px;}

  .head-row{position:relative; padding-top:26px; padding-left:88px; min-height:34px; display:flex; align-items:center; gap:14px;}
  .avatar-wrap{
    position:absolute; left:0; top:-18px;
    width:74px; height:74px; border-radius:50%; border:4px solid var(--ring);
    background:var(--card-grad); flex-shrink:0; overflow:hidden;
    box-shadow:var(--shadow);
  }
  .avatar-wrap img{width:100%; height:100%; object-fit:cover; display:block;}
  .store-title{flex:1; padding-bottom:6px; display:flex; align-items:center; justify-content:space-between; gap:10px;}
  .store-title h1{font-size:1.35rem; margin:0; font-weight:800; color:var(--page-ink);}
  .icon-btns{display:flex; gap:16px; padding-bottom:10px;}
  .icon-btns button{background:none; border:none; color:var(--page-ink); cursor:pointer; padding:4px;}

  .status-row{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
    padding:10px 0 14px; border-bottom:1px solid var(--page-line); font-size:0.86rem; color:var(--page-soft);
  }
  .status-row .dot-sep{color:var(--page-faint); margin:0 4px;}
  .status-row .profile-link{font-weight:700; color:var(--page-ink); text-decoration:none;}

  h2.section-title{font-size:1.05rem; font-weight:800; margin:22px 0 12px; color:var(--page-ink);}
  .cat-header{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 0; margin-top:10px; cursor:pointer; user-select:none;
  }
  .cat-header .left{display:flex; align-items:center; gap:10px;}
  .cat-header h2{font-size:0.98rem; font-weight:800; text-transform:uppercase; margin:0; color:var(--page-ink);}
  .pill{
    font-size:0.62rem; font-weight:800; letter-spacing:0.03em; text-transform:uppercase;
    background:var(--card-grad); color:var(--card-ink); padding:4px 9px; border-radius:20px;
    box-shadow:var(--shadow);
  }
  .chev{transition:transform .15s ease; color:var(--page-ink); flex-shrink:0;}
  .cat-body{overflow:hidden;}
  .cat-body.collapsed{display:none;}

  .feat-card{
    width:176px; border-radius:14px; overflow:hidden; cursor:pointer;
    background:var(--card-grad); box-shadow:var(--shadow); border:1px solid var(--card-line);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .feat-card:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(30,24,10,0.16);}
  .feat-card img{width:100%; height:130px; object-fit:cover; display:block;}
  .feat-card .body{padding:11px 13px 14px;}
  .feat-card .name{font-size:0.8rem; font-weight:800; text-transform:uppercase; line-height:1.25; color:var(--card-ink);}
  .price-line{display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap;}
  .price-now{font-weight:800; font-size:0.95rem; color:var(--card-ink);}
  .price-was{font-size:0.78rem; color:var(--card-faint); text-decoration:line-through;}
  .price-badge{
    font-size:0.66rem; font-weight:800; background:var(--badge); color:var(--badge-ink);
    padding:2px 6px; border-radius:4px;
  }

  .prow{
    display:grid; grid-template-columns:1fr 84px; gap:14px; align-items:center;
    padding:14px; margin-bottom:14px; border-radius:14px; cursor:pointer;
    background:var(--card-grad); box-shadow:var(--shadow); border:1px solid var(--card-line);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .prow:hover{transform:translateY(-2px);}
  .prow .pname{font-size:0.86rem; font-weight:800; text-transform:uppercase; color:var(--card-ink);}
  .prow .pdesc{
    font-size:0.78rem; color:var(--card-soft); margin-top:3px;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;
  }
  .picon-row{display:flex; gap:8px; margin-top:6px; color:var(--card-faint);}
  .prow .pprice{font-weight:800; font-size:0.86rem; margin-top:6px; color:var(--badge);}
  .prow .pprice .was{font-weight:600; color:var(--card-faint); text-decoration:line-through; margin-right:6px;}
  .prow .thumb{width:84px; height:84px; border-radius:10px; object-fit:cover; border:1px solid var(--card-line);}
  .prow .thumb.placeholder{
    display:flex; align-items:center; justify-content:center; background:var(--card-chip); font-size:1.6rem;
  }
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 20px;}
  @media (max-width:620px){ .grid2{grid-template-columns:1fr;} }
  .grid2 .prow{grid-column:span 1;}

  footer{padding:34px 0 20px; font-size:0.76rem; color:var(--page-soft); text-align:center;}
  footer a{color:var(--page-faint); text-decoration:none;}

  .tabbar{
    position:fixed; left:0; right:0; bottom:0; z-index:50; background:var(--card-grad);
    border-top:1px solid var(--card-line); display:flex; justify-content:space-around;
    padding:8px 0 10px; box-shadow:0 -6px 20px rgba(30,24,10,0.10);
  }
  .tabbar button{
    background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:3px;
    color:var(--card-faint); font-size:0.72rem; font-weight:700; cursor:pointer; position:relative; min-width:70px;
  }
  .tabbar button.active{color:var(--badge);}
  .tabbar .badge{
    position:absolute; top:-4px; right:14px; background:var(--badge); color:var(--badge-ink);
    font-size:0.62rem; font-weight:800; border-radius:50%; width:16px; height:16px;
    display:flex; align-items:center; justify-content:center;
  }

  .overlay{position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:60; opacity:0; pointer-events:none; transition:opacity .15s ease;}
  .overlay.show{opacity:1; pointer-events:auto;}
  .drawer{
    position:fixed; right:0; top:0; bottom:0; width:100%; max-width:420px; z-index:61; background:var(--card-grad);
    transform:translateX(100%); transition:transform .2s ease; display:flex; flex-direction:column;
    box-shadow:-10px 0 30px rgba(0,0,0,0.4); color:var(--card-ink);
  }
  .drawer.show{transform:translateX(0);}
  .drawer-head{padding:16px; border-bottom:1px solid var(--card-line); display:flex; justify-content:space-between; align-items:center;}
  .drawer-head h2{margin:0; font-size:1rem; color:var(--card-ink);}
  .drawer-head button{background:none; border:1px solid var(--card-line); border-radius:50%; width:28px; height:28px; color:var(--card-ink); cursor:pointer;}
  .drawer-items{flex:1; overflow-y:auto; padding:6px 16px;}
  .drawer-empty{padding:50px 4px; text-align:center; color:var(--card-faint); font-size:0.9rem;}
  .drawer-item{display:flex; gap:10px; align-items:center; padding:12px 0; border-top:1px solid var(--card-line);}
  .drawer-item:first-child{border-top:none;}
  .drawer-item .info{flex:1;}
  .drawer-item .n{font-weight:700; font-size:0.85rem; color:var(--card-ink);}
  .drawer-item .u{font-size:0.76rem; color:var(--card-faint);}
  .qty{display:flex; align-items:center; gap:8px;}
  .qty button{width:26px; height:26px; border-radius:50%; border:1px solid var(--card-line); background:transparent; color:var(--card-ink); font-weight:800; cursor:pointer;}
  .qty .q{min-width:14px; text-align:center; font-weight:700; font-size:0.85rem; color:var(--card-ink);}
  .drawer-foot{padding:14px 16px 18px; border-top:1px solid var(--card-line);}
  .dtotal{display:flex; justify-content:space-between; font-weight:800; margin-bottom:12px; color:var(--card-ink);}
  .checkout-btn{
    width:100%; background:var(--green); color:#fff; border:none; border-radius:10px;
    padding:13px; font-weight:800; font-size:0.9rem; cursor:pointer;
  }
  .checkout-btn:disabled{opacity:0.4; cursor:not-allowed;}
  .orders-panel{padding:60px 20px; text-align:center; color:var(--card-faint); font-size:0.9rem;}

  .banner{position:relative; width:100%; height:clamp(320px, 52vw, 560px); overflow:hidden; background:#0A0805;}
  .banner-cups{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 32%;}

  .cat-strip{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px;
    padding:14px clamp(16px,4vw,40px) 6px;
    font-weight:700; font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--page-soft);
  }
  .cat-strip span{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
  .cat-strip svg{flex-shrink:0; color:var(--badge); width:14px; height:14px;}
  .cat-strip .tag{color:var(--badge);}

  .feat-strip{
    display:flex; flex-wrap:wrap; justify-content:center; gap:8px 26px;
    padding:6px clamp(16px,4vw,40px) 14px;
    border-bottom:1px solid var(--page-line);
    font-weight:700; font-size:0.68rem; letter-spacing:0.03em; text-transform:uppercase;
    color:var(--page-faint);
  }
  .feat-strip span{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
  .feat-strip svg{flex-shrink:0; color:var(--badge); width:14px; height:14px;}

  /* ---- checkout form ---- */
  .form-row{margin-bottom:12px;}
  .form-row label{display:block; font-size:0.76rem; font-weight:700; color:var(--card-soft); margin-bottom:5px; text-transform:uppercase; letter-spacing:.02em;}
  .form-row input, .form-row select, .form-row textarea{
    width:100%; padding:11px 12px; border-radius:9px; border:1px solid var(--card-line);
    background:#fff; color:var(--card-ink); font-size:0.88rem;
  }
  .form-grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .form-grid3{display:grid; grid-template-columns:2fr 1fr; gap:10px;}
  .pay-options{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
  .pay-opt{
    display:flex; align-items:center; gap:10px; padding:12px; border-radius:10px;
    border:1px solid var(--card-line); cursor:pointer; font-size:0.85rem; font-weight:700;
  }
  .pay-opt.selected{border-color:var(--badge); background:#FBF6EA;}
  .pay-opt input{margin:0;}
  .back-link{background:none; border:none; color:var(--card-soft); font-size:0.8rem; cursor:pointer; padding:0; margin-bottom:10px; text-decoration:underline;}
  .msg-error{color:var(--red); font-size:0.8rem; margin-top:8px;}
  .msg-ok{color:var(--green); font-size:0.85rem; margin-top:8px;}
  .confirm-box{padding:20px 4px; text-align:center;}
  .confirm-box .big{font-size:2rem;}
  .confirm-box h3{margin:10px 0 6px;}
  .confirm-box p{color:var(--card-soft); font-size:0.85rem;}
  .link-btn{display:inline-block; margin-top:14px; background:var(--card-chip); color:var(--card-ink); text-decoration:none; padding:10px 16px; border-radius:9px; font-weight:700; font-size:0.85rem;}

/* admin link in footer */
.admin-link {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--gold, #c9a227);
  color: #1a1a1a;
  font-weight: 700;
  text-decoration: none;
}
.admin-link:hover { filter: brightness(1.1); }