/* ============ TEMPLATES GALLERY — page specific ============ */

.mainnav a.is-current{position:relative;opacity:1}
.mainnav a.is-current::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#fff;border-radius:2px;
}

/* Hero */
.tpl-hero{padding:3rem 2.6rem 1.6rem;text-align:center;border-bottom:1px solid var(--line)}
.tpl-hero .display{font-size:clamp(2.4rem,4.5vw,3.8rem)}
.tpl-hero__lede{max-width:60ch;margin:1.4rem auto 0;color:var(--muted)}

/* Filter bar */
.filterbar{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  padding:1.6rem 2.6rem;border-bottom:1px solid var(--line);
  position:sticky;top:57px;background:rgba(253,249,243,.92);backdrop-filter:blur(6px);z-index:20;
}
.fchip{
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-weight:600;font-size:.82rem;padding:.5rem 1.05rem;border-radius:999px;cursor:pointer;transition:.18s;
}
.fchip:hover{border-color:var(--tangelo);color:var(--tangelo)}
.fchip.is-active{background:var(--tangelo);border-color:var(--tangelo);color:#fff}

/* Grid */
.tpl-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
  padding:2.4rem 2.6rem;
}
.tpl-card{display:flex;flex-direction:column;gap:.9rem}
.tpl-card[hidden]{display:none}

.tpl-card__frame{
  position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#fff;box-shadow:0 14px 30px -22px rgba(40,25,10,.45);transition:.22s;
}
.tpl-card:hover .tpl-card__frame{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#E4D6C2}

/* Fake browser bar */
.mock__bar{
  display:flex;align-items:center;gap:6px;padding:9px 12px;background:#F3ECE1;border-bottom:1px solid var(--line);
}
.mock__bar span{width:9px;height:9px;border-radius:50%;background:#D9C9B4}
.mock__bar span:first-child{background:#F2A48C}
.mock__bar span:nth-child(2){background:#F4CE8B}
.mock__bar span:nth-child(3){background:#A8CE9C}
.mock__bar em{
  margin-left:8px;font-style:normal;font-size:.66rem;color:#98897A;background:#fff;
  border-radius:6px;padding:3px 10px;flex:1;max-width:70%;overflow:hidden;white-space:nowrap;
}

/* Preview area */
.tpl-card__preview{aspect-ratio:4/3;overflow:hidden;background:#faf6ef}
.tpl-card__preview img{width:100%;height:100%;object-fit:cover}

/* Hover overlay with actions */
.tpl-card__hover{
  position:absolute;inset:0;top:34px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  background:rgba(25,17,10,.55);opacity:0;transition:.22s;
}
.tpl-card:hover .tpl-card__hover{opacity:1}
.tpl-card__hover .btn{min-width:150px;justify-content:center}
.tpl-card__hover .btn--ghost-white{padding:.7rem 1.3rem}

/* Card meta */
.tpl-card__meta{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:0 .2rem}
.tpl-card__meta h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.4px;font-size:1.15rem;line-height:1}
.tpl-card__cat{font-size:.76rem;color:var(--muted)}
.tpl-card__badge{
  background:var(--tangelo-soft);color:var(--tangelo);font-size:.64rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:.28rem .6rem;border-radius:999px;white-space:nowrap;
}

/* ---------- CSS mini-site mockups ---------- */
.mock{
  aspect-ratio:4/3;background:#fff;display:flex;flex-direction:column;gap:0;overflow:hidden;
  --a:#F26A21;--a2:#FF9A47;
}
.mock__nav{display:flex;align-items:center;gap:7px;padding:9px 12px;background:#fff;border-bottom:1px solid #EFE7DB}
.mock__nav .dot{width:16px;height:16px;border-radius:5px;background:var(--a)}
.mock__nav i{height:6px;width:34px;border-radius:4px;background:#E7DECF}
.mock__nav--dark{background:var(--a);border-bottom:0}
.mock__nav--dark .dot{background:#fff}
.mock__nav--dark i{background:rgba(255,255,255,.5)}
.mock__nav .cart{width:14px;height:14px;border-radius:4px;background:var(--a);margin-left:auto}
.mock__nav .pill{width:44px;height:14px;border-radius:999px;background:var(--a);margin-left:auto}
.mock__nav .pill.sm{width:38px;height:12px}

.mock__hero{
  flex:1;display:grid;grid-template-columns:1.1fr .9fr;gap:10px;padding:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--a) 12%,#fff),color-mix(in srgb,var(--a2) 16%,#fff));
}
.mock__hero--split{background:linear-gradient(135deg,#F5F2EC,#EDE7DE)}
.mock__lines{display:flex;flex-direction:column;gap:8px;justify-content:center}
.mock__lines i{height:9px;border-radius:5px;background:#3A2E22;opacity:.82}
.mock__lines i.w80{width:80%}.mock__lines i.w70{width:70%}.mock__lines i.w60{width:60%}
.mock__lines i.w50{width:50%;opacity:.4}.mock__lines i.w40{width:40%;opacity:.4}
.mock__lines i.pill{width:52px;height:16px;border-radius:999px;background:var(--a);opacity:1;margin-top:4px}
.mock__blob{border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--a2),var(--a));align-self:center;justify-self:center;width:78%;aspect-ratio:1}
.mock__card{border-radius:10px;background:#fff;border:1px solid #E7DECF;box-shadow:0 8px 16px -10px rgba(0,0,0,.25)}
.mock__panel{border-radius:8px;background:var(--a);opacity:.9}

.mock__row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 14px}
.mock__row u{height:26px;border-radius:7px;background:#F0E8DC;text-decoration:none}
.mock__hero--split + .mock__row{grid-template-columns:1fr 1fr}

.mock__shop{
  flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;gap:9px;padding:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--a) 8%,#fff),#fff);
}
.mock__shop b{border-radius:8px;background:#F1E9DD;border:1px solid #EAE0D1;position:relative}
.mock__shop b::after{content:"";position:absolute;left:8px;right:8px;bottom:7px;height:6px;border-radius:3px;background:var(--a);opacity:.5}

/* Empty state */
.tpl-empty{text-align:center;color:var(--muted);padding:2rem 2.6rem 3rem}
.tpl-empty a{color:var(--tangelo);font-weight:600}

/* Help strip */
.tpl-help{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  padding:2.4rem 2.6rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#FFF7F0);
}
.tpl-help .muted{max-width:52ch;margin-top:.6rem}

/* Responsive */
@media (max-width:960px){
  .tpl-grid{grid-template-columns:repeat(2,1fr)}
  .filterbar{top:53px}
}
@media (max-width:640px){
  .tpl-grid{grid-template-columns:1fr}
  .filterbar{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap}
  .tpl-card__hover{opacity:1;position:static;inset:auto;background:transparent;flex-direction:row;padding:.6rem 0 0}
  .tpl-card__hover .btn--ghost-white{border:1px solid var(--line)}
}