/* Menu block, product page add-on form and addon cart controls. Colors
   come from the same custom properties as franchise.css, with these
   fallbacks. Filled buttons and selected states read --fct-fr-button-bg
   and --fct-fr-button-text. Sizes are px and the font is inherited. Each
   base rule has the weight of one class and each state rule two, as in
   franchise.css. The [hidden] and :empty rules and the rules on core
   FluentCart markup keep their weight. */
.fct-fr-menu { --fct-fr-columns: 3; display: block; }
.fct-fr-menu__search { width: 100%; max-width: 420px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--fct-fr-border, #d0d5dd); border-radius: 6px; font: inherit; }
.fct-fr-menu__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.fct-fr-menu__tab { padding: 6px 14px; border: 1px solid var(--fct-fr-border, #d0d5dd); border-radius: 999px; background-color: transparent; color: inherit; font: inherit; cursor: pointer; }
.fct-fr-menu__tab.is-active { background-color: var(--fct-fr-button-bg, var(--fct-fr-accent, #111827)); border-color: var(--fct-fr-button-bg, var(--fct-fr-accent, #111827)); color: var(--fct-fr-button-text, var(--fct-fr-accent-text, #fff)); }
.fct-fr-menu__grid { display: grid; grid-template-columns: repeat(var(--fct-fr-columns), minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .fct-fr-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .fct-fr-menu__grid { grid-template-columns: minmax(0, 1fr); } }
.fct-fr-tile { display: flex; flex-direction: column; border: 1px solid var(--fct-fr-border, #e4e7ec); border-radius: 10px; overflow: hidden; background-color: var(--fct-fr-surface, #fff); color: var(--fct-fr-accent, #111827); }
.fct-fr-tile[hidden] { display: none; }
.fct-fr-tile__image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fct-fr-tile__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.fct-fr-tile__title { margin: 0; font-size: 16px; line-height: 1.3; }
.fct-fr-tile__title a { color: inherit; text-decoration: none; }
.fct-fr-tile__excerpt { margin: 0; color: var(--fct-fr-muted, #667085); font-size: 13px; }
.fct-fr-tile__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.fct-fr-tile__price { font-weight: 600; }
.fct-fr-tile__button, .fct-fr-customize { display: inline-block; padding: 8px 16px; border: 0; border-radius: 6px; background-color: var(--fct-fr-button-bg, var(--fct-fr-accent, #111827)); color: var(--fct-fr-button-text, var(--fct-fr-accent-text, #fff)); font: inherit; cursor: pointer; }
.fct-fr-tile__button:where(a), .fct-fr-customize:where(a) { text-align: center; text-decoration: none; }
.fct-fr-tile__button:disabled, .fct-fr-tile__button[aria-disabled="true"], .fct-fr-customize:disabled { background-color: #98a2b3; cursor: not-allowed; }
.fct-fr-tile--sold-out { opacity: 0.6; }
.fct-fr-customize { margin-top: 8px; }
.fct-fr-menu__empty { color: var(--fct-fr-muted, #667085); }
/* Shown when the grid for a new outlet failed to load. */
.fct-fr-menu__notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--fct-fr-border, #e4e7ec); border-radius: 10px; background-color: var(--fct-fr-surface, #fff); color: #b42318; font-size: 14px; }
.fct-fr-menu__notice-text { flex: 1 1 200px; margin: 0; }
.fct-fr-menu__retry { flex: none; padding: 6px 14px; border: 0; border-radius: 6px; background-color: var(--fct-fr-button-bg, var(--fct-fr-accent, #111827)); color: var(--fct-fr-button-text, var(--fct-fr-accent-text, #fff)); font: inherit; cursor: pointer; }
.fct-fr-menu__retry:disabled { opacity: 0.6; cursor: default; }

/* Product page add-on form. It prints inside core's buy buttons row and
   hides the rest of core's buy section, so the form owns the variation
   choice, the quantity and the add. */
.fct_buy_section:has(.fct-fr-addons) > :not(.fct-product-buttons-wrap) { display: none; }
.fct-product-buttons-wrap:has(.fct-fr-addons) { display: block; margin-top: 0; }
/* The theme sets the width of its product column. */
.fct-fr-addons { display: flex; flex-direction: column; gap: 20px; width: 100%; margin: 0; color: inherit; }
.fct-fr-addons__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.fct-fr-addons__legend { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; margin: 0 0 8px; padding: 0; color: var(--fct-fr-accent, #111827); font-size: 16px; font-weight: 700; }
.fct-fr-addons__badge { padding: 2px 10px; border-radius: 999px; background-color: #f2f4f7; color: #475467; font-size: 12px; font-weight: 600; }
.fct-fr-addons__badge.is-required { background-color: #fef3f2; color: #b42318; }
.fct-fr-addons__hint { margin: -4px 0 8px; color: var(--fct-fr-muted, #667085); font-size: 13px; }
.fct-fr-addons__note { display: block; }
.fct-fr-addons__instructions { display: block; box-sizing: border-box; width: 100%; min-height: 64px; margin: 0; padding: 10px 14px; border: 1px solid var(--fct-fr-border, #d0d5dd); border-radius: 10px; background-color: var(--fct-fr-surface, #fff); color: var(--fct-fr-accent, #111827); font: inherit; font-size: 15px; resize: vertical; }
.fct-fr-addons__options { display: flex; flex-direction: column; gap: 8px; }
.fct-fr-addons__card { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--fct-fr-border, #d0d5dd); border-radius: 10px; background-color: var(--fct-fr-surface, #fff); color: var(--fct-fr-accent, #111827); font-size: 15px; cursor: pointer; }
.fct-fr-addons__card input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--fct-fr-button-bg, var(--fct-fr-accent, #111827)); }
.fct-fr-addons__card.is-checked { border-color: var(--fct-fr-button-bg, var(--fct-fr-accent, #111827)); box-shadow: 0 0 0 1px var(--fct-fr-button-bg, var(--fct-fr-accent, #111827)); }
.fct-fr-addons__card.is-disabled { opacity: 0.55; cursor: not-allowed; }
.fct-fr-addons__name { flex: 1; min-width: 0; }
.fct-fr-addons__price { flex: none; color: var(--fct-fr-muted, #667085); font-size: 14px; }
.fct-fr-addons__group-error, .fct-fr-addons__error { margin: 6px 0 0; color: #b42318; font-size: 13px; }

/* Option photos. The group's display settings pick the layout: a list with
   a small photo, a grid, or a swipe row. --fct-fr-cols comes from the group,
   and phones show at most 2 cards across. */
.fct-fr-addons__media { position: relative; display: block; overflow: hidden; border-radius: 8px; background-color: var(--fct-fr-tile, #f2f4f7); }
.fct-fr-addons__img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.fct-fr-addons__tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--fct-fr-muted, #667085); font-size: 28px; font-weight: 700; }
.fct-fr-addons__media--thumb { flex: none; width: 56px; height: 56px; }
.fct-fr-addons__media--thumb .fct-fr-addons__tile { font-size: 18px; }

.fct-fr-addons__options--grid, .fct-fr-addons__options--row { --fct-fr-n: var(--fct-fr-cols, 3); gap: 12px; }
.fct-fr-addons__options--grid { display: grid; grid-template-columns: repeat(var(--fct-fr-n), minmax(0, 1fr)); }
.fct-fr-addons__row { position: relative; }
.fct-fr-addons__options--row { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 8px; scroll-padding: 0 2px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
/* Each card leaves a quarter card of the next one in view. */
.fct-fr-addons__options--row > .fct-fr-addons__card { flex: 0 0 calc((100% - var(--fct-fr-n) * 12px) / (var(--fct-fr-n) + 0.25)); scroll-snap-align: start; }
/* The column setting is 2, 3 or 4, so phones always get 2. A plain number
   avoids min() inside repeat(), which some mobile browsers reject. */
@media (max-width: 480px) {
    .fct-fr-addons__options--grid, .fct-fr-addons__options--row { --fct-fr-n: 2; }
}

.fct-fr-addons__card--media { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "media media" "body body"; align-items: start; gap: 10px; padding: 8px 8px 12px; }
.fct-fr-addons__card--media > .fct-fr-addons__media { grid-area: media; width: 100%; aspect-ratio: 1 / 1; }
.fct-fr-addons__options.is-portrait .fct-fr-addons__card--media > .fct-fr-addons__media { aspect-ratio: 4 / 5; }
.fct-fr-addons__options.is-landscape .fct-fr-addons__card--media > .fct-fr-addons__media { aspect-ratio: 4 / 3; }
.fct-fr-addons__card--media > .fct-fr-addons__body { grid-area: body; display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 4px; }
.fct-fr-addons__card--media .fct-fr-addons__name { overflow-wrap: anywhere; }
.fct-fr-addons__card--media .fct-fr-addons__price { color: var(--fct-fr-accent, #111827); font-weight: 700; }
.fct-fr-addons__options.is-check-corner .fct-fr-addons__card--media > input { position: absolute; top: 16px; left: 16px; z-index: 1; width: 22px; height: 22px; border-radius: 4px; background-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.fct-fr-addons__options.is-check-inline .fct-fr-addons__card--media { grid-template-areas: "media media" "check body"; }
.fct-fr-addons__options.is-check-inline .fct-fr-addons__card--media > input { grid-area: check; margin: 2px 0 0 4px; }
.fct-fr-addons__options.is-check-inline .fct-fr-addons__card--media > .fct-fr-addons__body { padding-left: 0; }

.fct-fr-addons__nav { position: absolute; top: 40%; z-index: 2; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0 0 3px; border: 0; border-radius: 50%; background-color: rgba(17, 24, 39, 0.85); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.fct-fr-addons__nav.is-prev { inset-inline-start: 6px; }
.fct-fr-addons__nav.is-next { inset-inline-end: 6px; }
.fct-fr-addons__nav[hidden] { display: none; }
.fct-fr-addons__group-error:empty, .fct-fr-addons__error:empty, .fct-fr-addons__status:empty { display: none; }
.fct-fr-stepper { display: inline-flex; align-items: center; gap: 10px; }
.fct-fr-stepper__button, .fct-fr-line-controls__step { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--fct-fr-border, #d0d5dd); border-radius: 6px; background-color: transparent; color: inherit; font: inherit; line-height: 1; cursor: pointer; }
.fct-fr-stepper__value { min-width: 20px; text-align: center; }
/* The buy row. Its stepper rules come after the .fct-fr-stepper rules,
   which have the same weight. */
.fct-fr-addons__buy { display: flex; align-items: stretch; gap: 12px; }
:where(.fct-fr-addons__buy) .fct-fr-stepper { flex: none; gap: 4px; padding: 0 4px; border: 1px solid var(--fct-fr-border, #d0d5dd); border-radius: 10px; }
:where(.fct-fr-addons__buy) .fct-fr-stepper__button { width: 36px; height: 46px; border: 0; font-size: 18px; }
.fct-fr-addons__submit { flex: 1; min-width: 0; min-height: 48px; padding: 12px 18px; border: 0; border-radius: 10px; background-color: var(--fct-fr-button-bg, var(--fct-fr-accent, #111827)); color: var(--fct-fr-button-text, var(--fct-fr-accent-text, #fff)); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.fct-fr-addons__submit:disabled { background-color: #98a2b3; cursor: not-allowed; }
.fct-fr-addons__status { margin: 0; color: var(--fct-fr-success, #047857); font-size: 14px; font-weight: 600; }

.fct-fr-line-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.fct-fr-line-controls__qty { min-width: 18px; text-align: center; }
.fct-fr-line-controls__remove { border: 0; background-color: transparent; color: #b42318; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.fct-fr-line-controls__error { flex-basis: 100%; color: #b42318; font-size: 12px; }
.fct-fr-line-controls__error:empty { display: none; }
.fct-fr-tile__stock { margin: 0; color: #b45309; font-size: 13px; font-weight: 600; }
.fct-fr-tile__stock[hidden] { display: none; }
.fct-fr-tile__status { margin-left: auto; color: var(--fct-fr-success, #047857); font-size: 13px; font-weight: 600; }
.fct-fr-tile__status:empty { display: none; }