@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,400..700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Caveat:wght@500;700&display=swap');

  :root{
    --kraft: #e4d9be;
    --kraft-dark: #d3c39a;
    --paper: #f7f2e6;
    --ink: #26211b;
    --ink-soft: #55503f;
    --denim: #33465c;
    --denim-dark: #4a1420;
    --rust: #6f1f2d;
    --olive: #b8903f;
    --gold-soft: #cba554;
    --line: rgba(38,33,27,0.18);
    --shadow: 0 10px 24px -12px rgba(38,33,27,0.45);
  }

  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:
      radial-gradient(ellipse at top left, rgba(255,255,255,0.35), transparent 60%),
      var(--kraft);
    background-attachment: fixed;
    color: var(--ink);
    font-family: 'Space Grotesk', sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }
  body::before{
    content:"";
    position: fixed; inset:0;
    pointer-events:none;
    opacity:.5;
    background-image:
      repeating-linear-gradient(0deg, rgba(38,33,27,0.03) 0px, transparent 1px, transparent 2px, rgba(38,33,27,0.03) 3px),
      repeating-linear-gradient(90deg, rgba(38,33,27,0.02) 0px, transparent 1px, transparent 2px, rgba(38,33,27,0.02) 3px);
    mix-blend-mode: multiply;
    z-index: 0;
  }

  .wrap{ max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; position:relative; z-index:1;}

  /* ---------- Header / masthead (brand logo) ---------- */
  header.masthead{
    position: relative; text-align:center;
    padding: 30px 0 20px;
    border-bottom: 2px dashed var(--line);
  }
  .logo-wrap{ max-width: 290px; margin: 0 auto; }
  .logo-wrap svg{ width:100%; height:auto; display:block; }
  .store-divider{
    display:flex; align-items:center; gap:14px;
    margin-top: 2px; padding: 0 6px;
    font-family:'Fraunces', serif; font-size:15px; letter-spacing:5px;
    color: var(--rust);
  }
  .store-divider span{
    flex:1 1 auto; height:1px; background: var(--rust); position:relative;
  }
  .store-divider span::after{
    content:""; position:absolute; top:-3px; width:6px; height:6px;
    border-radius:50%; background: var(--rust);
  }
  .store-divider span:first-child::after{ right:0; }
  .store-divider span:last-child::after{ left:0; }
  .masthead-tagline{
    font-family:'Space Mono', monospace; font-size:12px; color: var(--ink-soft);
    margin-top: 6px;
  }
  .admin-toggle{
    font-family:'Space Mono', monospace; font-size:12px;
    background: var(--ink); color: var(--paper);
    border:none; padding:9px 14px; border-radius:20px; cursor:pointer;
    display:flex; align-items:center; gap:6px; white-space:nowrap;
    transition: transform .15s ease, background .15s ease;
  }
  .admin-toggle:hover{ background: var(--denim-dark); transform: translateY(-1px); }
  header.masthead .admin-toggle{ position:absolute; top:16px; right:0; }
  @media (max-width: 560px){
    header.masthead .admin-toggle{ position:static; margin: 0 auto 16px; }
    .logo-wrap{ max-width: 220px; }
  }

  /* ---------- price-tag motif (reused in product empty state) ---------- */
  .price-tag{
    position:relative;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 6px;
    padding: 22px 30px 26px;
    transform: rotate(-4deg);
    box-shadow: var(--shadow);
    flex-shrink:0;
  }
  .price-tag::before{
    content:""; position:absolute; top:-11px; left:26px;
    width:16px; height:16px; border-radius:50%;
    background: var(--kraft); border:2px solid var(--ink);
  }
  .price-tag::after{
    content:""; position:absolute; top:-38px; left:34px;
    width:2px; height:30px; background: var(--ink-soft);
    transform: rotate(18deg);
  }
  .price-tag .old{
    font-family:'Space Mono', monospace; font-size: 22px; color: var(--ink-soft);
    text-decoration: line-through; text-decoration-color: var(--rust); text-decoration-thickness: 3px;
  }
  .price-tag .new{
    font-family:'Fraunces', serif; font-style: italic; font-weight:700;
    font-size: 44px; color: var(--rust); margin-top:2px;
  }

  /* ---------- Filter tabs ---------- */
  .filters{ display:flex; gap:10px; flex-wrap:wrap; margin: 8px 0 28px; }
  .filters button{
    font-family:'Space Mono', monospace; font-size:12.5px;
    background: transparent; border:1.5px solid var(--ink);
    padding: 8px 16px; border-radius: 20px; cursor:pointer; color: var(--ink);
    transition: all .15s ease;
  }
  .filters button.active, .filters button:hover{ background: var(--ink); color: var(--paper); }
  .subfilters{ margin: -14px 0 26px; }
  .subfilters button{
    border-color: var(--ink-soft); color: var(--ink-soft); font-size:11.5px; padding:6px 14px;
  }
  .subfilters button.active, .subfilters button:hover{
    background: var(--olive); border-color: var(--olive); color: var(--paper);
  }

  /* ---------- Catalog grid ---------- */
  #catalog{
    display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
    gap: 34px 24px; padding-top: 10px;
  }
  .tag-card{
    position:relative; background: var(--paper);
    border:2px solid var(--ink); border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 14px 14px 16px;
    animation: fadeIn .4s ease both;
    transition: transform .2s ease;
  }
  .tag-card:hover{ transform: translateY(-4px) rotate(0deg) !important; }
  .tag-card::before{
    content:""; position:absolute; top:-10px; left:22px;
    width:14px; height:14px; border-radius:50%;
    background: var(--kraft); border:2px solid var(--ink); z-index:2;
  }
  .tag-card .photo{
    width:100%; aspect-ratio: 1/1; object-fit:cover;
    border-radius:4px; border:1px solid var(--line); background: var(--kraft-dark);
    margin-bottom:10px; display:block;
  }
  .tag-card .ticket{
    font-family:'Space Mono', monospace; font-size:10.5px; color: var(--ink-soft);
    position:absolute; top:10px; right:12px; background:var(--paper); padding:1px 6px;
  }
  .tag-card .cat-badge{
    display:inline-block; font-family:'Space Mono', monospace; font-size:10px;
    text-transform:uppercase; letter-spacing:0.04em;
    background: var(--olive); color: var(--paper); padding:3px 8px; border-radius:10px;
    margin-bottom:8px;
  }
  .tag-card h3{ font-family:'Fraunces', serif; font-size:18px; margin:0 0 4px; line-height:1.25; }
  .tag-card .desc{ font-size:12.5px; color: var(--ink-soft); line-height:1.45; margin:0 0 10px; min-height: 18px;}
  .tag-card .bottom-row{ display:flex; align-items:center; justify-content:space-between; }
  .tag-card .price{ font-family:'Fraunces', serif; font-style:italic; font-weight:700; font-size:20px; color: var(--rust); }
  .tag-card .size{ font-family:'Space Mono', monospace; font-size:11px; border:1px solid var(--ink); border-radius:4px; padding:2px 6px; }

  @keyframes fadeIn{ from{opacity:0; transform: translateY(8px);} to{opacity:1;} }

  /* ---------- Empty state ---------- */
  .empty-state{
    grid-column: 1/-1; text-align:center; padding: 50px 20px; color: var(--ink-soft);
  }
  .empty-state .price-tag{ margin: 0 auto 18px; display:inline-block; transform:rotate(-3deg); }
  .empty-state .price-tag .new{ font-size:22px; }

  /* ---------- Admin panel ---------- */
  #admin-panel{
    display:none; margin: 10px 0 40px; background: var(--paper);
    border:2px solid var(--ink); border-radius: 10px; padding: 26px;
    box-shadow: var(--shadow);
  }
  #admin-panel.open{ display:block; animation: fadeIn .3s ease both; }
  #admin-panel h2{ font-family:'Fraunces', serif; font-size:22px; margin:0 0 4px; }
  #admin-panel .sub{ font-family:'Space Mono', monospace; font-size:11.5px; color: var(--ink-soft); margin:0 0 20px; }
  .admin-grid{ display:grid; grid-template-columns: 1fr 220px; gap:26px; }
  @media (max-width: 640px){ .admin-grid{ grid-template-columns: 1fr; } }

  .field{ margin-bottom:14px; }
  .field label{ display:block; font-family:'Space Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.03em; color: var(--ink-soft); margin-bottom:5px; }
  .field input[type=text], .field input[type=number], .field select, .field textarea{
    width:100%; font-family:'Space Grotesk', sans-serif; font-size:14px;
    padding:10px 12px; border:1.5px solid var(--ink); border-radius:6px; background:#fff;
    color: var(--ink);
  }
  .field textarea{ resize: vertical; min-height:64px; }
  .row2{ display:grid; grid-template-columns: 1fr 1fr; gap:14px; }

  .photo-drop{
    border:2px dashed var(--ink); border-radius:8px; padding:14px; text-align:center;
    cursor:pointer; font-family:'Space Mono', monospace; font-size:12px; color: var(--ink-soft);
    background: var(--kraft); position:relative; overflow:hidden;
  }
  .photo-drop img{ width:100%; border-radius:4px; display:block; margin-top:8px; }
  .photo-drop input{ display:none; }

  .publish-btn{
    font-family:'Space Mono', monospace; font-weight:700; font-size:13px;
    background: var(--rust); color: var(--paper); border:none;
    padding:12px 22px; border-radius:8px; cursor:pointer; margin-top:6px;
    transition: transform .12s ease;
  }
  .publish-btn:hover{ transform: translateY(-2px); }
  .publish-btn:active{ transform: scale(.96); }
  .publish-btn:disabled{ opacity:.5; cursor:not-allowed; }

  .preview-label{ font-family:'Space Mono', monospace; font-size:11px; color: var(--ink-soft); margin-bottom:8px; text-transform:uppercase; }

  .admin-footer-row{ display:flex; justify-content:space-between; align-items:center; margin-top: 8px; }
  .reset-link{ font-family:'Space Mono', monospace; font-size:11px; color: var(--ink-soft); background:none; border:none; text-decoration:underline; cursor:pointer; }

  /* ---------- Toast / social preview ---------- */
  #toast{
    position: fixed; right:20px; bottom:20px; z-index:50;
    display:flex; flex-direction:column; gap:10px; align-items:flex-end;
    pointer-events:none;
  }
  .toast-card{
    pointer-events:auto;
    background: var(--ink); color: var(--paper);
    border-radius:10px; padding:12px 16px; font-family:'Space Mono', monospace; font-size:12px;
    box-shadow: var(--shadow); max-width:280px;
    animation: slideIn .3s ease both;
    display:flex; gap:10px; align-items:center;
  }
  .toast-card img{ width:36px; height:36px; border-radius:6px; object-fit:cover; flex-shrink:0; }
  @keyframes slideIn{ from{opacity:0; transform: translateX(30px);} to{opacity:1;} }

  footer{
    margin-top: 40px; padding-top:20px; border-top: 2px dashed var(--line);
    font-family:'Space Mono', monospace; font-size:11px; color: var(--ink-soft);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  }

/* ---------- Account link (header) ---------- */
.account-link{
  font-family:'Space Mono', monospace; font-size:12px;
  border:1.5px solid var(--rust); color: var(--rust); background:transparent;
  padding:8px 14px; border-radius:20px; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  transition: all .15s ease;
}
.account-link:hover{ background: var(--rust); color: var(--paper); }
header.masthead .account-link{ position:absolute; top:16px; left:0; }
@media (max-width: 560px){
  header.masthead .account-link{ position:static; display:inline-flex; margin: 0 auto 10px; }
}

/* ---------- Account / auth pages ---------- */
.auth-card{
  max-width:420px; margin:30px auto 0; background: var(--paper);
  border:2px solid var(--ink); border-radius:10px; padding:26px;
  box-shadow: var(--shadow);
}
.auth-tabs{ display:flex; gap:8px; margin-bottom:18px; }
.auth-tab{
  flex:1; font-family:'Space Mono', monospace; font-size:12.5px;
  background:transparent; border:1.5px solid var(--ink); color: var(--ink);
  padding:8px; border-radius:20px; cursor:pointer;
}
.auth-tab.active{ background: var(--ink); color: var(--paper); }
.form-error{ color: var(--rust); font-family:'Space Mono', monospace; font-size:12px; margin:-4px 0 10px; min-height:14px; }
.member-note{
  max-width:420px; margin:16px auto 0; text-align:center;
  font-family:'Space Mono', monospace; font-size:12px; color: var(--ink-soft);
}
.account-header{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  margin: 30px 0 6px; flex-wrap:wrap;
}
.account-header h2{ font-family:'Fraunces', serif; margin:0 0 4px; font-size:24px; }
.section-title{ font-family:'Fraunces', serif; font-size:19px; margin: 30px 0 14px; }
.address-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:18px;
}
.address-card{
  background: var(--paper); border:2px solid var(--ink); border-radius:8px;
  padding:16px; box-shadow: var(--shadow); position:relative;
}
.address-card h4{ font-family:'Fraunces', serif; margin: 6px 0 6px; font-size:16px; }
.address-card p{ font-size:12.5px; color: var(--ink-soft); margin:2px 0; line-height:1.4; }