:root{
  --bg: #FFF7E6;
  --bg-2: #FFEAF2;
  --ink: #6b4a4a;
  --ink-dim: #a98787;
  --card: #FFE1EC;
  --card-2: #FFC9DE;
  --card-ink: #6b3550;
  --twine: #E38DA6;
  --shadow: rgba(107,74,74,0.18);
  --pink: #F2A6C4;
  --pink-deep: #E07A9E;
  --yellow: #F6D186;
  --yellow-deep: #E8B84B;
  --card-3: #FFF0D3;
  --card-4: #FFD47D;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255,255,255,0.6), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(255,201,222,0.45), transparent 55%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height:100vh;
}

a{ color: inherit; text-decoration:none; }

.masthead{ text-align:center; padding: 48px 20px 32px; }
.masthead h1{
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 0 6px;
  letter-spacing: 0.5px;
  color: var(--pink-deep);
}
.masthead p{ margin: 4px 0; color: var(--ink-dim); font-size: 1rem; }
.masthead .rule{
  width: 120px; height: 3px; margin: 16px auto 0;
  background: repeating-linear-gradient(90deg, var(--yellow-deep) 0 10px, transparent 10px 16px);
  opacity: .9;
}

.layout{
  max-width: 1180px; margin: 0 auto; padding: 10px 24px 80px;
  display: grid; grid-template-columns: 1fr 250px; gap: 36px; align-items: start;
}

/* ---------- Category panel ---------- */
aside.filters{
  background: var(--bg-2);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px; padding: 18px 16px;
  position: sticky; top: 20px;
}
aside.filters h2{
  font-size: 0.78rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-dim); margin: 0 0 12px; font-weight: 600;
}
.cat-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.cat-btn{
  width:100%; display:flex; align-items:center; gap:10px;
  background: transparent; border: none; color: var(--ink);
  font-size: 0.92rem; padding: 8px 8px; border-radius: 7px;
  cursor: pointer; text-align:left; transition: background .15s ease;
  font-family: inherit;
}
.cat-btn:hover{ background: rgba(0,0,0,0.05); }
.cat-btn.active{ background: rgba(0,0,0,0.08); }
.dot{ width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; box-shadow: inset 0 1px 1px rgba(0,0,0,.2); }
.cat-btn .count{ margin-left: auto; color: var(--ink-dim); font-size: 0.8rem; }

.sub-list{
  list-style:none; margin: 2px 0 4px 6px; padding: 0 0 0 14px;
  border-left: 1px solid rgba(0,0,0,0.12);
  display:flex; flex-direction:column; gap:2px;
}
.sub-btn{ font-size: 0.84rem; padding: 6px 8px; opacity: 0.85; }
.sub-btn:hover{ opacity: 1; }
.sub-dot{ width: 8px; height: 8px; }

.sort-bar{
  display:flex; align-items:center; justify-content:flex-end;
  gap: 10px; margin-bottom: 18px;
}
.sort-bar label{ font-size: 0.85rem; color: var(--ink-dim); }
.sort-bar select{
  background: var(--bg-2); color: var(--ink);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 6px; padding: 6px 10px; font-size: 0.88rem;
  font-family: inherit; cursor: pointer;
}

/* ---------- Grid of menu-item cards ---------- */
.grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 34px 22px;
}

.tag-card{
  position: relative;
  display:block;
  background: linear-gradient(180deg, var(--card-3), var(--card-4));
  border-radius: 6px 6px 10px 10px;
  padding: 14px 14px 16px;
  cursor: pointer;
  box-shadow: 0 6px 14px var(--shadow);
  transform: rotate(-1deg);
  transition: transform .18s ease, box-shadow .18s ease;
  color: var(--card-ink);
}
.grid > a.tag-card:nth-child(even){ transform: rotate(1.1deg); }
.tag-card:hover{ transform: rotate(0deg) translateY(-3px); box-shadow: 0 12px 22px var(--shadow); }

.tag-string{
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:22px; height:16px; border: 3px solid var(--twine); border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.tag-hole{
  position:absolute; top: 8px; left:50%; transform:translateX(-50%);
  width:12px; height:12px; border-radius:50%;
  background: var(--bg-2);
  box-shadow: inset 0 2px 3px rgba(0,0,0,.25);
}
.price-sticker{
  position:absolute; top:-12px; right:-10px; width: 70px; height:70px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  transform: rotate(-9deg);
  box-shadow: 0 4px 8px rgba(0,0,0,.2);
  font-weight: 800; font-size: 0.82rem; color: #fff;
  text-align:center; line-height:1.05;
  border: 2px solid rgba(255,255,255,.6);
}
.tag-photo{
  margin-top: 18px; width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 4px; border: 3px solid rgba(255,255,255,.7); display:block;
}
.tag-title{ margin: 12px 2px 2px; font-weight: 700; font-size: 1rem; line-height: 1.25; }
.tag-cat{ margin: 3px 2px 0; font-size: 0.78rem; opacity: .7; font-weight: 600; }

.load-more-wrap{ text-align:center; margin-top: 30px; }
.load-more-btn{
  background: var(--bg-2); color: var(--ink);
  border: 1px solid rgba(0,0,0,0.15);
  padding: 10px 26px; border-radius: 24px;
  font-size: 0.9rem; font-family: inherit; cursor: pointer;
  transition: background .15s ease;
}
.load-more-btn:hover{ background: rgba(0,0,0,0.06); }

.empty{ grid-column: 1/-1; text-align:center; color: var(--ink-dim); padding: 50px 10px; font-style: italic; }

/* ---------- Modal (homepage quick view) ---------- */
.overlay{
  position: fixed; inset:0; background: rgba(60,30,40,0.55);
  display:none; align-items:center; justify-content:center; padding: 24px; z-index: 50;
}
.overlay.open{ display:flex; }
.modal{
  background: var(--card-3); color: var(--card-ink); max-width: 780px; width:100%; max-height: 88vh;
  overflow-y: auto; border-radius: 12px; position:relative; padding: 28px;
  box-shadow: 0 20px 50px rgba(107,74,74,.35);
}
.modal-close{
  position:absolute; top:14px; right:16px; background: rgba(0,0,0,.08); border:none;
  width:32px; height:32px; border-radius:50%; font-size:1.1rem; cursor:pointer; color: var(--card-ink);
}
.modal-close:hover{ background: rgba(0,0,0,.15); }

/* ---------- Shared detail layout (modal + static item pages) ---------- */
.detail-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 26px; margin-top: 6px; }
@media (max-width: 640px){ .detail-grid{ grid-template-columns: 1fr; } }

.detail-main-photo{
  width:100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 8px;
  border: 4px solid rgba(255,255,255,.75); cursor: zoom-in;
}
.thumb-row{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.thumb-row img{
  width: 58px; height:58px; object-fit:cover; border-radius:5px; cursor:pointer;
  border: 2px solid transparent; opacity:.8;
}
.thumb-row img.active{ border-color: var(--twine); opacity:1; }

.detail-info h1, .detail-info h2{
  margin: 0 0 6px; font-family: Georgia, serif; font-style: italic; font-size: 1.5rem;
}
.detail-price-row{ display:flex; align-items:center; gap:10px; margin: 6px 0 14px; flex-wrap:wrap; }
.detail-price-badge{ padding: 5px 12px; border-radius: 20px; font-weight: 800; color:#fff; font-size: 0.95rem; }
.detail-cat{ display:flex; align-items:center; gap:7px; font-size:0.85rem; font-weight:600; opacity:.75; }
.detail-condition{
  display:inline-block; margin: 10px 0 0; font-size: 0.8rem;
  background: rgba(0,0,0,.06); padding: 3px 10px; border-radius: 20px;
}
.detail-desc{ margin-top: 14px; line-height: 1.55; font-size: 0.95rem; }
.detail-desc p{ margin: 0 0 12px; }
.detail-desc p:last-child{ margin-bottom: 0; }
.detail-desc h1, .detail-desc h2, .detail-desc h3, .detail-desc h4{
  font-family: Georgia, serif; font-style: italic; font-weight: 700;
  margin: 16px 0 6px; line-height: 1.25; color: var(--card-ink);
}
.detail-desc h1{ font-size: 1.25rem; }
.detail-desc h2{ font-size: 1.12rem; }
.detail-desc h3{ font-size: 1.02rem; }
.detail-desc h4{ font-size: 0.95rem; }
.detail-desc h1:first-child, .detail-desc h2:first-child,
.detail-desc h3:first-child, .detail-desc h4:first-child{ margin-top: 0; }
.detail-desc ul, .detail-desc ol{ margin: 0 0 12px; padding-left: 22px; }
.detail-desc li{ margin-bottom: 4px; }
.detail-desc strong, .detail-desc b{ font-weight: 700; }
.detail-desc em, .detail-desc i{ font-style: italic; }
.detail-desc u{ text-decoration: underline; }
.detail-desc a{ text-decoration: underline; }
.detail-desc blockquote{
  margin: 0 0 12px; padding-left: 12px;
  border-left: 3px solid var(--twine); opacity: .85; font-style: italic;
}

.detail-actions{ display:flex; align-items:center; gap: 14px; flex-wrap:wrap; margin-top: 14px; }
.open-full-link{ font-size: 0.85rem; text-decoration: underline; opacity: .8; }
.open-full-link:hover{ opacity: 1; }
.share-btn{
  background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.12);
  color: var(--card-ink); padding: 7px 16px; border-radius: 20px;
  font-size: 0.85rem; font-family: inherit; cursor: pointer;
  transition: background .15s ease;
}
.share-btn:hover{ background: rgba(0,0,0,.12); }

.detail-note{
  margin-top: 18px; font-size: 0.82rem; opacity: .65;
  border-top: 1px dashed rgba(0,0,0,.2); padding-top: 12px;
}

/* ---------- Static item page chrome ---------- */
.item-page-wrap{ max-width: 900px; margin: 0 auto; padding: 30px 24px 80px; }
.back-link{
  display:inline-flex; align-items:center; gap:6px;
  color: var(--ink-dim); font-size: 0.9rem; margin-bottom: 22px;
}
.back-link:hover{ color: var(--ink); }
.item-card{
  background: var(--card-2); color: var(--card-ink); border-radius: 12px; padding: 28px;
  box-shadow: 0 12px 30px var(--shadow);
}
.browse-more{ text-align:center; margin-top: 34px; }
.browse-more a{
  display:inline-block; background: var(--bg-2); border:1px solid rgba(0,0,0,.1);
  padding: 10px 22px; border-radius: 24px; font-size: 0.9rem; color: var(--ink);
}
.browse-more a:hover{ background: rgba(0,0,0,.06); }

/* ---------- Lightbox ---------- */
.lightbox{
  position: fixed; inset:0; background: rgba(30,15,20,.92);
  display:none; align-items:center; justify-content:center; z-index: 100; padding: 30px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width: 100%; max-height: 90vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-close, .lb-nav{
  position:absolute; background: rgba(255,255,255,0.18); border: none; color: #fff;
  cursor:pointer; border-radius: 50%;
}
.lb-close{ top: 22px; right: 22px; width:40px; height:40px; font-size: 1.2rem; }
.lb-nav{ top: 50%; transform:translateY(-50%); width:46px; height:46px; font-size: 1.4rem; }
.lb-nav.prev{ left: 20px; }
.lb-nav.next{ right: 20px; }
.lb-close:hover, .lb-nav:hover{ background: rgba(255,255,255,0.3); }

@media (max-width: 860px){
  .layout{ grid-template-columns: 1fr; }
  aside.filters{ position: static; order: -1; }
  .cat-list{ flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .cat-btn{ width:auto; }
}