/* Ported from Shopify sections/zynbe-collection.liquid — keep in sync with parts/collection.php (+ inc/catalog.php) */
.zcl{ --line:#F0E3DB; --ink:#2B1A17; --ink2:#6D5D59; --ink3:#A1938E; --gold:#C8963E; background:var(--z-bg); }

  /* head */
  .zcl__head{ padding:16px 16px 4px; }
  .zcl__crumb{ font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
  .zcl__crumb a{ color:inherit; text-decoration:none; }
  .zcl__row{ display:flex; align-items:baseline; gap:8px; margin-top:4px; }
  .zcl__t{ margin:0; font-family:Fraunces,'Playfair Display',Georgia,serif; font-weight:600; font-size:26px; color:var(--ink); }
  .zcl__n{ font-size:12px; font-weight:700; color:var(--ink3); }
  .zcl__d{ font-size:12px; color:var(--ink2); margin-top:4px; line-height:1.5; }
  .zcl__d p{ margin:0; }

  /* sticky bar */
  .zcl__barwrap{ background:transparent; border-bottom:1px solid var(--line); margin-top:10px; }
  .zcl__bar{ display:flex; gap:8px; overflow-x:auto; padding:10px 14px; scrollbar-width:none; align-items:center; }
  .zcl__bar::-webkit-scrollbar{ display:none; }
  .zcl__fbtn{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink2); font-size:12.5px; font-weight:700; white-space:nowrap; font-family:inherit; text-decoration:none; cursor:pointer; }
  .zcl__fbtn--main{ border-color:var(--zl); color:var(--zl); }
  .zcl__fct{ min-width:16px; height:16px; border-radius:8px; background:var(--zl); color:#fff; font-size:9.5px; font-weight:800; display:grid; place-items:center; padding:0 4px; }
  .zcl__sortwrap{ flex:0 0 auto; position:relative; }
  .zcl__sort{ appearance:none; -webkit-appearance:none; padding:8px 26px 8px 14px; border-radius:999px; border:1px solid var(--line); background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236D5D59' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center; color:var(--ink2); font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer; }

  /* active pills */
  .zcl__apills{ display:flex; gap:6px; overflow-x:auto; padding:8px 14px 0; scrollbar-width:none; align-items:center; }
  .zcl__apills::-webkit-scrollbar{ display:none; }
  .zcl__apill{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; background:#fff; border:1px dashed var(--zl); color:var(--zl); font-size:10.5px; font-weight:800; padding:5px 10px; border-radius:999px; text-decoration:none; }
  .zcl__apill i{ font-style:normal; opacity:.7; }
  .zcl__aclear{ flex:0 0 auto; font-size:10.5px; font-weight:800; color:var(--ink3); text-decoration:none; padding:5px 4px; }

  /* grid + cards */
  .zcl__grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px 12px 0; }
  .zcl__pc{ border-radius:14px; overflow:hidden; background:#fff; border:1px solid var(--line); text-decoration:none; display:block; }
  .zcl__img{ display:block; position:relative; aspect-ratio:4/5; background:#F0E3DB; overflow:hidden; }
  .zcl__img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .zcl__off{ position:absolute; top:8px; left:8px; background:var(--zl); color:#fff; font-size:10px; font-weight:800; padding:3px 7px; border-radius:6px; }
  .zcl__newb{ position:absolute; top:8px; left:8px; background:var(--gold); color:#fff; font-size:9.5px; font-weight:800; padding:3px 7px; border-radius:6px; letter-spacing:.04em; }
  .zcl__sizes{ position:absolute; left:8px; right:8px; bottom:8px; display:flex; gap:4px; justify-content:center; }
  .zcl__sizes span{ background:rgba(255,255,255,.92); color:var(--ink2); font-size:9px; font-weight:800; padding:3px 7px; border-radius:6px; }
  .zcl__sizes span.oos{ opacity:.45; text-decoration:line-through; }
  .zcl__body{ display:block; padding:9px 10px 12px; }
  .zcl__name{ display:block; font-size:12px; font-weight:500; color:var(--ink2); line-height:1.35; height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:5px; }
  .zcl__prices{ display:flex; align-items:baseline; gap:6px; }
  .zcl__price{ font-size:15px; font-weight:800; color:var(--zl); }
  .zcl__was{ font-size:11px; color:var(--ink3); }
  .zcl__promo{ display:inline-block; margin-top:5px; background:#E7F5EC; color:#1D7A46; font-size:9.5px; font-weight:800; padding:3px 8px; border-radius:6px; line-height:1.3; }

  /* drop tile */
  .zcl__dtile{ border-radius:14px; background:linear-gradient(160deg,var(--zl),#5E1620); color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:14px 13px; text-decoration:none; }
  .zcl__dtag{ font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; background:rgba(255,255,255,.16); align-self:flex-start; padding:4px 9px; border-radius:999px; }
  .zcl__dt{ display:block; font-family:Fraunces,'Playfair Display',Georgia,serif; font-size:17px; font-weight:600; line-height:1.25; margin:10px 0 4px; }
  .zcl__ds{ display:block; font-size:10.5px; opacity:.85; line-height:1.45; }
  .zcl__dcta{ margin-top:12px; background:#fff; color:var(--zl); font-size:11px; font-weight:800; align-self:flex-start; padding:8px 14px; border-radius:999px; }

  /* load more */
  .zcl__more{ text-align:center; padding:20px 16px 26px; }
  .zcl__morebtn{ display:inline-block; border:1.5px solid var(--zl); color:var(--zl); font-size:13px; font-weight:800; padding:11px 30px; border-radius:999px; text-decoration:none; background:#fff; }
  .zcl__morebtn.is-loading{ opacity:.5; pointer-events:none; }

  /* sheet */
  .zcl__scrim{ position:fixed; inset:0; z-index:150; background:rgba(30,10,12,.45); opacity:0; transition:opacity .25s ease; }
  .zcl__scrim.is-open{ opacity:1; }
  .zcl__sheet{ position:fixed; left:0; right:0; bottom:0; z-index:160; background:#fff; border-radius:20px 20px 0 0; padding:10px 18px calc(20px + env(safe-area-inset-bottom,0px)); transform:translateY(105%); transition:transform .28s cubic-bezier(.32,.72,.32,1); max-height:80vh; overflow-y:auto; }
  .zcl__sheet.is-open{ transform:translateY(0); }
  .zcl__handle{ width:38px; height:4px; border-radius:2px; background:#E8DCD7; margin:4px auto 14px; }
  .zcl__shead{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
  .zcl__st{ font-family:Fraunces,'Playfair Display',Georgia,serif; font-size:18px; font-weight:600; color:var(--ink); }
  .zcl__sreset{ font-size:11.5px; font-weight:800; color:var(--ink3); text-decoration:none; }
  .zcl__sg{ padding:12px 0; border-bottom:1px solid #F5ECE6; }
  .zcl__sg:last-of-type{ border-bottom:none; }
  .zcl__sgt{ font-size:12px; font-weight:800; margin-bottom:9px; color:var(--ink); }
  .zcl__sopts{ display:flex; flex-wrap:wrap; gap:8px; }
  .zcl__sopt{ cursor:pointer; }
  .zcl__sopt input{ position:absolute; opacity:0; pointer-events:none; }
  .zcl__sopt span{ display:inline-block; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font-size:12px; font-weight:700; color:var(--ink2); }
  .zcl__sopt span em{ font-style:normal; font-size:10px; color:var(--ink3); }
  .zcl__sopt input:checked + span{ background:var(--zl); border-color:var(--zl); color:#fff; }
  .zcl__sopt input:checked + span em{ color:#F3D5CB; }
  .zcl__sopt.dim{ opacity:.4; }
  .zcl__prow{ display:flex; gap:10px; }
  .zcl__prow label{ flex:1; font-size:11px; font-weight:700; color:var(--ink2); }
  .zcl__prow input{ width:100%; margin-top:4px; padding:10px 12px; border:1.5px solid var(--line); border-radius:11px; background:#FBF6F1; font-size:13px; font-family:inherit; outline:none; }
  .zcl__prow input:focus{ border-color:var(--zl); background:#fff; }
  .zcl__apply{ display:block; width:100%; margin-top:16px; height:48px; border:none; border-radius:14px; background:var(--zl); color:#fff; font-family:inherit; font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 6px 16px rgba(122,31,43,.3); }

  /* desktop */
  @media (min-width:700px){ .zcl__grid{ grid-template-columns:repeat(3,1fr); gap:14px; padding:16px; } }
  @media (min-width:1024px){
    .zcl{ max-width:1200px; margin:0 auto; }
    .zcl__head{ padding:28px 28px 4px; }
    .zcl__t{ font-size:36px; }
    .zcl__bar, .zcl__apills{ padding-left:28px; padding-right:28px; }
    .zcl__grid{ grid-template-columns:repeat(4,1fr); padding:18px 28px 0; }
    .zcl__pc{ transition:transform .15s ease, box-shadow .15s ease; }
    .zcl__pc:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(60,20,25,.10); }
    .zcl__sizes{ opacity:0; transition:opacity .15s ease; }
    .zcl__pc:hover .zcl__sizes{ opacity:1; }
    .zcl__sheet{ left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-46%) scale(.98); width:min(560px,92vw); border-radius:20px; max-height:82vh; opacity:0; pointer-events:none; }
    .zcl__sheet.is-open{ transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
  }

/* ── WordPress additions ── */
.zcl__sz{ display:none; }                         /* screen-reader-only labels inside cards */
.zcl__sopts--wrap{ flex-wrap:wrap; }
.zcl__empty{ grid-column:1/-1; text-align:center; padding:40px 16px; color:var(--ink2); font-size:13px; }
.zcl__empty a{ color:var(--zl); font-weight:800; }
/* Sheet must sit above the mobile bottom nav (z-index 999) or it hides "Apply filters" */
.zcl__scrim{ z-index:1002; }
.zcl__sheet{ z-index:1003; }