/* South Florida Trails - shop + gallery page styles.
   Extends css/style.css (theme tokens owned there). */

/* ================= Shop toolbar ================= */
.shop-toolbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  margin:30px 0 12px;
}
.shop-search{
  flex:1 1 220px;min-width:200px;
  padding:12px 18px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink);
  font-family:var(--font-body);font-size:.95rem;
}
.shop-search:focus{outline:2px solid var(--clay);outline-offset:1px}
.shop-sort-wrap{display:flex;align-items:center;gap:10px}
.shop-sort-wrap label{
  font-family:var(--font-body);font-weight:600;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.shop-sort{
  padding:12px 14px;border:1px solid var(--line);border-radius:12px;
  background:var(--card);color:var(--ink);
  font-family:var(--font-body);font-size:.95rem;cursor:pointer;
}
.shop-chips{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.chip{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:9px 18px;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:.88rem;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.chip:hover{border-color:var(--clay-ink);color:var(--clay-ink)}
.chip-active{background:var(--clay);border-color:var(--clay-ink);color:#1e2405}
.chip-active:hover{background:var(--clay-deep);border-color:var(--clay-ink);color:#1e2405}
.results-count{color:var(--muted);font-size:.9rem;margin:10px 0 0}

/* ================= Product cards (extends style.css .product) ================= */
.product{cursor:pointer}
.product-media{position:relative;overflow:hidden}
.product-media img{transition:transform .3s ease}
.product:hover .product-media img{transform:scale(1.04)}
.product-tag{
  position:absolute;top:12px;left:12px;
  background:var(--pine);color:var(--paper);
  font-family:var(--font-display);text-transform:uppercase;
  letter-spacing:.08em;font-size:.72rem;
  padding:6px 12px;border-radius:999px;
}
.product-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;
}
.product-foot .btn{margin-top:0}

/* ================= Shop empty state ================= */
.shop-empty{
  text-align:center;padding:60px 24px;
  border:1px dashed var(--line);border-radius:var(--radius);background:var(--card);
}
.shop-empty h3{margin:0 0 8px}
.shop-empty p{color:var(--muted);margin:0}

/* ================= Quick view ================= */
.qv-overlay{
  position:fixed;inset:0;z-index:80;
  background:rgba(43,36,20,.6);
}
.qv-overlay[hidden]{display:none}
.qv-modal{
  position:fixed;z-index:81;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:min(880px,calc(100vw - 32px));max-height:calc(100vh - 48px);
  overflow:auto;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(43,36,20,.35);
  display:grid;grid-template-columns:1fr;
}
.qv-modal[hidden]{display:none}
@media(min-width:720px){
  .qv-modal{grid-template-columns:1fr 1fr}
}
.qv-media{background:var(--paper-deep)}
.qv-media img{width:100%;height:100%;object-fit:cover;display:block;min-height:300px}
.qv-body{padding:28px;display:flex;flex-direction:column;gap:10px;position:relative}
.qv-body h2{margin:8px 0 0;font-size:1.7rem}
.qv-body .product-tag{position:static;align-self:flex-start}
.qv-close{
  position:absolute;top:12px;right:12px;
  width:38px;height:38px;border-radius:999px;
  background:var(--paper-deep);border:1px solid var(--line);
  color:var(--ink);font-size:1.25rem;line-height:1;cursor:pointer;
}
.qv-qty{display:flex;align-items:center;gap:14px;margin:10px 0 4px}
.qv-qty button{
  width:42px;height:42px;border-radius:12px;
  border:1px solid var(--line);background:var(--paper);
  color:var(--ink);font-size:1.25rem;cursor:pointer;
}
.qv-qty button:hover{border-color:var(--clay-ink);color:var(--clay-ink)}
.qv-qty span{min-width:2ch;text-align:center;font-weight:700;font-size:1.1rem}
.qv-body .btn{margin-top:8px;width:100%}

/* ================= Gallery masonry ================= */
.masonry{
  display:grid;gap:14px;margin-top:30px;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:720px){.masonry{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){.masonry{grid-template-columns:repeat(4,1fr)}}
.g-card{
  display:block;margin:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--card);box-shadow:0 6px 16px rgba(90,64,40,.08);
  color:inherit;
}
.g-card:hover{text-decoration:none}
.g-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .3s ease}
.g-card:hover img{transform:scale(1.02)}
.g-card figcaption{padding:12px 15px;font-size:.9rem;color:var(--muted)}
.g-card:hover figcaption{color:var(--ink)}

/* ================= Reels ================= */
.reel-grid{
  display:grid;gap:18px;grid-template-columns:repeat(2,1fr);margin-top:26px;
}
@media(min-width:900px){
  .reel-grid{grid-template-columns:repeat(4,1fr)}
}
.reel-card{
  display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:var(--card);box-shadow:0 6px 16px rgba(90,64,40,.08);
  color:inherit;
}
.reel-card:hover{text-decoration:none}
.reel-poster{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--paper-deep)}
.reel-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.reel-card:hover .reel-poster img{transform:scale(1.04)}
.reel-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.reel-play span{
  width:58px;height:58px;border-radius:999px;
  background:rgba(43,36,20,.62);color:var(--paper);
  border:2px solid var(--paper);
  font-size:1.3rem;display:flex;align-items:center;justify-content:center;
  padding-left:4px;
}
.reel-card figcaption{padding:12px 14px;font-size:.85rem;color:var(--muted)}

/* ================= Instagram profile block ================= */
.ig-card{
  max-width:580px;margin:0 auto;text-align:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:40px 28px;box-shadow:0 10px 28px rgba(90,64,40,.1);
}
.ig-logo{
  width:92px;height:92px;border-radius:999px;object-fit:cover;
  border:3px solid var(--clay);margin:0 auto;
}
.ig-handle{
  font-family:var(--font-display);font-size:1.35rem;letter-spacing:.04em;
  text-transform:uppercase;margin:16px 0 6px;color:var(--ink);
}
.ig-handle a{color:inherit}
.ig-handle a:hover{text-decoration:none;color:var(--clay-ink)}
.ig-followers{color:var(--muted);font-size:.95rem;margin-bottom:14px}
.ig-followers strong{color:var(--ink)}
.ig-bio{color:var(--muted);font-size:.95rem;line-height:1.7;margin:0 0 24px}
.ig-bio br{display:block}