/* YumYak Child 1.3.2: Shop grid (.yks) and horizontal product rows (.yyr).
   New prefixes on purpose: Additional CSS hides .yy-amz-section on pages that
   carry a .yk-shop block, and those rules must not touch these. */

/* ---------- Shop page ---------- */
.yks-nav{position:sticky;top:0;z-index:20;background:rgba(250,250,247,.96);backdrop-filter:saturate(1.2) blur(6px);border-bottom:1px solid var(--line,#e4e2dc);margin:8px 0 0}
.yks-nav .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.yks-nav .wrap::-webkit-scrollbar{display:none}
.yks-nav a{flex:0 0 auto;font-family:var(--yy-sans);font-size:14px;font-weight:600;color:var(--ink,#141414);background:var(--paper,#fff);border:1px solid #d6d3cb;border-radius:999px;padding:7px 13px;text-decoration:none;white-space:nowrap}
.yks-nav a span{color:var(--muted,#5f5f5a);font-weight:500;margin-left:2px}
.yks-nav a:hover{border-color:#f25812;color:#bf4209}
.yks-sec{padding:34px 0 8px;scroll-margin-top:64px}
.yks-sec .section-head{margin-bottom:18px}
.yks-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.yks-card{display:flex;flex-direction:column;background:var(--paper,#fff);border:1px solid var(--line,#e4e2dc);border-radius:var(--yy-r,14px);overflow:hidden;margin:0;transition:box-shadow .2s,transform .2s}
.yks-card:hover{box-shadow:var(--shadow,0 10px 30px rgba(20,20,20,.08));transform:translateY(-2px)}
.yks-img{display:block;position:relative;aspect-ratio:1/1;background:#fff;border-bottom:1px solid var(--soft,#f2f0eb)}
.yks-img img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain}
.yks-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px;flex:1 1 auto}
.yks-brand{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#bf4209}
body .yks-name{margin:0;font-family:var(--yy-serif);font-size:18px;line-height:1.22;font-weight:600}
.yks-name a{color:var(--ink,#141414);text-decoration:none}
.yks-name a:hover{color:#bf4209}
.yks-note{margin:0;font-size:14px;line-height:1.5;color:#444}
.yks-goes{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted,#5f5f5a)}
.yks-goes-k{font-weight:700;color:var(--ink,#141414)}
.yks-goes a{color:#bf4209;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.yks-more{white-space:nowrap}
.yks-cta{margin-top:auto;align-self:flex-start;display:inline-block;background:#f25812;color:#141414;font-weight:700;font-size:14px;border-radius:999px;padding:9px 16px;text-decoration:none}
.yks-cta:hover{background:#ff6a2a;color:#141414}
.yks-sec--pantry{background:var(--soft,#f2f0eb);margin-top:28px;padding-bottom:34px}
@media (max-width:1100px){.yks-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:820px){.yks-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.yks-body{padding:12px}body .yks-name{font-size:16px}.yks-note{font-size:13px}}
@media (max-width:520px){
  .yks-grid{grid-template-columns:1fr;gap:10px}
  .yks-card{display:grid;grid-template-columns:104px 1fr;align-items:start}
  .yks-img{height:100%;min-height:104px;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--soft,#f2f0eb)}
  .yks-cta{padding:8px 14px;font-size:13px}
}

/* ---------- Horizontal rows (homepage + city hubs) ---------- */
.yyr{padding:48px 0 24px}
.yyr .section-head{margin-bottom:8px}
.yyr-row{margin:26px 0 8px}
.yyr-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;border-top:1px solid var(--line,#e4e2dc);padding-top:16px}
body .yyr-head h3{margin:0;font-family:var(--yy-serif);font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.15}
.yyr-more{flex:0 0 auto;font-weight:700;font-size:14px;color:#bf4209;text-decoration:none;white-space:nowrap}
.yyr-more:hover{text-decoration:underline}
.yyr-car{position:relative}
.yyr-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding:2px 2px 10px;scrollbar-width:thin;scrollbar-color:#cfccc4 transparent}
.yyr-track::-webkit-scrollbar{height:6px}
.yyr-track::-webkit-scrollbar-thumb{background:#cfccc4;border-radius:3px}
.yyr-card,.yyr-more-card{flex:0 0 212px;scroll-snap-align:start}
.yyr-card{display:flex;flex-direction:column;background:var(--paper,#fff);border:1px solid var(--line,#e4e2dc);border-radius:var(--yy-r,14px);overflow:hidden}
.yyr-track:not(.is-ready) .yyr-card:nth-child(n+11){display:none} /* no-JS: first 10 */
.yyr-img{display:block;position:relative;aspect-ratio:1/1;background:#fff}
.yyr-img img{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;transition:transform .25s}
.yyr-card:hover .yyr-img img{transform:scale(1.04)}
.yyr-body{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px;flex:1 1 auto;border-top:1px solid var(--soft,#f2f0eb)}
body .yyr-name{margin:0;font-family:var(--yy-sans);font-size:14px;font-weight:600;line-height:1.35;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.35em*2)}
.yyr-name a{color:var(--ink,#141414);text-decoration:none}
.yyr-name a:hover{color:#bf4209}
.yyr-brand{margin:0;font-size:12px;color:var(--muted,#5f5f5a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yyr-cta{margin-top:auto;display:block;text-align:center;background:#f25812;color:#141414;font-weight:700;font-size:13px;border-radius:999px;padding:8px 10px;text-decoration:none}
.yyr-cta:hover{background:#ff6a2a;color:#141414}
.yyr-more-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px;padding:20px;border-radius:var(--yy-r,14px);background:var(--soft,#f2f0eb);border:1px dashed #cfccc4;text-decoration:none;color:var(--ink,#141414)}
.yyr-more-card:hover{border-color:#f25812}
.yyr-more-t{font-family:var(--yy-serif);font-size:24px;font-weight:600;color:#bf4209}
.yyr-more-d{font-size:13.5px;color:var(--muted,#5f5f5a)}
.yyr-btn{position:absolute;top:calc(106px - 26px);z-index:3;width:44px;height:52px;border:1px solid #cfccc4;border-radius:12px;background:rgba(255,255,255,.96);color:var(--ink,#141414);font-size:30px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(20,20,20,.12);display:flex;align-items:center;justify-content:center;padding:0 0 4px}
.yyr-btn:hover{border-color:#f25812;color:#bf4209}
.yyr-prev{left:-14px}.yyr-next{right:-14px}
.yyr-btn[disabled]{opacity:0;pointer-events:none}
.yyr-disc{margin:18px 0 0;font-size:12.5px;color:var(--muted,#5f5f5a)}
@media (hover:none),(max-width:760px){
  .yyr-btn{display:none}
  .yyr-track{scrollbar-width:none;gap:12px;margin:0 -20px;padding:2px 20px 8px;scroll-padding:0 20px}
  .yyr-track::-webkit-scrollbar{display:none}
  .yyr-card,.yyr-more-card{flex-basis:152px}
  .yyr{padding:36px 0 16px}
  .yyr-row{margin:18px 0 4px}
  body .yyr-name{font-size:13px}
  .yyr-cta{font-size:12.5px;padding:7px 8px}
  .yyr-more-t{font-size:20px}
}