:root{
    --linen:#FFFFFF;
    --card:#FFFFFF;
    --border:#E4DCCB;
    --ink:#241F1B;
    --ink-soft:#5B5349;
    --rust:#A6432B;
    --rust-deep:#7E3020;
    --teal:#3F5C56;
  }
  *{box-sizing:border-box;}
  body{ margin:0; background:var(--linen); color:var(--ink); font-family:'Inter',sans-serif; }
  h1,h2,h3,.display{ font-family:'Fraunces',serif; font-weight:600; margin:0; }

  header{
    padding:22px 6vw; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:end; flex-wrap:wrap; gap:12px;
  }
  header .brand {width: 100%;}
  header .brand .display{ font-size:26px; justify-content: center; text-align: center; align-items: center;}
  header .brand .tag{ color:var(--ink-soft); font-size:13px; margin-top:2px; }
  header .actions{ display:flex; gap:10px; flex-wrap:wrap; }
  .back-btn-section {
    padding: 20px 6vw 6px;
    text-align: end;
  }
  .btn{
    font:inherit; font-size:13px; cursor:pointer; padding:9px 16px;
    border:1px solid var(--ink); background:none; color:var(--ink);
  }
  .btn:hover{ background:var(--ink); color:var(--linen); }
  .btn.primary{ background:var(--rust); border-color:var(--rust); color:#fff; }
  .btn.primary:hover{ background:var(--rust-deep); border-color:var(--rust-deep); }
  .btn.on{ background:var(--teal); border-color:var(--teal); color:#fff; }

  .crumbs{ padding:18px 6vw 0; font-size:13px; color:var(--ink-soft); }
  .crumbs button{ background:none;border:none;padding:0;font:inherit;color:var(--ink-soft);cursor:pointer; }
  .crumbs button:hover{ color:var(--rust); }
  .crumbs .sep{ margin:0 6px; }
  .crumbs .current{ color:var(--ink); }

  .section-head{ padding:20px 6vw 6px; }
  .section-head .display{ font-size:32px; }
  .section-head p{ margin:6px 0 0; color:var(--ink-soft); font-size:14.5px; max-width:60ch; }

  .grid{ display:grid; gap:22px; padding:22px 6vw 60px; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); }
  .tile{ position:relative; background:var(--card); border:1px solid var(--border); cursor:pointer; overflow:hidden; display:flex; flex-direction:column; }
  .tile .img-wrap{ aspect-ratio:1/1; overflow:hidden; background:#EDE6D6; }
  .tile img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
  .tile:hover img{ transform:scale(1.06); }
  .tile .cap{ padding:14px 16px 16px; border-top:1px solid var(--border); }
  .tile .cap .name{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; }
  .tile .cap .meta{ font-size:12.5px; color:var(--ink-soft); margin-top:3px; }
  .tile.category .img-wrap{ aspect-ratio:4/5; }
  .tile.category .cap{ display:flex; align-items:center; justify-content:space-between; }
  .tile.category .count{ font-size:12px; color:var(--teal); border:1px solid var(--teal); padding:2px 8px; border-radius:20px; }
  .tile.product .price{ color:var(--rust-deep); font-weight:600; font-family:'Fraunces',serif; font-size:15px; margin-top:4px; }

  .tile.add{
    align-items:center; justify-content:center; min-height:230px;
    border:1.5px dashed var(--ink-soft); background:none; color:var(--ink-soft);
  }
  .tile.add:hover{ border-color:var(--rust); color:var(--rust); }
  .tile.add .plus{ font-size:34px; font-family:'Fraunces',serif; line-height:1; }
  .tile.add .label{ font-size:13px; margin-top:6px; }

  .tile-tools{ position:absolute; top:8px; right:8px; display:flex; gap:6px; z-index:2; }
  .tile-tools button{
    width:28px; height:28px; border:1px solid var(--border); background:#fff;
    cursor:pointer; font-size:13px; line-height:1;
  }
  .tile-tools button:hover{ background:var(--ink); color:#fff; }
  .tile-tools .del:hover{ background:var(--rust); border-color:var(--rust); color:#fff; }

  /* view modal */
  .overlay{ position:fixed; inset:0; background:rgba(36,31,27,0.72); display:none; align-items:center; justify-content:center; padding:24px; z-index:50; }
  .overlay.open{ display:flex; }
  .modal{ background:var(--card); max-width:920px; width:100%; max-height:88vh; overflow:auto; display:grid; grid-template-columns:1.1fr 1fr; border:1px solid var(--border); }
  @media (max-width:680px){ .modal{ grid-template-columns:1fr; } }
  .modal .zoom-wrap{ background:#EDE6D6; display:flex; align-items:center; justify-content:center; overflow:hidden; min-height:280px; }
  .modal .zoom-wrap img{ width:100%; height:100%; object-fit:cover; }
  .modal .info{ padding:34px 32px; position:relative; }
  .modal .close{ position:absolute; top:14px; right:16px; background:none; border:none; font-size:22px; line-height:1; cursor:pointer; color:var(--ink-soft); }
  .modal .close:hover{ color:var(--rust); }
  .modal .cat-label{ font-size:12px; color:var(--teal); margin-bottom:8px; }
  .modal .name{ font-size:26px; margin-bottom:6px; }
  .modal .price{ font-family:'Fraunces',serif; color:var(--rust-deep); font-size:21px; margin:10px 0 20px; }
  .modal .details{ border-top:1px solid var(--border); padding-top:16px; display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; }
  .modal .details div .k{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); }
  .modal .details div .v{ font-size:14.5px; margin-top:2px; }
  .modal .desc{ margin-top:20px; font-size:14px; color:var(--ink-soft); line-height:1.6; }
  .modal .stock-tag{ display:inline-block; margin-top:18px; font-size:12px; padding:4px 10px; border:1px solid var(--border); }
  .stock-tag.in{ color:var(--teal); border-color:var(--teal); }
  .stock-tag.low{ color:var(--rust); border-color:var(--rust); }

  /* edit form modal */
  .form-modal{ background:var(--card); max-width:520px; width:100%; max-height:88vh; overflow:auto; border:1px solid var(--border); padding:30px 30px 26px; position:relative; }
  .form-modal h3{ font-size:21px; margin-bottom:18px; }
  .form-modal .close{ position:absolute; top:12px; right:14px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink-soft); }
  .form-modal .close:hover{ color:var(--rust); }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:5px; }
  .field input[type=text], .field input[type=number], .field select, .field textarea{
    width:100%; padding:9px 10px; border:1px solid var(--border); background:var(--linen); font:inherit; font-size:14px; color:var(--ink);
  }
  .field textarea{ resize:vertical; min-height:60px; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .upload-box{
    border:1.5px dashed var(--border); padding:14px; text-align:center; cursor:pointer; font-size:13px; color:var(--ink-soft);
  }
  .upload-box:hover{ border-color:var(--rust); color:var(--rust); }
  .upload-preview{ width:100%; aspect-ratio:1/1; object-fit:cover; margin-bottom:10px; display:none; background:#EDE6D6; }
  .form-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }
  .hint{ font-size:12px; color:var(--ink-soft); margin-top:16px; line-height:1.5; border-top:1px solid var(--border); padding-top:14px; }

  footer{ text-align:center; padding:26px; font-size:12.5px; color:var(--ink-soft); border-top:1px solid var(--border); }
  .edit-banner{
    background:var(--teal); color:#fff; text-align:center; font-size:13px; padding:8px; display:none;
  }
  .edit-banner.show{ display:block; }

  /* login modal */
  .login-modal{ background:var(--card); max-width:360px; width:100%; border:1px solid var(--border); padding:30px; position:relative; }
  .login-modal h3{ font-size:20px; margin-bottom:6px; }
  .login-modal p.sub{ font-size:13px; color:var(--ink-soft); margin:0 0 18px; }
  .login-modal .close{ position:absolute; top:12px; right:14px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--ink-soft); }
  .login-modal .close:hover{ color:var(--rust); }
  .login-error{ font-size:12.5px; color:var(--rust); margin-top:10px; display:none; }
  .login-error.show{ display:block; }