/*
 * Shopify shop components — GVR26-10.
 *
 * Enqueued directly by inc/fire-shopify-shop.php (handle `fire-shopify-shop`),
 * NOT imported into theme/main.css: the other files in this folder are
 * Tailwind sources compiled into dist/styles.css, this one is plain CSS.
 *
 * All of the collection grid's look already comes from the theme's own
 * theme/assets/styles/components/c7wp.css (card, aspect ratio, hover, column
 * counts, type). What is here is only the handful of rules Commerce7's CDN
 * stylesheet (cdn.commerce7.com/v2/commerce7.css) contributes on the live site
 * today, restated with the same values so the grid is unchanged while
 * wp-commerce7 is still installed and still correct once it is deleted.
 */

/* Commerce7's visually-hidden helper — used by the collection's "Product
   Listing" heading and the "Item Price" / "Quantity" / "Options" labels. */
.c7-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Spacing around the card grid itself (live: margin 40px 0 60px). */
.c7-product-collection__product-list {
  margin: 40px 0 60px;
}

/* Product title links are plain text on the card; the whole card is the link. */
.c7-product__title a {
  color: inherit;
  text-decoration: none;
}

.c7-product__link a,
.c7-product__image a {
  display: block;
  width: 100%;
  height: 100%;
}

/* The line Commerce7 shows under the title for non-shippable / seasonal items
   ("Not available to ship during summer months"). */
.c7-product__subtitle {
  color: var(--c7-alt-text-color);
  font-size: 17px;
  line-height: 1.5;
  margin: 0 0 10px;
}

/* Commerce7 renders the cents in a nested span; keep it on the same line. */
.c7-product__add-to-cart__price span {
  white-space: nowrap;
}

/* --- Collection cards (BugHerd #64, #65, #68, #69) ----------------------
 * c7wp.css stacks the photo behind the title band (the photo fills the whole
 * card, the band sits on top and shrinks to the title), so short names left a
 * half-width band and long ones covered the product. The card is a column
 * here: the photo gets its own square, padded area above a full-width band,
 * and the band takes up the rest, so cards in a row end level however long
 * their titles run. The hover keeps its look but runs in 150ms instead of
 * 300ms, and only on the properties it changes. These beat c7wp.css's
 * !important rules by one extra class.
 */
.c7-product-collection .c7-product-collection__products .c7-product.c7-product {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  aspect-ratio: auto !important;
  height: 100%;
  transition: background-color 0.15s ease-out, color 0.15s ease-out !important;
}

.c7-product-collection .c7-product-collection__products .c7-product .c7-product__image {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  height: auto !important;
}

.c7-product-collection .c7-product-collection__products .c7-product .c7-product__image img {
  inset: 1.25rem !important;
  width: calc(100% - 2.5rem) !important;
  height: calc(100% - 2.5rem) !important;
  object-fit: contain !important;
  transition: filter 0.15s ease-out !important;
}

.c7-product-collection .c7-product-collection__products .c7-product .c7-product__image:after {
  transition: background-color 0.15s ease-out !important;
}

.c7-product-collection .c7-product-collection__products .c7-product .c7-product__details {
  flex: 1 1 auto;
  width: 100% !important;
  transition: background-color 0.15s ease-out !important;
}

/* =========================================================================
 * Merchandise product detail — /product/{slug}/
 *
 * templates/shopify-poc/product-single.php emits Commerce7's product-detail
 * DOM, so most of its look already comes from the theme's own c7wp.css
 * (.c7-content .c7-product__title, .c7-product__content, the photo thumbs
 * grid, .c7-btn). What is below is only what cdn.commerce7.com/v2/commerce7.css
 * contributes today and takes with it when wp-commerce7 is deleted: the
 * two-column layout, the quantity + radio field skin, and the price line.
 *
 * Values are copied from that stylesheet unchanged, and everything that could
 * collide with another Commerce7 widget while the plugin is still installed is
 * scoped to `.c7-product-detail`. The --c7-* custom properties are the theme's
 * own, declared at the top of c7wp.css.
 * ====================================================================== */

/* The section wrapper Commerce7 pads on every widget page. */
.c7-content {
  padding: 20px 0 40px;
}

.c7-product-detail .c7-product__image {
  text-align: center;
}

.c7-product-detail .c7-product__details {
  flex: 1;
}

.c7-product-detail .c7-product__inventory-message {
  color: var(--c7-alt-text-color);
}

.c7-product-detail .c7-product__add-to-cart {
  margin: 30px 0 50px;
}

/* --- Fields (Commerce7's .c7-form skin) -------------------------------- */

.c7-product-detail .c7-form__field {
  flex: 1 0 0;
  margin-bottom: 20px;
  position: relative;
}

.c7-product-detail .c7-form fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.c7-product-detail .c7-form input[type='text'] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  background: var(--c7-field-bg);
  border: 1px solid var(--c7-field-border-color);
  border-radius: var(--c7-field-border-radius);
  font-family: var(--c7-font-family);
  font-size: var(--c7-font-size);
  line-height: 1.4;
  height: 46px;
  padding: 11px 10px;
  width: 100%;
  transition: all 0.1s ease-out;
}

.c7-product-detail .c7-form input:active:not([disabled]),
.c7-product-detail .c7-form input:focus:not([disabled]) {
  box-shadow: 0 0 0 3px var(--c7-field-focus-color);
  outline: 0;
}

.c7-product-detail .c7-product__add-to-cart input {
  max-width: 300px;
}

/* --- Variant radios ---------------------------------------------------- */

.c7-product-detail .c7-form input[type='radio'] {
  opacity: 0;
  height: 0;
  width: 0;
  position: absolute;
  margin: 0 10px 0 0;
  padding: 0 !important;
  pointer-events: none;
}

.c7-product-detail .c7-form .c7-radio {
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--c7-font-size);
  text-align: left;
  padding: 2px 0;
}

.c7-product-detail .c7-radio__control {
  flex: 0 0 18px;
  display: inline-block;
  background: var(--c7-field-bg);
  border: 1px solid var(--c7-field-border-color);
  border-radius: 50%;
  margin: 4px 10px 0 0;
  position: relative;
  height: 18px;
  width: 18px;
  transition: all 0.1s ease-out;
}

.c7-product-detail .c7-radio input[type='radio']:checked + .c7-radio__control {
  border-color: var(--c7-field-option-selected-color);
}

.c7-product-detail .c7-radio input[type='radio']:checked + .c7-radio__control::after {
  content: '';
  background: var(--c7-field-option-selected-color);
  border-radius: 50%;
  display: block;
  width: 10px;
  height: 10px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.c7-product-detail .c7-radio input[type='radio']:not([disabled]):active + .c7-radio__control,
.c7-product-detail .c7-radio input[type='radio']:not([disabled]):focus + .c7-radio__control {
  box-shadow: 0 0 0 4px var(--c7-field-option-focus-color);
}

.c7-product-detail .c7-radio__label {
  flex: 1 0;
}

/* --- Price line -------------------------------------------------------- */

.c7-product-detail .c7-product__add-to-cart__price {
  font-size: 18px;
  margin: 20px 0;
}

.c7-product-detail .c7-product__add-to-cart__price__variant {
  font-size: var(--c7-font-size-sub);
  vertical-align: text-top;
}

.c7-product-detail .c7-product__add-to-cart__price__variant::before {
  content: '/';
  margin: 0 5px;
}

/* Seats left, under the price line — on every ticketed event, not just the
   tours whose pills already carry it (Jake, 2026-09-17). The tier caption's
   own size (--c7-font-size-sub, 14px) in the site red, so it reads as the one
   urgent word in a card that is otherwise ink on cream. Shown at ten or fewer;
   the markup carries `hidden` above that, and `display: none` has to be said
   out loud in case a later rule gives it a display. */
.c7-product-detail .fire-lowstock {
  color: #e32506;
  font-family: var(--c7-font-family);
  font-size: var(--c7-font-size-sub);
  line-height: 1.3;
  /* The price line above it has no bottom margin of its own inside the
     reservation card (.fire-event-reserve resets it), so the gap is set here. */
  margin: 4px 0 0;
}

.c7-product-detail .fire-lowstock[hidden] {
  display: none;
}

/* --- Quantity + button ------------------------------------------------- */

.c7-product-detail .c7-product__add-to-cart__form {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 10px 0;
}

.c7-product-detail .c7-product__add-to-cart__form__quantity {
  max-width: 55px;
  margin-right: 10px;
}

.c7-product-detail .c7-product__add-to-cart__form__quantity .c7-form__field {
  margin-bottom: 0;
}

.c7-product-detail .c7-product__add-to-cart__form__quantity input {
  text-align: center;
}

/* --- Two-column layout ------------------------------------------------- */

@media screen and (min-width: 769px) {
  .c7-product-detail .c7-product {
    display: flex;
  }

  .c7-product-detail .c7-product__image {
    flex: 0 0 350px;
    margin-right: 40px;
  }
}

@media screen and (max-width: 768px) {
  .c7-product-detail .c7-product__image {
    margin-bottom: 20px;
  }

  .c7-product-detail .c7-product__image img {
    max-height: 350px;
  }
}

@media screen and (min-width: 1001px) {
  .c7-product-detail .c7-product__info {
    display: flex;
    gap: 40px;
  }
}

/* =========================================================================
 * Paid (ticketed) event detail — /events/{slug}/[{Y-m-d}/[{HHMM}/]]
 *
 * templates/shopify-poc/event-single.php emits the SAME Commerce7
 * add-to-cart subtree the merchandise PDP does — inside the ME Calendar
 * layout's "Reserve Your Spot" card, under `.c7-product-detail
 * .fire-event-reserve` — so everything above already styles it: the
 * `.c7-radio` ticket tiers, the price line, the quantity box and the button.
 * Only the card's own narrower column needs anything new (see the end of this
 * file); nothing else is repeated here.
 *
 * What IS new is the occurrence control. Live never needs one — it publishes
 * one Commerce7 product per date — while a Guest Manager event folds all its
 * sessions into a single page, so a repeating event gets a date `<select>`
 * and the two bookable tours a departure-time one. Both are rendered in
 * Commerce7's own `.c7-form` field skin, so the rules below are the `select`
 * and `label` blocks of cdn.commerce7.com/v2/commerce7.css, copied unchanged
 * and scoped to `.c7-product-detail` like the rest of this file.
 * ====================================================================== */

.c7-product-detail .c7-form select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  background: var(--c7-field-bg);
  border: 1px solid var(--c7-field-border-color);
  border-radius: var(--c7-field-border-radius);
  font-family: var(--c7-font-family);
  font-size: var(--c7-font-size);
  line-height: 1.4;
  height: 46px;
  padding: 11px 10px;
  width: 100%;
  transition: all 0.1s ease-out;
}

.c7-product-detail .c7-form select:active:not([disabled]),
.c7-product-detail .c7-form select:focus:not([disabled]) {
  box-shadow: 0 0 0 3px var(--c7-field-focus-color);
  outline: 0;
}

.c7-product-detail .c7-form select[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}

/* Commerce7's custom select: its own chevron, drawn inline. */
.c7-product-detail .c7-form select {
  cursor: pointer;
  background-image:
    url('data:image/svg+xml; utf8, <svg aria-hidden="true" focusable="false" role="presentation" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>'),
    linear-gradient(var(--c7-field-bg), var(--c7-field-bg));
  background-color: transparent;
  background-position: center right 8px;
  background-repeat: no-repeat, repeat;
  background-size: 17px;
  padding-right: 30px;
}

.c7-product-detail .c7-form select::-ms-expand {
  display: none;
}

.c7-product-detail .c7-form option {
  font-weight: normal;
}

/* Field labels. Commerce7 styles every label that is not a radio/checkbox
   the same way; on this page that is the Date and Time captions (the
   quantity's label is `.c7-sr-only` and stays invisible). */
.c7-product-detail .c7-form label:not(.c7-radio, .c7-checkbox),
.c7-product-detail .c7-form legend {
  display: block;
  font-size: 15px;
  text-align: left;
  padding-bottom: 5px;
}

/* The date / departure fields share the add-to-cart form's input width. */
.c7-product-detail .c7-product__add-to-cart__occurrence {
  max-width: 300px;
}

.c7-product-detail .c7-product__add-to-cart__occurrence[hidden] {
  display: none;
}

/* A tier whose Shopify variant is out of stock: Commerce7 disables the radio
   rather than hiding it, so the page never looks like it has fewer options
   than it has. */
.c7-product-detail .c7-form input[disabled] ~ .c7-radio__control,
.c7-product-detail .c7-form input[disabled] ~ .c7-radio__label {
  cursor: not-allowed;
  opacity: 0.6;
}

.c7-product-detail .c7-radio:has(input[disabled]) {
  cursor: not-allowed;
}

/* =========================================================================
 * Reservation calendar + departure pills — a DELIBERATE IMPROVEMENT OVER LIVE
 * (Jake, 2026-09-17: "I would like a better selector than a dropdown for
 * dates on this template… maybe the date is a calendar selector, and then
 * ideally the time selection is bubbles/buttons vs. a dropdown").
 *
 * Live's equivalent is Commerce7's reservation widget, which is a SEARCH form
 * (a text date field and a Time dropdown listing the venue's whole operating
 * window in half-hour steps, most of which do not exist). This is a real
 * picker over real departures: a month grid whose day numbers carry one dot
 * per departure — red where seats remain, grey where that departure has sold
 * out — and a row of time pills for the chosen day.
 *
 * The grid was inline in the card's first pass; it now sits in a POPOVER
 * behind a trigger that wears the field skin (Jake, 2026-09-17: "I wonder if
 * the calendar… could be behind a toaster and be a little bit more refined to
 * look like Gervasi's overall branding"), so the card reads as three plain
 * fields until the visitor wants another date.
 *
 * The field skin reads the --c7-* custom properties c7wp.css declares, so the
 * trigger, the tier radios, the quantity box and the Add to Cart button all
 * match, and the dots/fills are the site red (--c7-primary-color). Inside the
 * popover the surface is the brand's own: cream, the display serif, gold for
 * hover and focus. Plain CSS: this file is enqueued directly by
 * fire_shopify_shop_styles(), NOT compiled through Tailwind, so no theme()
 * calls and no `npm run build`.
 * ====================================================================== */

/* The `Date` / `Time` captions. Commerce7's own label rule (above) only
   reaches <label> elements; these fields label a group, not one input. */
.c7-product-detail .fire-picker__caption {
  display: block;
  font-size: 15px;
  text-align: left;
  padding-bottom: 5px;
}

/* Wider than the 300px the date <select> used: seven columns need the room. */
.c7-product-detail .fire-cal-field {
  max-width: 322px;
}

.c7-product-detail .fire-slots-field {
  max-width: 100%;
}

/* --- The date trigger and its popover ----------------------------------
 * Jake, 2026-09-17: "maybe there's a pipe with a little calendar to choose
 * another date. So it looks a little like a dropdown but is actually a
 * trigger for the small toaster". The trigger therefore wears the same field
 * skin as the quantity box and the <select> this replaced — border, radius,
 * height, padding straight off Commerce7's `select` rule above — while the
 * popover it opens is the BRAND surface: the cream the site's cards use
 * (theme colors.white, #fdf2eb), the `shadow-small-white` shadow from
 * tailwind.site.config.js written out longhand, and a 14px radius.
 *
 * Hardcoded hexes are unavoidable here and deliberate: this file is enqueued
 * directly by fire_shopify_shop_styles(), NOT compiled through Tailwind, so
 * theme() is unavailable, and c7wp.css declares no cream/gold custom
 * property. Keep these three in step with tailwind.site.config.js:
 *   #fdf2eb colors.white   #fbc584 colors.gold   #e32506 colors.red
 * -------------------------------------------------------------------- */

.c7-product-detail .fire-datepick {
  position: relative;
}

.c7-product-detail .fire-datepick__trigger {
  -webkit-appearance: none;
  appearance: none;
  background: var(--c7-field-bg);
  border: 1px solid var(--c7-field-border-color);
  border-radius: var(--c7-field-border-radius);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-family: var(--c7-font-family);
  font-size: var(--c7-font-size);
  line-height: 1.4;
  height: 46px;
  padding: 0 0 0 10px;
  text-align: left;
  width: 100%;
  transition: border-color 0.1s ease-out;
}

.c7-product-detail .fire-datepick__trigger:hover {
  border-color: var(--c7-field-focus-border-color);
}

.c7-product-detail .fire-datepick__value {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The pipe: a hairline divider, not a border on the icon, so it keeps the
   select's own inset rather than touching the field edge. */
.c7-product-detail .fire-datepick__pipe {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  margin: 9px 0;
  background: var(--c7-field-border-color);
}

.c7-product-detail .fire-datepick__icon {
  flex: 0 0 auto;
  height: 18px;
  width: 18px;
  margin: 0 12px;
}

.c7-product-detail .fire-datepick__trigger[aria-expanded='true'] .fire-datepick__icon,
.c7-product-detail .fire-datepick__trigger:hover .fire-datepick__icon {
  color: var(--c7-primary-color);
}

.c7-product-detail .fire-datepick__trigger:focus-visible {
  outline: 0;
  border-color: #fbc584;
  box-shadow: 0 0 0 3px rgba(251, 197, 132, 0.55);
}

/* The toaster. Below the trigger by default; .is-above when the viewport has
   no room below (openPop() measures and flips). */
.c7-product-detail .fire-datepick__pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fdf2eb;
  border: 1px solid rgba(29, 31, 33, 0.09);
  border-radius: 14px;
  box-shadow:
    0 1px 1px rgba(255, 255, 255, 0.6) inset,
    0 10px 25px rgba(230, 111, 17, 0.12),
    0 4px 10px rgba(230, 111, 17, 0.08);
  padding: 14px 14px 10px;
}

.c7-product-detail .fire-datepick__pop.is-above {
  top: auto;
  bottom: calc(100% + 8px);
}

/* [hidden] has to win over the block display the popover would otherwise get. */
.c7-product-detail .fire-datepick__pop[hidden] {
  display: none;
}

/* Desktop: at least a comfortable grid width even when the reservation card
   is narrower than that (it is ~293px at 1440), centred on the trigger so the
   overhang is even and never leaves the column. Phones keep the card width. */
@media screen and (min-width: 768px) {
  .c7-product-detail .fire-datepick__pop {
    left: 50%;
    right: auto;
    width: 100%;
    min-width: 320px;
    transform: translateX(-50%);
  }
}

/* --- The month grid ---------------------------------------------------- */

/* The popover is the surface now: the grid itself is bare. */
.c7-product-detail .fire-cal {
  background: none;
  border: 0;
  border-radius: 0;
  font-family: var(--c7-font-family);
  padding: 0;
}

.c7-product-detail .fire-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}

/* The display serif the site sets its headings in, at .heading-4's weight —
   the one thing in the popover that has to read as Gervasi at a glance. */
.c7-product-detail .fire-cal__month {
  font-family: var(--c7-heading-font-family);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
}

.c7-product-detail .fire-cal__nav {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  padding: 0;
  border-radius: 50%;
  transition: background-color 0.1s ease-out;
}

.c7-product-detail .fire-cal__nav svg {
  height: 16px;
  width: 16px;
}

.c7-product-detail .fire-cal__nav:hover:not([disabled]) {
  background: rgba(251, 197, 132, 0.45);
}

.c7-product-detail .fire-cal__nav:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(251, 197, 132, 0.85);
}

.c7-product-detail .fire-cal__nav[disabled] {
  cursor: default;
  opacity: 0.25;
}

.c7-product-detail .fire-cal__row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* Outfit, uppercase, letterspaced, grey — the site's own small-caps voice. */
.c7-product-detail .fire-cal__dow {
  color: #6c6a68;
  font-family: var(--c7-font-family);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 0 4px;
}

.c7-product-detail .fire-cal__cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.c7-product-detail .fire-cal__day {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: default;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 38px;
  width: 40px;
  padding: 0;
  border-radius: 10px;
  transition: background-color 0.1s ease-out, color 0.1s ease-out;
}

/* Reserve the dot row's height on every cell so the numbers stay on a line. */
.c7-product-detail .fire-cal__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 5px;
}

.c7-product-detail .fire-cal__dot {
  display: block;
  height: 5px;
  width: 5px;
  border-radius: 50%;
  background: var(--c7-primary-color);
}

.c7-product-detail .fire-cal__dot.is-off {
  background: var(--c7-field-border-color);
}

/* No departure at all: there for orientation, nothing more. */
.c7-product-detail .fire-cal__day.is-empty {
  color: var(--c7-field-placeholder);
}

.c7-product-detail .fire-cal__day.is-open {
  cursor: pointer;
  font-weight: 600;
}

/* Gold, not grey: the hover is the other place the brand shows through. */
.c7-product-detail .fire-cal__day.is-open:hover {
  background: rgba(251, 197, 132, 0.45);
}

/* Every departure that day has sold out. Visible, struck, not clickable —
   hiding it would make the day read as "no tour", which is a different fact. */
.c7-product-detail .fire-cal__day.is-soldout {
  color: var(--c7-field-placeholder);
  cursor: not-allowed;
}

.c7-product-detail .fire-cal__day.is-soldout .fire-cal__num {
  text-decoration: line-through;
}

/* Today: a thin ring, so it reads without competing with the selected day. */
.c7-product-detail .fire-cal__day.is-today {
  box-shadow: inset 0 0 0 1px rgba(29, 31, 33, 0.28);
}

.c7-product-detail .fire-cal__day.is-selected {
  background: var(--c7-primary-color);
  color: var(--c7-primary-color-text);
  box-shadow: none;
}

.c7-product-detail .fire-cal__day.is-selected .fire-cal__dot {
  background: var(--c7-primary-color-text);
}

.c7-product-detail .fire-cal__day.is-selected .fire-cal__dot.is-off {
  background: currentColor;
  opacity: 0.45;
}

/* Gold focus ring — the dots stay red/grey, which already mean seats/sold
   out; nothing else in the grid may borrow those two colours. */
.c7-product-detail .fire-cal__day:focus-visible,
.c7-product-detail .fire-slot:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(251, 197, 132, 0.85);
}

.c7-product-detail .fire-cal__day.is-today:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(29, 31, 33, 0.28), 0 0 0 3px rgba(251, 197, 132, 0.85);
}

/* --- Departure pills --------------------------------------------------- */

.c7-product-detail .fire-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/*
 * Compact chips, not buttons (Jake, 2026-09-17: the pills "must NOT use the
 * site red for the selected state — red reads as a button next to Add to
 * Cart"). The red belongs to one control in this card, the Add to Cart, so a
 * chosen departure wears the brand INK instead: #1d1f21 fill, cream text.
 * An available one is the same chip outlined, and gold stays what it is
 * everywhere else in the picker — the hover and focus colour.
 */
.c7-product-detail .fire-slot {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid rgba(29, 31, 33, 0.35);
  border-radius: 999px;
  color: #1d1f21;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-family: var(--c7-font-family);
  font-size: 14px;
  line-height: 1.2;
  padding: 6px 12px;
  transition: all 0.1s ease-out;
}

.c7-product-detail .fire-slot:hover:not([disabled]) {
  border-color: #fbc584;
  background: rgba(251, 197, 132, 0.22);
}

/* Seats left, at Commerce7's own low-stock threshold of ten. Same muted
   colour as .c7-product__inventory-message, which is the node live uses. */
.c7-product-detail .fire-slot__note {
  color: var(--c7-alt-text-color);
  font-size: 12px;
}

.c7-product-detail .fire-slot.is-selected {
  background: #1d1f21;
  border-color: #1d1f21;
  color: #fdf2eb;
}

.c7-product-detail .fire-slot.is-selected:hover:not([disabled]) {
  background: #1d1f21;
  border-color: #fbc584;
}

.c7-product-detail .fire-slot.is-selected .fire-slot__note {
  color: inherit;
  opacity: 0.78;
}

.c7-product-detail .fire-slot[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

.c7-product-detail .fire-slot[disabled] .fire-slot__time {
  text-decoration: line-through;
}

/* =========================================================================
 * The reservation card — one event template, free and paid
 * (Jake, 2026-09-17: "the 'card details' layout from the free template was
 * great for both free and paid events").
 *
 * The Commerce7 add-to-cart form used to own a whole page; it now lives in the
 * "Reserve Your Spot" card under the Event Details card, in the ME Calendar
 * layout's RIGHT column — roughly a third of the width it had. Everything it
 * inherits from `.c7-product-detail` above still applies; these rules only let
 * the calendar and the fields use the card's full width instead of the fixed
 * 300/322px the wide layout gave them, and drop the page-sized margins the
 * form carried when it WAS the page.
 * ====================================================================== */

.c7-product-detail.fire-event-reserve .c7-product__add-to-cart {
  margin: 0;
}

.c7-product-detail.fire-event-reserve .c7-form__field:last-of-type {
  margin-bottom: 0;
}

.c7-product-detail.fire-event-reserve .c7-product__add-to-cart__occurrence,
.c7-product-detail.fire-event-reserve .fire-cal-field {
  max-width: 100%;
}

/* Seven columns in a card that can be 295px wide on a phone: let each day fill
   its grid column rather than hold the 40px the wide layout could afford. */
.c7-product-detail.fire-event-reserve .fire-cal__day {
  width: 100%;
}

.c7-product-detail.fire-event-reserve .c7-product__add-to-cart__price {
  margin: 20px 0 0;
}

.c7-product-detail.fire-event-reserve .c7-product__inventory-message {
  margin: 0;
}

/* Sold-out occurrence of a REPEATING event: the date trigger and the pills
   stay put and only the buy controls trade places with Commerce7's inventory
   message, so a visitor who lands on a sold-out departure can still reach the
   next one (GVR26-10-FINDINGS.md, "Sold-out occurrences keep the date
   picker"). `[hidden]` is the UA rule, and `.c7-product__add-to-cart__form`
   above declares `display: flex`, which beats it — the same trap
   `.fire-datepick__pop[hidden]` hit, so say it out loud here too. */
.c7-product-detail.fire-event-reserve .c7-product__add-to-cart__price[hidden],
.c7-product-detail.fire-event-reserve .c7-product__add-to-cart__form[hidden],
.c7-product-detail.fire-event-reserve .c7-product__inventory-message[hidden] {
  display: none;
}

/* The message sits where the price line did, so it keeps the price line's
   gap from the field above it rather than hugging the pills. */
.c7-product-detail.fire-event-reserve .c7-product__inventory-message[data-fire-soldout] {
  margin: 20px 0 0;
}

/* =========================================================================
 * The quantity-cap notice (Jake, 2026-09-17: "if there's only 1 ticket left,
 * I'm not able to add more, but there's no explanation why I can't in the
 * cart. Could a small toaster/notification appear to explain this?").
 *
 * The page-level half. Its twin lives in the cart drawer's shadow DOM
 * (inc/fire-shopify-poc.php) and is styled there, because a shadow root
 * cannot see this stylesheet; the two are kept looking the same by hand.
 *
 * Shown when the reservation card refuses a quantity — a typed number above
 * the seats left, or an Add to Cart with no room left in the cart — and only
 * while the cart drawer is closed. The drawer is a <dialog> in the top layer,
 * so anything the page paints would sit under its backdrop.
 * ====================================================================== */

.fire-toast {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1.5rem;
  z-index: 9999;
  margin: 0 auto;
  width: fit-content;
  max-width: min(30rem, calc(100vw - 2rem));
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: #fdf2eb;
  color: #1d1f21;
  border-left: 4px solid #e32506;
  border-radius: 0.75rem;
  box-shadow: 0 0 15px 5px rgb(0 0 0 / 10%);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* `display: flex` above beats the UA sheet's `[hidden]`, the same trap
   `.fire-datepick__pop[hidden]` hit — say it out loud. */
.fire-toast[hidden] {
  display: none;
}

.fire-toast.is-in {
  opacity: 1;
  transform: none;
}

.fire-toast__text {
  flex: 1 1 auto;
  padding-top: 0.0625rem;
}

.fire-toast__close {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d1f21'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E") center / 0.875rem 0.875rem no-repeat;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s;
}

.fire-toast__close:hover {
  opacity: 1;
}

/* Both bottom corners are spoken for on a phone — the accessibility widget on
   the left, the chat bubble on the right, both of them third-party and both
   painted above anything the theme can reasonably claim — so the notice moves
   to the top of the viewport, clear of the header, rather than under them. */
@media (max-width: 767px) {
  .fire-toast {
    top: 6rem;
    bottom: auto;
    left: 0.75rem;
    right: 0.75rem;
    transform: translateY(-0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fire-toast {
    transition: none;
  }
}

/* =========================================================================
 * Calendar skin — the day-events sidebar (Jake, 2026-09-17: "This layout
 * looks off to me — from the color box beneath the eyebrow text to the events
 * without any spacing between them. Can you subtly clean this up?").
 *
 * Scoped to `.mec-box-calendar .mec-calendar-events-side`, which only the
 * monthly/calendar skin renders: the month table, the month navigator and the
 * list and grid skins see none of this.
 *
 * A DELIBERATE, SUBTLE DEPARTURE from the live sidebar. Live (and MEC's own
 * stylesheet) draw the day marker as a hard 46x46 outlined square with the
 * cards stacked flush against each other; these rules give the marker a
 * compact rounded tile and put air between the cards. Markup and classes are
 * untouched — this file is the whole change.
 *
 * Why the cards touch in the first place: theme/assets/styles/components/
 * events.css (a Tailwind source, compiled into dist/styles.css) means to give
 * `.mec-calendar-events-sec` `display: grid` + a 16px gap, but it gates that
 * on `[style*='display: block']` — with a space — while the skin writes the
 * inline style as `display:block`, without one. The attribute selector never
 * matches, the section stays `display: block`, and the gap never lands. Rather
 * than chase the grid (fixing events.css needs a build, and this file does
 * not), the rhythm below is set with margins, which hold either way.
 * ====================================================================== */

/* Cards: a consistent gap between siblings, nothing else. Radius, shadow and
   the 12px inner padding all still come from events.css. The empty day's
   single "No events on …" row has no sibling, so it is unaffected. */
.mec-box-calendar .mec-calendar-events-side .mec-event-article + .mec-event-article {
  margin-top: 0.75rem;
}

/* The eyebrow ("EVENTS FOR SEPTEMBER", "NEXT EVENTS") hands its 16px of
   padding-bottom to the marker's margin-top below, so that one element owns
   the whole eyebrow -> marker -> card rhythm and the two are not added
   together. Same class in both groups, so both eyebrows sit identically.
   `!important` because events.css sets the padding with one. */
.mec-box-calendar .mec-calendar-events-side .mec-table-side-title {
  padding-bottom: 0 !important;
}

/* The day marker ("27th"). Was a 46x46 red-outlined square sitting flush on
   the first card; now a compact cream tile with a red hairline, centred on the
   same axis (the vendor rule's `margin: 0 auto` is what centres it, so the
   auto side margins are restated rather than replaced) and carrying equal air
   above and below, so eyebrow -> marker -> first card reads as one rhythm.
   `margin-bottom` needs `!important` because events.css zeroes it with one.
   The "Next events" group's marker shares the class and the treatment.
   `.mec-box-calendar.mec-calendar` is doubled up on purpose: MEC's own
   frontend.min.css sets `border-radius: var(--mec-secondary-border-radius)`
   (which resolves to 0) from a four-class selector, and a three-class rule
   here loses to it however late this file loads. */
.mec-box-calendar.mec-calendar .mec-calendar-events-side .mec-table-side-day {
  display: block;
  width: fit-content;
  min-width: 2.75rem;
  height: auto;
  padding: 0.3125rem 0.625rem;
  margin: 1rem auto !important;
  background: #fdf2eb;
  border: 1px solid #e32506;
  border-radius: 0.5rem;
  font-family: "Outfit", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}

/* =========================================================================
 * Gift card detail — /product/gift-card/
 *
 * templates/shopify-poc/gift-card-single.php is the merchandise page plus an
 * option picker (Card Type as .c7-radio, Amount as the .fire-slot chips the
 * event picker uses), the e-gift recipient fields and a short link list. Only
 * those additions are styled here; everything else is the rules above.
 * ====================================================================== */

.c7-product-detail.fire-gift-card .fire-gift-card__option {
  margin-bottom: 16px;
}

.c7-product-detail.fire-gift-card .fire-gift-card__types {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

/* The chips are labels around a real radio (hidden by the radio rule above),
   so the selected and focus states come from the input. */
.c7-product-detail.fire-gift-card .fire-slot:has(input:checked) {
  background: #1d1f21;
  border-color: #1d1f21;
  color: #fdf2eb;
}

.c7-product-detail.fire-gift-card .fire-slot:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(251, 197, 132, 0.85);
}

.c7-product-detail.fire-gift-card .fire-slot {
  min-width: 64px;
  justify-content: center;
  padding: 8px 14px;
  font-size: 15px;
}

/* "Card Type" switches between the e-gift and mailed card pages, so its
   chips are links; the current page wears the selected chip. */
.c7-product-detail.fire-gift-card a.fire-slot {
  text-decoration: none;
}

.c7-product-detail.fire-gift-card a.fire-slot:focus-visible {
  box-shadow: 0 0 0 3px rgba(251, 197, 132, 0.85);
  outline: 0;
}

.c7-product-detail.fire-gift-card .fire-gift-card__recipient {
  max-width: 400px;
}

.c7-product-detail.fire-gift-card .c7-product__add-to-cart__price__variant[hidden],
.c7-product-detail.fire-gift-card .fire-gift-card__recipient[hidden],
.c7-product-detail.fire-gift-card [data-fire-physical-note][hidden],
.c7-product-detail.fire-gift-card .fire-gift-card__error[hidden] {
  display: none;
}

.c7-product-detail.fire-gift-card .fire-gift-card__recipient .c7-form__field {
  margin-bottom: 14px;
}

.c7-product-detail.fire-gift-card .c7-form input[type='email'],
.c7-product-detail.fire-gift-card .c7-form input[type='date'],
.c7-product-detail.fire-gift-card .c7-form textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  background: var(--c7-field-bg);
  border: 1px solid var(--c7-field-border-color);
  border-radius: var(--c7-field-border-radius);
  font-family: var(--c7-font-family);
  font-size: var(--c7-font-size);
  line-height: 1.4;
  min-height: 46px;
  padding: 11px 10px;
  width: 100%;
  max-width: none;
  transition: all 0.1s ease-out;
}

.c7-product-detail.fire-gift-card .c7-form textarea {
  resize: vertical;
}

.c7-product-detail.fire-gift-card .c7-form .fire-gift-card__recipient input[type='text'] {
  max-width: none;
}

.c7-product-detail.fire-gift-card .c7-form textarea:focus,
.c7-product-detail.fire-gift-card .c7-form input[type='email']:focus,
.c7-product-detail.fire-gift-card .c7-form input[type='date']:focus {
  box-shadow: 0 0 0 3px var(--c7-field-focus-color);
  outline: 0;
}

.c7-product-detail.fire-gift-card .c7-form [aria-invalid='true'] {
  border-color: #e32506;
}

.c7-product-detail.fire-gift-card .fire-gift-card__hint {
  color: var(--c7-alt-text-color);
  font-size: var(--c7-font-size-sub);
  line-height: 1.4;
  margin: 0 0 14px;
}

.c7-product-detail.fire-gift-card .fire-gift-card__recipient .fire-gift-card__hint:last-child,
.c7-product-detail.fire-gift-card .c7-form__field .fire-gift-card__hint {
  margin: 6px 0 0;
}

.c7-product-detail.fire-gift-card .fire-gift-card__error {
  color: #e32506;
  font-size: var(--c7-font-size-sub);
  margin: 6px 0 0;
}

.c7-product-detail.fire-gift-card .c7-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Placeholder-only: says the page is a preview and where to buy for now. */
.c7-product-detail.fire-gift-card .fire-gift-card__notice {
  background: #fdf2eb;
  border: 1px solid rgba(227, 37, 6, 0.35);
  border-radius: 8px;
  font-size: var(--c7-font-size-sub);
  line-height: 1.45;
  margin: 16px 0 20px;
  padding: 12px 14px;
}

.c7-product-detail.fire-gift-card .fire-gift-card__notice p {
  margin: 0;
}

.c7-product-detail.fire-gift-card .fire-gift-card__notice p + p {
  margin-top: 6px;
}

.c7-product-detail.fire-gift-card .fire-gift-card__notice a,
.c7-product-detail.fire-gift-card .fire-gift-card__links a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.c7-product-detail.fire-gift-card .fire-gift-card__links {
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
  font-size: var(--c7-font-size-sub);
  line-height: 1.8;
}

/* =========================================================================
 * Collection card Add to Cart — BugHerd #70
 *
 * c7wp.css hides the card's add-to-cart row, and the whole card is covered by
 * a link (.c7-product__link, z-index 5). The title band is lifted above that
 * link but keeps pointer-events: none, so a click anywhere on the card still
 * opens the product; only the button takes clicks. The button is the same
 * outline button the wine cards use, pinned to the bottom of the band so the
 * buttons in a row line up. The quantity field stays hidden (always 1).
 * ====================================================================== */
.c7-product-collection .c7-product-collection__products .c7-product .c7-product__details {
  display: flex !important;
  flex-direction: column;
  z-index: 6 !important;
}

.c7-product-collection .c7-product-collection__products .c7-product .c7-product__add-to-cart {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.c7-product-collection .c7-product-collection__products .c7-product .c7-product__add-to-cart__form {
  display: block !important;
  margin-top: auto;
  padding-top: 1rem;
}

.c7-product-collection .c7-product-collection__products .c7-product .c7-product__quick-add {
  pointer-events: auto;
  width: 100%;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  text-wrap: balance;
}

/*
 * Shopify cards in "Cards - Call to Action" (inc/fire-shopify-cards.php):
 * the copy is the product's Shopify description, so it can carry a list.
 */
.fire-shopify-card__copy ul,
.fire-shopify-card__copy ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
}

.fire-shopify-card__copy ul {
  list-style: disc;
}

.fire-shopify-card__copy ol {
  list-style: decimal;
}

.fire-shopify-card__copy li + li {
  margin-top: 0.25rem;
}

.fire-shopify-card__gate a {
  text-decoration: underline;
}

.fire-shopify-card__sold-out {
  opacity: 0.5;
  cursor: not-allowed;
}