/* 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. The hide needs !important, because
   core's single-product.css sets the masonry variant swatches to
   display: grid !important at 480px and below. */
.fct_buy_section:has(.fct-fr-addons) > :not(.fct-product-buttons-wrap) { display: none !important; }
.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; }