/* Ported from Shopify sections/zynbe-related.liquid — keep in sync with parts/product/related.php */
.zrl{ padding:20px 0 18px; }
  .zrl__head{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:0 16px 11px;
  }
  .zrl__head h2{
    margin:0;
    font-family:Fraunces,'Playfair Display',Georgia,serif;
    font-weight:600; font-size:19px; color:#2B1A17;
  }
  .zrl__all{ font-size:11.5px; font-weight:800; color:var(--zr); text-decoration:none; white-space:nowrap; }

  .zrl__row{
    display:flex; gap:10px;
    overflow-x:auto;
    padding:2px 16px 8px;
    scroll-padding-left:16px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .zrl__row::-webkit-scrollbar{ display:none; }

  .zrl__card{
    flex:0 0 148px;
    scroll-snap-align:start;
    background:#fff;
    border:1px solid #F0E3DB;
    border-radius:14px;
    overflow:hidden;
    text-decoration:none;
    display:block;
  }
  .zrl__img{
    display:block; position:relative;
    aspect-ratio:4/5; background:#F0E3DB; overflow:hidden;
  }
  .zrl__img img{ width:100%; height:100%; object-fit:cover; display:block; }
  .zrl__off{
    position:absolute; top:8px; left:8px;
    background:var(--zr); color:#fff;
    font-size:9.5px; font-weight:800;
    padding:3px 7px; border-radius:6px;
  }
  .zrl__body{ display:block; padding:8px 10px 11px; }
  .zrl__name{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:11.5px; font-weight:500; color:#6D5D59; line-height:1.35;
    height:31px; margin-bottom:4px;
  }
  .zrl__price{ font-size:14.5px; font-weight:800; color:var(--zr); }
  .zrl__price s{ font-size:10.5px; color:#A1938E; font-weight:600; margin-left:4px; }

  /* skeleton */
  .zrl__card--skel .zrl__img,
  .zrl__bar{
    background:linear-gradient(100deg,#F4EBE5 40%,#FBF6F2 50%,#F4EBE5 60%);
    background-size:200% 100%;
    animation:zrlShim 1.2s infinite linear;
  }
  .zrl__bar{ display:block; height:11px; border-radius:6px; margin:8px 10px 0; }
  .zrl__bar--short{ width:45%; margin-bottom:12px; }
  @keyframes zrlShim{ to{ background-position:-200% 0; } }
  @media (prefers-reduced-motion: reduce){
    .zrl__card--skel .zrl__img, .zrl__bar{ animation:none; }
  }

  @media (min-width:1024px){
    .zrl{ padding:34px 0 30px; }
    .zrl__head{ max-width:1100px; margin:0 auto; padding:0 28px 14px; }
    .zrl__head h2{ font-size:24px; }
    .zrl__all{ font-size:13px; }
    .zrl__row{
      max-width:1100px; margin:0 auto; padding:2px 28px 8px;
      overflow-x:visible; flex-wrap:wrap; gap:14px;
    }
    .zrl__card{ flex:0 0 calc(20% - 12px); transition:transform .15s ease, box-shadow .15s ease; }
    .zrl__card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(60,20,25,.10); }
    .zrl__name{ font-size:12.5px; height:34px; }
    .zrl__price{ font-size:15.5px; }
  }