/* The shop page (/shop): a short heading with pickup and delivery beside it, a row of category tiles, everything online,
   then the questions and the visit. Products come first (Erran, 2026-10-18): the first row of cards sits in the first
   screen at 1440 × 900, and within a short swipe on a phone. Built on baker-feed.css and roadside.css. */

/* Libre Baskerville's capitals start below the top of the line box: (line-height - 1.24)/2 + .97 - .77 em
   (ascent .97, descent .27, cap height .77). That is .13em at line-height 1.1. */

/* The heading, and the ways to get an order in a card beside it, its top and bottom in line with the heading's */
.shop-top{padding-top:clamp(22px,2.6vw,38px)}
.shop-top-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:18px 48px}
/* The heading's capitals line up with the card's top and the lead's baseline with its bottom, however many ways the
   card lists (the lead's last .42em is below its baseline). */
.shop-top-head>:first-child{display:flex;flex-direction:column;justify-content:space-between}
.shop-top-head .shop-top-lead{margin-bottom:-.42em}
.shop-top h1{font-size:clamp(38px,3.6vw,56px);line-height:1.1;letter-spacing:-2px;margin-top:-.13em}
.shop-top-lead{font-size:15px;line-height:1.6;color:#4f614a;margin-top:8px}
/* The service card: pickup, local delivery and (while the store ships) shipping, with Call ahead beside them. The
   button's corners follow the card's, 6 px in: square where the card is nearly square, rounder where it's round. */
.shop-service{display:grid;grid-template-columns:auto auto;gap:6px;padding:6px;background:var(--paper);border:1px solid #e0d6c0;border-radius:4px 16px 4px 16px;box-shadow:0 6px 0 #ece3cf}
.shop-service ul{list-style:none;margin:0;padding:4px 14px 4px 12px;display:grid;align-content:center;gap:2px}
.shop-service li{display:flex;align-items:center;gap:10px;min-height:30px;font-size:13.5px}
.shop-service li>span,.shop-service li>a{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px}
.shop-service b{font-weight:700}
.shop-service small{font-size:12.5px;color:var(--muted)}
.shop-service li svg{flex:none;width:18px;height:18px;color:var(--red)}
.shop-service li>a{min-height:30px;align-items:center;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.shop-service li>a:hover{color:var(--red);text-decoration-color:currentColor}
.shop-service-call{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:172px;padding:10px 20px;text-align:center;color:#fff8e8;background:var(--red);border-radius:2px 10px 2px 10px;box-shadow:0 4px 0 var(--red-dark);transition:transform .2s,box-shadow .2s}
.shop-service-call span{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;opacity:.88}
.shop-service-call b{font:400 19px/1.25 var(--serif);letter-spacing:-.3px}
.shop-service-call svg{width:14px;height:14px}
.shop-service-call:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--red-dark)}
.shop-service-call:active{transform:translateY(2px);box-shadow:0 2px 0 var(--red-dark)}

/* Category tiles: one row, each a photo and its name, the whole tile a link; All departments is the last tile. On a
   desktop they all fit. Where they don't, the row moves sideways (never on its own) with no scrollbar: arrows and soft
   edges show on the side where more tiles are (baker-feed.js [data-tile-row] sets .can-prev and .can-next). No scroll
   snapping: with it, an arrow's smooth step to the row's end snapped back to the start. */
.shop-cats{position:relative;margin-top:clamp(18px,2vw,28px)}
.shop-cats ul{list-style:none;margin:0;padding:4px 0 10px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(84px,1fr);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.shop-cats ul::-webkit-scrollbar{display:none}
.shop-cats:before,.shop-cats:after{content:"";position:absolute;top:0;bottom:0;z-index:1;width:64px;pointer-events:none;opacity:0;transition:opacity .25s}
.shop-cats:before{left:0;background:linear-gradient(90deg,var(--cream) 25%,#fbf6e900)}
.shop-cats:after{right:0;background:linear-gradient(270deg,var(--cream) 25%,#fbf6e900)}
.shop-cats.can-prev:before,.shop-cats.can-next:after{opacity:1}
.shop-cats.can-prev ul,.shop-cats.can-next ul{cursor:grab}
.shop-cats.is-dragging ul{cursor:grabbing}
.shop-cats.is-dragging .shop-cat{pointer-events:none}
.shop-cats-arrow{position:absolute;top:30px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;color:var(--green);background:var(--paper);border:1px solid #d5ccb4;border-radius:50%;box-shadow:0 6px 16px #152c2329;transition:transform .2s,background .2s,color .2s}
.shop-cats-arrow svg{width:20px;height:20px}
.shop-cats-arrow.is-prev{left:-8px}
.shop-cats-arrow.is-next{right:-8px}
.shop-cats-arrow:hover{background:var(--green);color:#fff8e6;transform:scale(1.06)}
.shop-cats-arrow:focus-visible{outline:3px solid #bc621b;outline-offset:2px}
.shop-cat{display:flex;flex-direction:column;align-items:center;gap:9px;min-height:44px;text-align:center;font-size:13px;font-weight:700;line-height:1.3;color:var(--green);transition:color .2s}
.shop-cat-photo{display:grid;place-items:center;width:100%;max-width:124px;aspect-ratio:1;overflow:hidden;background:#e8dfcb;border-radius:4px 16px 4px 16px;box-shadow:0 5px 0 #e6dcc4;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.shop-cat-photo img{width:100%;height:100%;object-fit:cover}
.shop-cat:hover{color:var(--red)}
.shop-cat-photo img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.shop-cat:hover .shop-cat-photo{transform:translateY(-3px);box-shadow:0 8px 0 #e0d3b6}
.shop-cat:hover .shop-cat-photo img{transform:scale(1.06)}
.shop-cat:focus-visible{outline-offset:4px}
.shop-cat-all .shop-cat-photo{background:var(--green);color:#fff8e6;box-shadow:0 5px 0 #112b20}
.shop-cat-all .shop-cat-photo svg{width:30px;height:30px}
.shop-cat-all[aria-expanded=true]{color:var(--red)}
.shop-cat-all[aria-expanded=true] .shop-cat-photo{background:var(--red);box-shadow:0 5px 0 var(--red-dark)}

/* All departments, under the row: each department on its own line, the ones under it beside it as buttons with their
   product counts. */
.shop-all{display:grid;gap:14px;margin-top:14px;padding:clamp(16px,2vw,24px);background:var(--paper);border:1px solid #e0d6c0;border-radius:4px 16px 4px 16px}
.shop-all:not(:target):not(.is-open){display:none}
.shop-all:focus{outline:none}
.shop-all-group{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:8px 24px;align-items:start}
.shop-all-group+.shop-all-group{padding-top:14px;border-top:1px solid #ece3cf}
.shop-all h2{font-size:20px;line-height:1.3;letter-spacing:-.5px}
.shop-all h2 a{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.shop-all h2 a:hover{color:var(--red)}
.shop-all span{font:400 13px var(--sans);letter-spacing:0;color:var(--muted)}
.shop-all ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.shop-all li a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;font-size:13px;font-weight:700;background:#fff;border:1px solid #d5dcc6;border-radius:2px 7px 2px 7px;transition:background .2s,border-color .2s,color .2s}
.shop-all li a:hover{background:var(--green);border-color:var(--green);color:#fff8e6}
.shop-all li a:hover span{color:#c9d4c2}

/* Everything online, right under the tiles */
.shop-listing{padding-top:clamp(16px,1.8vw,26px)}
.text-link svg{width:16px;height:16px}

/* Visit */
.shop-visit{background:#e2e7d5;border-top:1px solid #cbd3ba;padding-block:clamp(60px,6.5vw,100px)}
.shop-visit-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,90px);align-items:stretch}
.shop-visit-copy{display:flex;flex-direction:column;align-items:flex-start}
.shop-visit-copy h2{font-size:clamp(36px,3.7vw,56px);line-height:1.15;letter-spacing:-1.8px;margin-top:-.155em}
.shop-visit-copy p{font-size:16px;line-height:1.8;color:#4f614a;margin:18px 0 28px}
.story-note{margin-top:auto;align-self:stretch;padding:clamp(24px,2.4vw,32px);background:#f5efe0;border:1px solid #d3d6c2;border-radius:4px 18px 4px 18px}
.story-note h3{font-size:clamp(22px,1.9vw,27px);line-height:1.25;letter-spacing:-.7px}
.story-note p{font-size:14.5px;line-height:1.8;color:#55634f;margin:10px 0 18px}
.visit-ticket{padding:clamp(26px,3vw,42px);color:var(--cream);background:var(--green);border-radius:4px 24px 4px 24px;box-shadow:7px 7px 0 #cbd3ba}
.visit-ticket h3{font-size:30px;line-height:1.25;letter-spacing:-1px}
.visit-ticket address{font:16px/1.7 var(--sans);margin-top:18px}
.visit-ticket .hours{border-block:1px solid #d5dfc640;padding-block:13px;margin:22px 0 13px}
.visit-ticket .hours>div{font-size:14px}
.visit-ticket .hours-note{font-size:11px;color:#d0d9c5}
.visit-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.visit-actions .button{font-size:12px;min-height:48px}
.visit-ticket .button-outline{color:var(--cream);border-color:#aebda2;box-shadow:0 3px 0 #0d211833}
.visit-ticket .button-outline:hover{background:#355442}

@media(prefers-reduced-motion:no-preference){
  .shop-top h1{animation:title-rise .95s cubic-bezier(.16,1,.3,1) both}
}
@media(prefers-reduced-motion:reduce){
  .shop-cat-photo{transition:none}
  .shop-cat:hover .shop-cat-photo,.shop-cat:hover .shop-cat-photo img{transform:none}
}
@media(max-width:1000px){
  .shop-top-head{grid-template-columns:1fr}
  .shop-top-head .shop-top-lead{margin-bottom:0}
  .shop-service{justify-self:start}
}
@media(max-width:900px){
  .shop-visit-grid{grid-template-columns:1fr}
  .shop-visit-copy h2{margin-top:0}
  .story-note{margin-top:0}
}
/* On a phone the row runs to the screen's edges with a tile and a half showing past the last whole one, so it reads as
   something to swipe. The phone bar at the foot of the screen already has Call, and the lead says pickup, so the line
   here keeps only delivery. */
@media(max-width:600px){
  .shop-top{padding-top:20px}
  .shop-top h1{font-size:clamp(32px,9vw,40px);letter-spacing:-1.4px}
  .shop-top-lead{font-size:14px;margin-top:6px}
  .shop-service{grid-template-columns:1fr;padding:2px 4px;box-shadow:0 4px 0 #ece3cf}
  .shop-service ul{padding:4px 10px}
  .shop-service li{font-size:13px}
  .shop-service .shop-service-pickup,.shop-service-call{display:none}
  .shop-cats-arrow{top:24px}
  .shop-cats-arrow.is-prev{left:8px}
  .shop-cats-arrow.is-next{right:8px}
  .shop-cats{margin:16px -20px 0}
  .shop-cats ul{grid-auto-columns:84px;gap:12px;padding-inline:20px;scroll-padding-inline:20px;scrollbar-width:none}
  .shop-cats ul::-webkit-scrollbar{display:none}
  .shop-cat{font-size:12px;gap:8px}
  .shop-cat-photo{border-radius:4px 14px 4px 14px}
  .shop-all-group{grid-template-columns:1fr;gap:4px}
  .shop-visit-copy h2{font-size:clamp(34px,9.5vw,42px)}
  .shop-visit-copy p{font-size:14.5px}
  .visit-ticket{padding:26px}
  .visit-ticket .hours>div{font-size:13px}
}
@media(max-width:365px){
  .visit-actions .button{width:100%}
}