/* Catalog-page-specific styles. Loaded only on /catalog, on top of site.css
   (which supplies the CSS variables, base typography, and button styles). */

.container.container--tight{padding-top:20px;}

.catalog-toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;
  margin-bottom:16px;
}
.admin-status{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--slate);}

.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px;}
.tabs{display:flex;gap:6px;flex-wrap:wrap;}
.tab{
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  padding:8px 14px;border:1.5px solid var(--line);border-radius:20px;background:var(--card);
  color:var(--slate);cursor:pointer;transition:.15s;
}
.tab:hover{border-color:var(--wine);color:var(--wine);}
.tab.active{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.tab.active:hover{color:var(--paper);}
.search-wrap{position:relative;margin-left:auto;display:inline-flex;}
.search{
  border:1.5px solid var(--line);border-radius:20px;padding:8px 32px 8px 16px;
  font-family:'Inter',sans-serif;font-size:13px;min-width:220px;background:var(--card);color:var(--ink);
}
.search::placeholder{color:#B7AC9B;}
.search-clear{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;padding:0;border:none;border-radius:50%;background:transparent;
  color:var(--slate);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.search-clear:hover{background:var(--line);color:var(--ink);}

.category-block{margin-bottom:28px;}
.category-block:first-child{margin-top:0;}
.category-heading{
  font-family:'Fraunces',serif;font-weight:600;font-size:20px;color:var(--ink);
  margin:0 0 14px;padding:2px 0 8px 14px;border-bottom:2px solid var(--wine);
  border-left:4px solid var(--gold);
}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:6px;padding:18px 18px 16px;
  position:relative;display:flex;flex-direction:column;gap:8px;
  transition:transform .2s ease, box-shadow .2s ease;
}
/* Inner square-cornered line, inset from the card's own rounded border —
   the gap between them narrows toward each corner until they meet, giving a
   subtle wine-label-frame look without being heavy-handed. */
.card::before{
  content:'';position:absolute;inset:5px;border:1px solid var(--gold);
  opacity:.5;pointer-events:none;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 28px -18px rgba(43,36,32,.35);}
.card-image{
  height:180px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#FBF9F5,#F1EAE0);
  border:1px solid var(--line);border-radius:3px;margin:-2px -2px 6px;overflow:hidden;
}
.card-image img{
  max-height:160px;max-width:100%;object-fit:contain;mix-blend-mode:multiply;
  transition:transform .3s ease;
}
.card:hover .card-image img{transform:scale(1.05);}
.eyebrow-group{display:flex;flex-direction:column;gap:2px;}
.card .eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold);
}
.card .eyebrow.winery{font-size:12.5px;font-weight:700;}
.card .eyebrow.region{color:var(--slate);}
.card h3{
  font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:19px;margin:0;line-height:1.2;color:var(--ink);
}
.tag-row{display:flex;gap:8px;align-items:center;margin:2px 0 2px;}
.shelf-tag{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;color:var(--wine);
  border:1px solid var(--wine);border-radius:3px;padding:2px 8px;position:relative;letter-spacing:.03em;
}
.shelf-tag::before{
  content:'';position:absolute;left:-4px;top:50%;transform:translateY(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--paper);border:1px solid var(--wine);
}
.shelf-tag--abv{color:var(--forest);border-color:var(--forest);}
.shelf-tag--abv::before{border-color:var(--forest);}
.varietal{font-size:12.5px;color:var(--slate);}
.notes{font-size:13px;line-height:1.5;color:var(--ink);flex:1;}
.admin-actions{display:none;gap:6px;position:absolute;top:14px;right:14px;}
.admin-actions button{background:var(--card);}
.admin-mode .admin-actions{display:flex;}
.empty{
  grid-column:1/-1;text-align:center;color:var(--slate);padding:60px 20px;font-size:14px;
}

.modal-backdrop{
  display:none;position:fixed;inset:0;background:rgba(43,36,32,.55);z-index:50;
  align-items:center;justify-content:center;padding:20px;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--paper);width:100%;max-width:560px;max-height:88vh;overflow:auto;
  border-radius:4px;padding:26px 28px 24px;border:1px solid var(--line);
}
.modal h2{font-family:'Fraunces',serif;font-size:22px;margin:0 0 16px;}
.field{margin-bottom:12px;display:flex;flex-direction:column;gap:5px;}
.field label{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);}
.field input, .field select, .field textarea{
  font-family:'Inter',sans-serif;font-size:14px;padding:8px 10px;border:1.5px solid var(--line);
  border-radius:3px;background:#fff;color:var(--ink);
}
.field textarea{resize:vertical;min-height:64px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.field-hint{font-size:11px;color:var(--slate);}
.current-image{display:flex;align-items:center;gap:10px;}
.current-image img{height:48px;border:1px solid var(--line);border-radius:3px;background:#fff;}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.form-error{color:var(--wine);font-size:12.5px;margin:-4px 0 10px;}

.category-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.category-row input{
  flex:1;font-family:'Inter',sans-serif;font-size:14px;padding:8px 10px;
  border:1.5px solid var(--line);border-radius:3px;background:#fff;color:var(--ink);
}
.category-move{display:flex;gap:2px;}
.category-move button{padding:5px 8px;}

#gsiButton{display:none;}

@media (max-width:640px){
  .catalog-toolbar{justify-content:flex-start;}
  .search-wrap{margin-left:0;width:100%;}
  .search{width:100%;}
}