/* chichee's look: "flyer under a black strip". Loaded after shop-kit's shop.css and before
   brand.css (the seller's accent, default plum #4a1464, is written there).

   Fonts are self-hosted latin-subset woff2 from the @fontsource npm packages (all SIL OFL):
   @fontsource/cinzel 5.3.0, @fontsource/rye 5.3.0, @fontsource/playball 5.3.0,
   @fontsource/dancing-script 5.3.0, @fontsource/source-sans-3 5.3.1. */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/chichee-static/fonts/cinzel-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Rye"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/chichee-static/fonts/rye-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Playball"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/chichee-static/fonts/playball-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Dancing Script"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/chichee-static/fonts/dancing-script-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/chichee-static/fonts/source-sans-3-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/chichee-static/fonts/source-sans-3-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/chichee-static/fonts/source-sans-3-latin-700-normal.woff2) format("woff2"); }

:root {
  --plum: #4a1464;
  --plum2: #6d3d88;
  --lav: #d9cce6;
  --parch: #efe6d8;
  --parch2: #e6dac8;
  --ink: #0d0b0c;
  --muted: #5e5560;
  --line: #d4c6b0;
  --enamel: #3b194a;      /* the market signs' plum, a shade warmer than --plum */
  --cream: #f0e6d6;       /* their lettering */
  --gold: #c89b3c;        /* their one accent: the star rule */
  --frame-w: 62rem;
  --f-caps: "Cinzel", Georgia, serif;
  --f-west: "Rye", Georgia, serif;
  --f-script: "Playball", cursive;
  --f-hand: "Dancing Script", cursive;
  /* shop-kit's own tokens, mapped onto the palette */
  --shop-bg: var(--parch);
  --shop-fg: var(--ink);
  --shop-muted: var(--muted);
  --shop-line: var(--line);
  --shop-surface: #fff;
  --shop-radius: 4px;
  --shop-font: "Source Sans 3", system-ui, sans-serif;
}

/* ---- the black strip: a link home (.shop .strip beats shop-kit's plum `.shop a`) ---- */
.shop .strip, .shop .strip:visited {
  display: block;
  background: var(--ink);
  color: var(--parch);
  text-align: center;
  text-decoration: none;
  font-family: var(--f-caps);
  font-weight: 700;
  letter-spacing: .22em;
  font-size: 12px;
  padding: 7px 10px;
}
.shop .strip:hover, .shop .strip:focus-visible { color: var(--lav); }
.shop .strip:focus-visible { outline: 2px solid var(--lav); outline-offset: -4px; }
.strip-star { margin: 0 1.2em; }

/* ---- the double plum frame: header + banner + main share one width; the footer sits outside ---- */
.shop-header, .shop-market-banner, .shop-main {
  position: relative;
  width: min(calc(100% - 20px), var(--frame-w));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid var(--plum);
  background: transparent;
}
.shop-header { margin-top: 10px; border-bottom: 0; padding: 12px 20px; gap: 10px;
  font-size: 13px; font-weight: 700; }
.shop-market-banner { border-top: 0; border-bottom: 0; }
.shop-main { display: flow-root; margin-bottom: 10px; border-top: 0; padding: 0 22px 22px; }
.shop-header::before, .shop-main::after, .shop-market-banner::before {
  content: ""; position: absolute; pointer-events: none; border: 1px solid var(--plum); }
.shop-header::before { inset: 5px 5px 0 5px; border-bottom: 0; }
.shop-main::after { inset: 0 5px 5px 5px; border-top: 0; }
.shop-market-banner::before { inset: 0 5px; border-top: 0; border-bottom: 0; }

/* header row: next-market line left, Shop and Cart right */
.shop-brand { position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.shop-brand:focus { width: auto; height: auto; clip-path: none; background: var(--parch);
  padding: .25rem .5rem; z-index: 2; }
.shop-nav { flex: 1; justify-content: flex-end; gap: 14px; }
.shop-nav a { color: var(--ink); font-weight: 700; }
.shop-nav a.shop-next-pill, .shop-nav a.shop-next-pill-now { margin-right: auto; border: 0; padding: 0;
  border-radius: 0; font-size: 13px; font-weight: 700; color: var(--plum); }

/* ---- the black footer ---- */
.shop-footer { background: var(--ink); color: var(--parch); border-top: 6px solid var(--plum);
  padding: 20px max(22px, calc((100% - 840px) / 2)) 16px; font-size: 14px; }
.shop-footer a { color: var(--parch); }
.shop-footer-cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 18px; }
.shop-footer-title { font-family: var(--f-caps); font-weight: 700; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; margin: 0 0 6px; }
.shop-footer-links li { margin: 0; line-height: 1.8; }
.shop-footer-card p { margin: 0; line-height: 1.8; }
.shop-footer-day, .shop-footer-name { font-weight: 600; }
.shop-footer-note { text-align: center; margin: 14px 0 0; font-family: var(--f-hand); font-weight: 700;
  font-size: 18px; color: var(--lav); }

@media (max-width: 40em) {
  .shop-header { flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 12px; }
  .shop-header::before { inset: 4px 4px 0 4px; }
  .shop-nav { justify-content: flex-start; }
  .shop-main { padding: 0 14px 18px; }
  .shop .strip { letter-spacing: .16em; font-size: 11px; }
  .strip-star { margin: 0 .8em; }
  .shop-footer-cols { grid-template-columns: 1fr 1fr; }
  .shop-footer-market { grid-column: 1 / -1; }
}

/* ---- ribbons and the flourish ---- */
.ribbon { position: relative; display: inline-block; background: var(--plum); color: var(--parch);
  font-family: var(--f-caps); font-weight: 700; letter-spacing: .2em; font-size: 14px; line-height: 1.45;
  padding: 6px 30px; margin: 0; z-index: 1; }
.ribbon::before, .ribbon::after { content: ""; position: absolute; top: 7px; width: 22px; height: 100%;
  background: var(--plum2); z-index: -1; }
.ribbon::before { left: -16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); }
.ribbon::after { right: -16px; clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); }
.ribbon-star { font-size: 9px; vertical-align: 2px; margin: 0 9px; }
.flourish { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--plum);
  font-size: 10px; margin: 0; }
.flourish::before, .flourish::after { content: ""; width: 90px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--plum)); }
.flourish::after { background: linear-gradient(270deg, transparent, var(--plum)); }

/* ---- typeset labels: a product without a photo shows its name ---- */
.shop-card-photo, .shop-gallery-empty { position: relative; container-type: inline-size;
  background: var(--parch2); }
.shop-card-photo::after, .shop-gallery-empty::after { content: ""; position: absolute; inset: 8px;
  border: 1px solid var(--plum); outline: 1px solid var(--plum); outline-offset: -4px; opacity: .55;
  pointer-events: none; }
.shop-card-photo:has(img)::after { display: none; }
/* package shots keep their flavor sticker: the square letterboxes instead of cropping */
.shop-card-photo:has(img) { background: #fff; }
.shop-card-photo img, .shop-line-photo { object-fit: contain; background: #fff; }
.shop-card-label { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  font-family: var(--f-caps); font-weight: 700; font-size: clamp(10px, 10cqw, 19px); line-height: 1.15;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink); padding: 0 10%;
  overflow-wrap: break-word; }
@container (min-width: 9rem) {
  [data-cat]:not([data-cat="fresh-chicken"]) > .shop-card-label::after { content: "homemade";
    font-family: var(--f-hand); font-size: 1.25em; letter-spacing: 0; text-transform: none;
    color: var(--plum); font-weight: 700; }
}
[data-cat="fresh-chicken"] { background: var(--ink); }
[data-cat="fresh-chicken"]::after { border-color: var(--lav); outline-color: var(--lav); }
[data-cat="fresh-chicken"] > .shop-card-label { font-family: var(--f-west); font-weight: 400; color: var(--parch); }

/* ---- the home page: two sides of the booth ---- */
:root { --kitchen-paper: #f6efe4; --ranch-paper: #ebe1ec; }
.home { text-align: left; }
.home h1, .home h2, .home p { margin: 0; }
.booth { display: grid; grid-template-columns: 1fr 1fr; position: relative; margin: 0 -15px; }
.side { padding: 34px 30px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.side-kitchen { background: var(--kitchen-paper); }
.side-ranch { background: var(--ranch-paper); }
/* the seam: a double plum rule with the plum "&" medallion on it */
.booth::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 5px; translate: -50% 0;
  border-left: 1px solid var(--plum); border-right: 1px solid var(--plum); z-index: 1; }
.home-amp { position: absolute; left: 50%; top: 200px; translate: -50% 0; width: 84px; height: 84px;
  border-radius: 50%; background: var(--plum); color: var(--parch); display: grid; place-items: center;
  font: 400 54px/1 var(--f-script); padding-bottom: 6px;
  box-shadow: 0 0 0 4px var(--parch), 0 0 0 5px var(--plum); z-index: 2; }
/* the Kitchen logo, reassembled: top and bottom as images, the scroll + heart live SVG between */
.klogo { width: min(100%, 360px); }
.klogo img { display: block; height: auto; }
.klogo .kl-top { width: 96.4%; margin: 0 auto; }
.klogo .ks { margin: 1.2% 0 1.8%; }
.klogo .kl-bot { width: 86.3%; margin: 0 auto; }
.rlogo-h { width: min(92%, 330px); }
.rlogo { display: block; width: 100%; height: auto; }
.home-window { margin: 22px 0 0; max-width: 18rem; font: 700 14px/1.3 var(--f-caps);
  letter-spacing: .04em; color: var(--plum); }
.home-window + .home-cards { margin-top: 14px; }
.home-cards { list-style: none; margin: 26px 0 0; padding: 0; display: grid; width: 100%;
  grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: left; }
.home-card-link { display: block; color: inherit !important; text-decoration: none; }
.home-card .shop-card-photo { width: 100%; aspect-ratio: 1; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); }
.home-card .shop-card-photo::after { inset: 5px; }
.home-card-body { display: flex; flex-direction: column; padding-top: 8px; }
.home-card-name { font-family: var(--f-caps); font-weight: 700; font-size: 13px; line-height: 1.2; }
.home-card-price { font-size: 13px; color: var(--muted); }
.home-card .shop-card-label { font-size: clamp(9px, 8cqw, 15px); padding: 0 6%; }
.home-btn { margin-top: 22px; }
.klogo + .home-btn, .rlogo-h + .home-btn { margin-top: 26px; }   /* a side with no products */
/* the creed and the about link: one quiet line between the booth and the markets */
.creed { margin: 0; padding: 16px 12px; text-align: center; border-top: 1px solid var(--plum);
  display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.creed-words { font: 700 13px/1.3 var(--f-caps); letter-spacing: .18em; }
.creed-heart { color: var(--plum); font-size: 13px; }
.creed a { font-weight: 700; font-size: 14px; color: var(--plum); }
/* ---- the markets band: one enamel plum band, up to four small signs ---- */
.days { background: var(--enamel); color: var(--cream); margin: 0 -15px; padding: 18px 18px 20px; }
.home .days-h { text-align: center; font: 700 22px/1 var(--f-hand); color: var(--lav); margin: 0 0 14px; }
/* signs keep a quarter-row width and centre, so one to three markets don't leave a gap */
.home-days { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px; }
.home-day { flex: 0 1 calc((100% - 36px) / 4); position: relative; text-align: center; padding: 14px 10px 0; display: flex; flex-direction: column; }
.home-day::before { content: ""; position: absolute; inset: 0; border: 1px solid rgba(240,230,214,.55);
  pointer-events: none; }
.home-day > p, .home-day > h3 { margin: 0; }
.day-date { font-weight: 700; font-size: 11px; line-height: 1; letter-spacing: .16em; }
.day-name { font-family: var(--f-west) !important; font-weight: 400 !important; color: var(--cream) !important;
  font-size: clamp(15px, 2.2vw, 17px); line-height: 1.15; margin-top: 8px !important; text-wrap: balance; }
.day-hours { font-weight: 700; margin-top: 6px !important; }
.day-where { font-size: 13px; opacity: .85; padding-bottom: 12px; }
.shop .day-where a, .shop .day-where a:visited { color: var(--cream); text-decoration: underline;
  text-underline-offset: 3px; }
.shop .day-where a:hover, .shop .day-where a:focus-visible { color: var(--lav); }
/* the order strip, pinned to the bottom of the sign */
.day-action { margin: auto -10px 0 !important; padding: 5px; background: var(--cream); color: var(--enamel);
  font-weight: 700; font-size: 13px; }
.home-day:not([data-state="open"]) .day-action { background: transparent; color: var(--cream);
  border-top: 1px solid rgba(240,230,214,.55); font-weight: 600; }
.home-closed { text-align: center; color: var(--muted); margin-top: 18px !important; }
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.about h1 { grid-column: 1 / -1; }
.about-photo { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.about:not(:has(.about-photo)) .about-copy { grid-column: 1 / -1; }
@media (max-width: 52em) { .home-day { flex-basis: calc((100% - 12px) / 2); } }
@media (max-width: 21em) { .home-day { flex-basis: 100%; } }
@media (max-width: 46em) {
  .booth { grid-template-columns: 1fr; }
  .booth::before { display: none; }
  .home .home-amp { position: relative; left: auto; top: auto; translate: none; margin: -42px auto; }
  .side { padding: 30px 16px 28px; }
  .side-ranch { padding-top: 54px; }
  .side-kitchen { padding-bottom: 58px; }
  .creed { flex-direction: column; align-items: center; gap: 4px; }
  .creed-heart { display: none; }
}
@media (max-width: 40em) {
  .booth, .days { margin: 0 -7px; }
  .about { grid-template-columns: 1fr; }
}

/* ======== the other pages: styling only, over the kit's markup ======== */

/* titles: Cinzel (:where keeps these below every class rule above) */
:where(.shop-main h1, .shop-main h2, .shop-main h3) { font-family: var(--f-caps); font-weight: 700;
  color: var(--ink); }
.shop-title, .shop-product-info h1, .shop-main > h1 { font-family: var(--f-caps); font-weight: 700;
  font-size: 1.7rem; margin: 1.1rem 0 1rem; letter-spacing: .02em; }
.shop-product-info h1 { margin-top: 0; }

/* section titles are plum ribbons */
.shop-section-title { position: relative; display: inline-block; background: var(--plum); color: var(--parch);
  font-family: var(--f-caps); font-weight: 700; letter-spacing: .2em; font-size: 13px; line-height: 1.45;
  padding: 6px 26px; margin: 0 16px 14px; z-index: 1; text-transform: uppercase; }
.shop-section-title::before, .shop-section-title::after { content: ""; position: absolute; top: 7px; width: 22px;
  height: 100%; background: var(--plum2); z-index: -1; }
.shop-section-title::before { left: -16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); }
.shop-section-title::after { right: -16px; clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); }

/* buttons and form controls */
.shop-button, .shop-button-small { border-radius: 3px; }
.shop input[type="radio"], .shop input[type="checkbox"] { accent-color: var(--shop-accent); }
.shop-filters, .shop-pickup, .shop-upcoming { background: #fff; border: 1px solid var(--line); border-radius: 4px; }

/* listing cards */
.shop-card { border-radius: 4px; }
.shop-card-photo { border-radius: 0; }
.shop-card-name { font-family: var(--f-caps); font-weight: 700; font-size: 14px; line-height: 1.25; }
.shop-card-link { padding-bottom: .75rem; }
.shop-card-featured { font-family: var(--f-caps); font-weight: 700; font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--plum); }

/* product page */
.shop-gallery img, .shop-gallery-empty { border-radius: 4px; }
.shop-category { font-family: var(--f-caps); font-weight: 700; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; margin: .25rem 0 .5rem; }
.shop-category a { color: var(--plum); text-decoration: none; }
.shop-category a:hover { text-decoration: underline; }
.shop-choice { background: #fff; border-radius: 4px; }
.shop-choice:has(input:checked) { border-color: var(--plum); box-shadow: 0 0 0 1px var(--plum); }
.shop-allergens { background: #fff; border-left: 3px solid var(--plum); padding: .6rem .9rem; margin: 1rem 0; }

/* the market banner as a pickup ticket: plum stub, perforation, details */
.shop-market-banner { display: grid; grid-template-columns: auto 1fr; align-items: stretch;
  padding: 6px 22px 12px; font-size: 14px; }
.shop-market-banner-none { grid-template-columns: 1fr; }
.shop-market-banner-stub { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; margin: 0 !important; padding: 8px 18px; background: var(--plum); color: var(--parch);
  border-radius: 4px 0 0 4px; border-right: 2px dashed var(--parch); text-align: center; }
.shop-market-banner-stub span { display: block; }
.shop-market-banner-weekday { font-family: var(--f-hand); font-weight: 700; font-size: 18px; color: var(--lav);
  line-height: 1; }
.shop-market-banner-date { font-family: var(--f-caps); font-weight: 700; font-size: 22px; line-height: 1.1;
  letter-spacing: .04em; }
.shop-market-banner-window { font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.shop-market-banner-body { background: #fff; border: 1px solid var(--line); border-radius: 0 4px 4px 0;
  padding: 8px 14px; display: flex; flex-direction: column; justify-content: center; }
.shop-market-banner-none .shop-market-banner-body { border-radius: 4px; }
.shop-market-banner-day { display: none; }
.shop-market-badge { align-self: flex-start; font-family: var(--f-caps); font-weight: 700; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--plum); border: 1px solid var(--plum);
  border-radius: 999px; padding: 0 8px; margin-top: 4px; }
.shop-market-banner-closes { color: var(--plum); }

/* cart rows */
.shop-line { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: .75rem .9rem;
  margin-bottom: 8px; }
.shop-line-photo { border-radius: 4px; }
.shop-line-main a { color: var(--ink); font-family: var(--f-caps); font-weight: 700; text-decoration: none; }
.shop-line-main a:hover { text-decoration: underline; }

@media (max-width: 40em) {
  .shop-market-banner { padding: 6px 14px 10px; }
  .shop-market-banner-stub { padding: 6px 12px; }
  .shop-market-banner-date { font-size: 18px; }
  .shop-title, .shop-main > h1 { font-size: 1.45rem; }
}

/* The "Side" tag group (Ranch / Kitchen) only drives the home page links and columns; it is
   the only tag group, so the product page's tag list is hidden. Revisit if the seller adds tags. */
.shop-tags { display: none; }

/* Contact: the group-order fields hide when "A question" is chosen. Without :has()
   they stay visible, and the server ignores them on a question. */
.contact-reach { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.contact-reach li { margin: 0.15rem 0; }
.contact-form .shop-choice { display: flex; align-items: center; gap: 0.4rem; font-weight: 400; margin: 0.2rem 0; }
.contact-form:has(#contact-topic-question:checked) .contact-group { display: none; }

/* ======== the Kitchen scroll draws itself (home page) ======== */
/* The Kitchen scroll draws itself on page load, after chimneyhillhoa's roofline:
   every stroke has pathLength="1", starts fully dashed-off, and runs to 0.
   Order: the diamonds at the centre, the apex arms and loops, the curls and swooshes,
   then the two rules grow outward, then the heart outlines and fills in.
   Classes come from kitchen-scroll.svg's markup, inlined in the page. */
.ks { display: block; width: 100%; height: auto; color: var(--plum); overflow: visible; }

@media (prefers-reduced-motion: no-preference) {
  .ks .ks-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ks-draw .9s cubic-bezier(.45,.05,.3,1) forwards; }
  .ks .ks-dia-o { animation-delay: .25s; animation-duration: .6s; }
  .ks .ks-dia-i { animation-delay: .45s; animation-duration: .5s; }
  .ks .ks-apex  { animation-delay: .7s;  animation-duration: .45s; }
  .ks .ks-loop  { animation-delay: 1.0s; }
  .ks .ks-curl  { animation-delay: 1.35s; stroke-dashoffset: -1; }   /* drawn from the diamond outward */
  /* the rules grow from the curl toward the page edge */
  .ks .ks-rule { transform-box: fill-box; transform-origin: right center; transform: scaleX(0);
    animation: ks-grow .9s cubic-bezier(.3,.6,.2,1) forwards; }
  .ks .ks-rule-a { animation-delay: 1.9s; }
  .ks .ks-rule-b { animation-delay: 2.0s; }
  /* the heart: outline first, then the plum pours in, with one small beat */
  .ks .ks-heart { fill-opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1;
    transform-box: fill-box; transform-origin: center;
    animation: ks-draw .8s ease-in-out 2.3s forwards, ks-fill .5s ease-out 3.0s forwards, ks-beat .5s ease-in-out 3.4s; }
}
@keyframes ks-draw { to { stroke-dashoffset: 0; } }
@keyframes ks-grow { to { transform: scaleX(1); } }
@keyframes ks-fill { to { fill-opacity: 1; } }
@keyframes ks-beat { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.1); } }