/* WCC-228: the order-ahead strip and the category grid (its tabs style, WCC-243). Every colour is the live site's (WCC-237):
   Avada's global palette where it has one, read through its own variable so a palette change
   carries over, with the live value as the fallback where Avada is absent (the dev store). */
.capers-strip, .capers-cat-grid, .capers-cat-tabs {
  --capers-strip-paper: var(--awb-color1, #ffffff);  /* --awb-color1, the page background */
  --capers-strip-mist: var(--awb-color2, #f3f3f3);   /* --awb-color2 */
  --capers-strip-line: var(--awb-color3, #eeeeee);   /* --awb-color3: Avada's --sep_color and --form_border_color */
  --capers-strip-faint: var(--awb-color6, #aaaaaa);  /* --awb-color6: disabled text only (2.3:1, exempt) */
  --capers-strip-muted: #555555;                     /* Store Styling's product price colour; no palette grey passes AA */
  --capers-strip-ink: var(--awb-color7, #222222);    /* --awb-color7: --body_typography-color */
  --capers-strip-dark: var(--awb-color8, #0f1317);   /* --awb-color8: the page's buttons */
}
.capers-strip { position: sticky; top: var(--capers-strip-top, 0px); z-index: 50; background: var(--capers-strip-paper);
  border-bottom: 1px solid var(--capers-strip-line); font-family: Sen, "Helvetica Neue", Arial, sans-serif; color: var(--capers-strip-ink); }
.capers-strip-body { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 12px 0; }
.capers-strip-label { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--capers-strip-muted); }
.capers-strip-type { display: inline-flex; border: 1px solid var(--capers-strip-line); border-radius: 999px; padding: 3px; }
.capers-strip-type button { border: 0; background: transparent; border-radius: 999px; padding: 6px 16px; min-height: 40px; font-weight: 600; cursor: pointer; color: var(--capers-strip-muted); }
.capers-strip-type button[aria-pressed="true"] { background: var(--capers-strip-dark); color: var(--capers-strip-paper); }
.capers-strip-type button:disabled { opacity: .45; cursor: not-allowed; }
.capers-strip-days { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 360px; min-width: 0; }
.capers-strip-day { flex: 0 0 auto; box-sizing: border-box; width: 58px; border: 1px solid var(--capers-strip-line); border-radius: 8px; background: var(--capers-strip-paper); color: var(--capers-strip-ink); padding: 5px 0 6px; text-align: center; line-height: 1.15; cursor: pointer; }
.capers-strip-day small { display: block; font-size: 11px; text-transform: uppercase; color: var(--capers-strip-muted); }
.capers-strip-day b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.capers-strip-day em { display: block; font-style: normal; font-size: 11px; color: var(--capers-strip-muted); }
.capers-strip-day[aria-pressed="true"] { background: var(--capers-strip-dark); border-color: var(--capers-strip-dark); color: var(--capers-strip-paper); }
.capers-strip-day[aria-pressed="true"] small, .capers-strip-day[aria-pressed="true"] em { color: var(--capers-strip-line); }
.capers-strip-day:disabled { background: var(--capers-strip-mist); color: var(--capers-strip-faint); cursor: not-allowed; }
/* WCC-247: until the days arrive. A day's own box (its three lines each hold a space), so nothing
   moves when the real days replace it, in a soft fill that breathes unless motion is reduced. */
.capers-strip-day.is-placeholder { background: var(--capers-strip-mist); color: transparent; cursor: default; animation: capers-strip-pulse 1.6s ease-in-out infinite; }
@keyframes capers-strip-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .capers-strip-day.is-placeholder { animation: none; } }
.capers-strip-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.capers-strip-more[hidden] { display: none; }
.capers-strip-more svg { display: block; flex: none; }
.capers-strip-more em { line-height: 1.1; }
.capers-strip-time { display: flex; align-items: center; gap: 8px; }
.capers-strip-time select { border: 1px solid var(--capers-strip-dark); border-radius: 8px; padding: 8px 12px; min-width: 168px; min-height: 44px; font-weight: 600; }
.capers-strip-summary { margin: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.capers-strip-compact { display: none; }
.capers-strip :focus-visible { outline: 2px solid var(--capers-strip-dark); outline-offset: 2px; }   /* the gold, --awb-color5, is 2.2:1 on white */
/* The "More dates" calendar (WCC-237). Flatpickr appends it to <body>, where the properties above do
   not reach, so it reads Avada's variables directly with the same live fallbacks. Flatpickr's own
   sheet prints later, so each rule outranks its Flatpickr twin; the chosen day's come last to win. */
.capers-strip-cal .flatpickr-day:not(.flatpickr-disabled):hover, .capers-strip-cal .flatpickr-day:not(.flatpickr-disabled):focus { background: var(--awb-color2, #f3f3f3); border-color: var(--awb-color3, #eeeeee); }
.capers-strip-cal .flatpickr-day.today { border-color: var(--awb-color6, #aaaaaa); }
.capers-strip-cal .flatpickr-day.today:hover, .capers-strip-cal .flatpickr-day.today:focus { background: var(--awb-color2, #f3f3f3); border-color: var(--awb-color6, #aaaaaa); color: var(--awb-color7, #222222); }
.capers-strip-cal .flatpickr-day.selected, .capers-strip-cal .flatpickr-day.selected:hover, .capers-strip-cal .flatpickr-day.selected:focus { background: var(--awb-color8, #0f1317); border-color: var(--awb-color8, #0f1317); color: var(--awb-color1, #ffffff); }
.capers-strip-cal .flatpickr-day:focus-visible { outline: 2px solid var(--awb-color8, #0f1317); outline-offset: 2px; }
@media (max-width: 640px) {
  /* WCC-253: a bar shoppers notice. A fixed height, so the saved choice (two lines at most) moves nothing; white on the dark is 18:1. */
  .capers-strip-compact { display: flex; box-sizing: border-box; width: 100%; height: 56px; align-items: center; gap: 12px; margin: 0; border: 0; border-radius: 0; background: var(--capers-strip-dark); color: var(--capers-strip-paper);
    padding: 0 16px; text-align: left; font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer; }
  .capers-strip-compact:hover { background: var(--capers-strip-dark); color: var(--capers-strip-paper); }
  .capers-strip .capers-strip-compact:focus-visible { outline: 2px solid var(--capers-strip-paper); outline-offset: -5px; }   /* the dark outline would vanish on the bar */
  .capers-strip-compact svg { display: block; flex: none; }
  .capers-strip-compact-text { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .capers-strip-change { display: none; flex: none; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
  .capers-strip-compact.is-chosen .capers-strip-change { display: inline; }
  .capers-strip-body { display: none; }
  .capers-strip.is-open .capers-strip-body { display: flex; }
  .capers-strip-days { flex-basis: 100%; }
  .capers-strip-time, .capers-strip-time select { width: 100%; }
}
.capers-cat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.capers-cat { display: grid; gap: 8px; text-decoration: none; color: var(--capers-strip-ink); }
.capers-cat-ph { aspect-ratio: 1; max-width: 100%; overflow: hidden; border-radius: 6px; background: var(--capers-strip-mist); }
.capers-cat-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capers-cat-name { font-family: "Playfair Display", Georgia, serif; font-size: 17px; text-align: center; }
@media (max-width: 980px) { .capers-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .capers-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
/* The category tabs (WCC-243): one row of pills that scrolls sideways. category-tabs.js adds
   is-more-left / is-more-right where the row has more, which fades that edge, and shows the arrows
   on a desktop; without it the row still scrolls by touch or trackpad. */
.capers-cat-tabs { position: relative; font-family: Sen, "Helvetica Neue", Arial, sans-serif; }
.capers-cat-tabs-row { display: flex; gap: 8px; overflow-x: auto; padding: 7px 4px; scrollbar-width: none; scroll-padding-inline: 48px; overscroll-behavior-x: contain; }
.capers-cat-tabs-row::-webkit-scrollbar { display: none; }
.capers-cat-tabs.is-more-right .capers-cat-tabs-row { -webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent); mask-image: linear-gradient(to right, black calc(100% - 48px), transparent); }
.capers-cat-tabs.is-more-left .capers-cat-tabs-row { -webkit-mask-image: linear-gradient(to right, transparent, black 48px); mask-image: linear-gradient(to right, transparent, black 48px); }
.capers-cat-tabs.is-more-left.is-more-right .capers-cat-tabs-row { -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent); mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent); }
.capers-cat-tab { flex: none; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 40px; padding: 0 16px; border: 1px solid var(--capers-strip-line); border-radius: 999px;
  background: var(--capers-strip-paper); color: var(--capers-strip-ink); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; }
.capers-cat-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* only a name wider than the whole row */
.capers-cat-tab img { display: block; flex: none; width: 28px; height: 28px; max-width: none; margin-left: -11px; border-radius: 50%; object-fit: cover; background: var(--capers-strip-mist); }
.capers-cat-tab:hover { background: var(--capers-strip-mist); color: var(--capers-strip-ink); }
.capers-cat-tab[aria-current="page"] { background: var(--capers-strip-dark); border-color: var(--capers-strip-dark); color: var(--capers-strip-paper); }
.capers-cat-tabs :focus-visible { outline: 2px solid var(--capers-strip-dark); outline-offset: 2px; }
.capers-cat-tabs-prev, .capers-cat-tabs-next { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--capers-strip-line); border-radius: 50%; background: var(--capers-strip-paper); color: var(--capers-strip-ink); box-shadow: none; cursor: pointer; }
.capers-cat-tabs-prev { left: 0; }
.capers-cat-tabs-next { right: 0; }
.capers-cat-tabs-prev:hover, .capers-cat-tabs-next:hover { border-color: var(--capers-strip-dark); }
.capers-cat-tabs-prev[hidden], .capers-cat-tabs-next[hidden] { display: none; }
@media (max-width: 640px) { .capers-cat-tab img { width: 24px; height: 24px; margin-left: -12px; } }