/* theme kfc v1.a25f609a.1 - generated, do not edit */
/* ------------------------------------------------------------------ fonts (8 faces, self-hosted)
   Files: public/fonts/kfc/ (KFC Standard package, from the brand portal). Serif Heavy Italic's file
   declares weight 700; we register it as 900 so "Heavy" = 900 everywhere. Noto Sans is the
   stated fallback (used when installed; no external font request). */
@font-face { font-family: "Kentucky Fried Sans"; src: url("/fonts/kfc/KentuckyFriedSans-Light.woff2") format("woff2"), url("/fonts/kfc/KentuckyFriedSans-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Kentucky Fried Sans"; src: url("/fonts/kfc/KentuckyFriedSans-Regular.woff2") format("woff2"), url("/fonts/kfc/KentuckyFriedSans-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kentucky Fried Serif"; src: url("/fonts/kfc/KentuckyFriedSerif-Light.woff2") format("woff2"), url("/fonts/kfc/KentuckyFriedSerif-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Kentucky Fried Serif"; src: url("/fonts/kfc/KentuckyFriedSerif-LightItalic.woff2") format("woff2"), url("/fonts/kfc/KentuckyFriedSerif-LightItalic.woff") format("woff"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Kentucky Fried Serif"; src: url("/fonts/kfc/KentuckyFriedSerif-Regular.woff2") format("woff2"), url("/fonts/kfc/KentuckyFriedSerif-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Kentucky Fried Serif"; src: url("/fonts/kfc/KentuckyFriedSerif-Italic.woff2") format("woff2"), url("/fonts/kfc/KentuckyFriedSerif-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Kentucky Fried Serif"; src: url("/fonts/kfc/KentuckyFriedSerif-HeavyItalic.woff2") format("woff2"), url("/fonts/kfc/KentuckyFriedSerif-HeavyItalic.woff") format("woff"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Kentucky Fried Stripes"; src: url("/fonts/kfc/KentuckyFriedStripes-Heavy.woff2") format("woff2"), url("/fonts/kfc/KentuckyFriedStripes-Heavy.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }
:root {
    --ui-primary: #F5002B;
    --ui-primary-text: #EB002B;
    --ui-white: #FFFFFF;
    --ui-black: #000000;
    --ui-accent-1: #BFE036;
    --ui-accent-2: #FF9B17;
    --ui-grey-50: #F9F8F6;
    --ui-grey-100: #EEEBE7;
    --ui-grey-200: #D7D4CF;
    --ui-grey-300: #A2A09B;
    --ui-grey-400: #7E7C77;
    --ui-grey-500: #6E6C67;
    --ui-grey-600: #413F3C;
    --ui-grey-700: #2D2B29;
    --ui-grey-800: #171614;
    --ui-grey-900: #0E0D0C;
    --ui-error-light: #FFEEEE;
    --ui-error-main: #DB0000;
    --ui-error-dark: #AF0000;
    --ui-success-light: #EEF7EE;
    --ui-success-main: #008300;
    --ui-success-dark: #006900;
    --ui-warning-light: #FBF5E5;
    --ui-warning-main: #FFBD15;
    --ui-warning-dark: #C89411;
    --ui-canvas: var(--ui-white);
    --ui-text: var(--ui-black);
    --ui-text-secondary: var(--ui-grey-500);
    --ui-text-link: var(--ui-primary-text);
    --ui-cta-bg: var(--ui-primary);
    --ui-cta-bg-pressed: #A82228;
    --ui-cta-text: var(--ui-white);
    --ui-focus: var(--ui-black);
    --ui-control-line: var(--ui-grey-400);
    --ui-scrim: rgb(0 0 0 / .6);
    --ui-shadow-on-photo: 0 0 18px rgb(0 0 0 / .55), 0 1px 3px rgb(0 0 0 / .45);
    --ui-font-display: "Kentucky Fried Stripes", "Noto Sans", system-ui, sans-serif;
    --ui-font-heading: "Kentucky Fried Serif", "Noto Sans", system-ui, sans-serif;
    --ui-font-body: "Kentucky Fried Sans", "Noto Sans", system-ui, sans-serif;
    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-7: 28px;
    --ui-space-8: 32px;
    --ui-space-9: 36px;
    --ui-space-10: 40px;
    --ui-space-12: 48px;
    --ui-space-14: 56px;
    --ui-space-16: 64px;
    --ui-space-24: 96px;
    --ui-space-32: 128px;
    --ui-page-max: 1440px;
    --ui-radius-none: 0px;
    --ui-radius-40: 4px;
    --ui-radius-100: 8px;
    --ui-radius-200: 16px;
    --ui-border-400: 4px;
    --ui-border-300: 3px;
    --ui-border-100: 1px;
    --ui-focus-width: 2.5px;
    --ui-focus-padding: 4px;
    --ui-focus-radius: var(--ui-radius-40);
    --ui-icon-md: 24px;
    --ui-icon-sm: 20px;
    --ui-icon-xs: 16px;
    --ui-ease-standard: cubic-bezier(0.61, 0.05, 0.60, 1.00);
    --ui-ease-out: cubic-bezier(0.50, 0.00, 0.21, 1.00);
    --ui-ease-in: cubic-bezier(0.80, 0.00, 0.59, 1.00);
    --ui-dur-press: 150ms;
    --ui-dur-label-roll: 300ms;
    --ui-dur-title-line: 250ms;
    --ui-stagger-title: 200ms;
    --ui-dur-body-line: 150ms;
    --ui-stagger-body: 120ms;
    --ui-dur-page: 450ms;
    --ui-dur-card: 250ms;
    --ui-dur-peek: 475ms;
    --ui-dur-sheet: 280ms;
    --ui-strip-h: 54px;
    --tap: 48px;
    --ui-cta-size: 19px;
}
/* Token provenance. The values are the "tokens" in theme.json (JSON carries no comments); what
 * each one is and where it comes from lives here, moved verbatim from the token block of the
 * stylesheet this package was split from. A value without its reason is one the next pass
 * "corrects" back to spec (WebsiteDesignSystemTest pins the two WCAG deviations below).
 *
 * Tokens: "KFC Digital UI Tokens" (vault, KFC global brand portal > Digital Guidelines, 2026-09-19).
 * Where it conflicts with the older print-derived "KFC Brand Rules for Web and Kiosk", the digital
 * spec wins. Values are STATED by KFC unless marked MEASURED (timed from the portal videos) or
 * ESTIMATED (ours; the mobile typescale tab was not captured). See docs/brand-assets-report.md.
 * The three grid tokens stay in base.css, whose media queries redefine them.

    Colour: core (stated). Brand Red = headings, stripes, CTA fills, text >= 18.66px only.
       Digital Red = red text under 18.66px (4.59:1 on white). Never off-white.
    --ui-primary
    --ui-primary-text
    --ui-white
    --ui-black
    --ui-accent-1: black text only
    --ui-accent-2: black text only

    Greys (stated): secondary info, disabled states, sub-dividers only.
    --ui-grey-50 --ui-grey-100 --ui-grey-200 --ui-grey-300 --ui-grey-400
    --ui-grey-500 --ui-grey-600 --ui-grey-700 --ui-grey-800 --ui-grey-900

    Status (stated). Light = tint, Main = fill/border/icon, Dark = text on Light. Info: not stated.
    --ui-error-light --ui-error-main --ui-error-dark
    --ui-success-light --ui-success-main --ui-success-dark
    --ui-warning-light --ui-warning-main --ui-warning-dark

    Semantic
    --ui-canvas
    --ui-text
    --ui-text-secondary: Grey 400 is 4.17:1 on white: fails AA body text
    --ui-text-link
    --ui-cta-bg
    --ui-cta-bg-pressed: sampled from KFC's focus example, not a stated token
    --ui-cta-text
    --ui-focus
    Control boundary. KFC states Grey 200 for inputs (1.4:1, fails WCAG 1.4.11 non-text 3:1);
       we use Grey 400 (4.17:1) for input/radio/stepper outlines. Cards keep Grey 200.
    --ui-control-line

    Overlays (ours: KFC shows dialogs over a dimmed page but publishes no scrim value). Black
       at a fixed alpha, defined here once so no rule writes a colour of its own.
    --ui-scrim: behind a dialog
    --ui-shadow-on-photo: white type over a photograph

    Type families (Noto Sans = stated fallback)
    --ui-font-display
    --ui-font-heading
    --ui-font-body

    Spacing: scale of 4 (stated)
    --ui-space-1 --ui-space-2 --ui-space-3 --ui-space-4 --ui-space-5
    --ui-space-6 --ui-space-7 --ui-space-8 --ui-space-9 --ui-space-10
    --ui-space-12 --ui-space-14 --ui-space-16 --ui-space-24 --ui-space-32

    Grid (stated): small 320-599 = 4 cols / 16 gutter / 16 margin
    --ui-grid-cols --ui-grid-gutter --ui-grid-margin
    --ui-page-max

    Radius (stated, by role)
    --ui-radius-none: header, footer, product cards, category tiles
    --ui-radius-40: buttons, inputs
    --ui-radius-100: selectable cards, banners
    --ui-radius-200: dialogs

    Borders (stated)
    --ui-border-400: primary section divider, black
    --ui-border-300: secondary divider, black
    --ui-border-100: tertiary divider / cards / inputs
    --ui-focus-width --ui-focus-padding --ui-focus-radius

    Icons (Lucide, stated)
    --ui-icon-md --ui-icon-sm --ui-icon-xs

    Motion: easing (stated)
    --ui-ease-standard
    --ui-ease-out
    --ui-ease-in
    Motion: durations (MEASURED from the portal videos; KFC publishes no duration tokens)
    --ui-dur-press --ui-dur-label-roll
    --ui-dur-title-line --ui-stagger-title
    --ui-dur-body-line --ui-stagger-body
    --ui-dur-page: measured PLP -> PDP page push; kept for page transitions
    --ui-dur-card: carousel card becoming active (ui-motion 06: 175-290ms)
    --ui-dur-peek: idle carousel hint, out and back (ui-motion 07)
    --ui-dur-sheet: product sheet open/close

    Sticky category strip height (MEASURED): tile 56 + label 16 + padding. Used by the
       deep-link scroll offset so the two can never drift apart again.
    --ui-strip-h: text tabs: 44px + 8 + 2

    --tap
    Primary CTA label size. KFC's Button style is 16px, but white on Brand Red is 4.27:1, which
       passes AA only as LARGE text (>= 18.66px bold). Serif Heavy Italic is bold, so 19px passes.
    --ui-cta-size
*/

/* === brand/content === */
/* The content pages in KFC's own frame (our-history-desktop, mobile-plp-and-story): a black band
   under the black header carrying the trail and the title, the words on white under it. Every
   value is a token; type sizes are the fluid typescale, line-heights the stated ones. */
.page-band { background: var(--ui-black); color: var(--ui-white); border-radius: var(--ui-radius-none); padding: var(--ui-space-4) 0 var(--ui-space-8); }
@media (min-width: 600px) { .page-band { padding: var(--ui-space-6) 0 var(--ui-space-12); } }
@media (min-width: 1136px) { .page-band { padding: var(--ui-space-8) 0 var(--ui-space-16); } }
.page-band .breadcrumbs { margin: 0; }
.page-band .breadcrumbs a { color: var(--ui-grey-200); }
.page-band .breadcrumbs a:hover { color: var(--ui-white); }
.page-band .breadcrumbs [aria-current="page"] { color: var(--ui-white); }
.page-band .breadcrumbs li + li::before { color: var(--ui-grey-400); }
.page-band :focus-visible { outline-color: var(--ui-white); }
/* Title: H1 (40 -> 52) up to Hero (72/68) at 1136 - KFC's "OUR HISTORY", white Serif caps. */
.page-band-title { margin: var(--ui-space-8) 0 0; max-width: 20ch; color: var(--ui-white); overflow-wrap: anywhere;
    font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase; letter-spacing: 0;
    font-size: clamp(40px, calc(40px + 32 * var(--ui-fluid)), 72px); line-height: 1; }
@media (min-width: 1136px) { .page-band-title { margin-top: var(--ui-space-24); line-height: 68px; } }

.page-body { padding-top: var(--ui-space-8); }
@media (min-width: 600px) { .page-body { padding-top: var(--ui-space-12); } }
.page-body > .page-head:first-child > :first-child { margin-top: 0; }
.page-lead { margin: 0 0 var(--w-gap-section); }

/* The statement (Our Story): the page's answer sentence in Serif Heavy Italic caps, H1 size, with
   the Original Recipe stamp at its right (our-history); the narrative sits in the right half. */
.page-statement { display: grid; gap: var(--ui-space-4); margin: 0 0 var(--w-gap-section); }
.page-statement .page-statement-line { margin: 0; max-width: 24ch; font-family: var(--ui-font-heading); font-style: italic; font-weight: 900;
    text-transform: uppercase; font-size: var(--t-h2); line-height: 1; letter-spacing: 0; }
@media (min-width: 900px) { .page-statement .page-statement-line { font-size: var(--t-h1); } }
.page-stamp { justify-self: end; width: 96px; height: auto; }
@media (min-width: 900px) {
    .page-statement { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); column-gap: var(--ui-grid-gutter); align-items: center; }
    .page-stamp { justify-self: center; width: clamp(120px, 12vw, 180px); }
    .story-body { margin-left: calc(50% + var(--ui-grid-gutter) / 2); }
}
/* The timeline: the year in red Serif (H3; >= 18.66px, so Brand Red is allowed as text). From 900px
   the year takes a left rail and each step sits on a divider - 4px primary on the first, 1px after. */
.info-story .timeline-year { font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase;
    font-size: var(--t-h3); line-height: 1; letter-spacing: 0; color: var(--ui-primary); margin: 0 0 var(--ui-space-2); }
.info-story .timeline h3 { font-size: var(--t-h4); line-height: 1; letter-spacing: .25px; }
@media (min-width: 900px) {
    .info-story .timeline { padding-left: 0; border-left: 0; }
    .info-story .timeline > li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: var(--ui-grid-gutter);
        padding: var(--w-gap-block) 0; border-top: var(--ui-border-100) solid var(--ui-grey-200); }
    .info-story .timeline > li:first-child { border-top: var(--ui-border-400) solid var(--ui-black); }
    .info-story .timeline > li::before { display: none; }
    .info-story .timeline > li > :not(.timeline-year) { grid-column: 2; }
    .info-story .timeline-year { grid-row: 1 / span 2; }
}

/* Values: KFC's closing columns (PEOPLE / FOOD / PLANET), type only, each on the 4px divider. */
.pillars { display: grid; gap: var(--w-gap-section); margin-top: var(--w-gap-block); }
.pillar { border-top: var(--ui-border-400) solid var(--ui-black); padding-top: var(--w-gap-block); }
.pillar h2 { font-size: var(--t-h3); line-height: 1; margin: 0 0 var(--ui-space-3); }
@media (min-width: 900px) { .pillars { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: var(--ui-grid-gutter); } }

/* The hero photograph (Kids parties, Careers, the landing pages): a page banner, 16:9, full content
   width even inside the reading measure. Radius 0. Motion: it opens from a strip as it reaches the
   centre (ui-motion 10) and the photo moves slower than the page (ui-motion 12). */
.page-hero { margin: 0 0 var(--w-gap-section); aspect-ratio: 16 / 9; overflow: clip; background: var(--ui-grey-50); border-radius: var(--ui-radius-none); view-timeline: --page-hero; }
.page-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A read page keeps its 560px measure but starts on the grid margin, under the band's title,
   rather than centred away from it; the photo and a wide table take the full content width. */
.wrap.narrow.page-body { max-width: var(--ui-page-max); }
.wrap.narrow.page-body > * { max-width: 560px; }
.wrap.narrow.page-body > .page-hero, .wrap.narrow.page-body > .table-scroll { max-width: none; }
.wrap.narrow.page-body .table-scroll { width: auto; margin-left: 0; transform: none; }
.wrap.narrow.page-body > .page-main { max-width: 640px; }
.page-aside { display: none; }
@media (min-width: 1136px) {
    .wrap.narrow.page-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: var(--ui-space-12); align-items: start; }
    .wrap.narrow.page-body > * { grid-column: 1 / -1; }
    .wrap.narrow.page-body > .page-main { grid-column: 1; }
    .wrap.narrow.page-body > .page-aside { grid-column: 2; display: block; position: sticky; top: calc(var(--header-h) + var(--ui-space-6));
        border-top: var(--ui-border-400) solid var(--ui-black); padding-top: var(--ui-space-4); }
    .page-aside-title { font-size: var(--t-h4); margin: 0 0 var(--ui-space-2); }
    .page-aside p { margin: 0 0 var(--ui-space-4); }
    .page-aside-stores { list-style: none; margin: var(--ui-space-2) 0 0; padding: 0; }
    .page-aside-stores li { display: flex; justify-content: space-between; gap: var(--w-gap-inline); padding: var(--ui-space-3) 0;
        border-bottom: var(--ui-border-100) solid var(--ui-grey-100); }
    .page-aside-stores a { min-height: 24px; }
    .page-aside-phone { white-space: nowrap; }
}
@media (min-width: 1136px) { .page-hero { aspect-ratio: auto; height: 520px; } }
@supports (animation-timeline: view()) {
    @keyframes kfc-hero-par { from { transform: translateY(-40px); } to { transform: translateY(40px); } }
    .motion-ok .page-hero { animation: kfc-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .motion-ok .page-hero img { height: calc(100% + 80px); margin-top: -40px; animation: kfc-hero-par linear both; animation-timeline: --page-hero; }
}

/* Legal: the reading measure, a compact contents list on the secondary 3px divider, the text on
   the primary 4px, each numbered section on the tertiary 1px. Headings H4 (22/22). */
.legal-toc { margin: 0 0 var(--w-gap-section); padding-top: var(--ui-space-4); border-top: var(--ui-border-300) solid var(--ui-black); }
.legal-toc h2 { font-size: var(--t-h5); line-height: 1; letter-spacing: .25px; margin: 0 0 var(--ui-space-3); }
.legal-toc ol { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 20px; }
@media (min-width: 600px) { .legal-toc ol { columns: 2; column-gap: var(--ui-grid-gutter); } }
.legal-toc li { break-inside: avoid; padding: var(--ui-space-1) 0; }
.legal-toc a { color: var(--ui-text); text-underline-offset: 3px; }
.legal-toc a:hover { color: var(--ui-primary-text); }
.legal-text { padding-top: var(--w-gap-block); border-top: var(--ui-border-400) solid var(--ui-black); }
.legal-text h2 { font-size: var(--t-h4); line-height: 1; letter-spacing: .25px; padding-top: var(--w-gap-block);
    border-top: var(--ui-border-100) solid var(--ui-grey-200); scroll-margin-top: var(--ui-space-4); }
.legal-nav h2 { font-size: var(--t-h5); line-height: 1; }

/* Headings the content pages set below H4 sit on the typescale: H4 22/22, H5 16/16. */
.qa h3, .store-facts h3 { font-size: var(--t-h4); line-height: 1; letter-spacing: .25px; }
.item-list h3, .editorial-gap-head { font-size: var(--t-h5); line-height: 1; letter-spacing: .25px; }
/* Contact: a step's heading is H3, and the divider runs ABOVE it - a legend notches the fieldset's
   own border, so it floats out of the notch and the rule is a whole line (tertiary 1px). */
.contact-form fieldset.form-step > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--ui-space-4); }
.contact-form fieldset.form-step > legend + * { clear: both; }
.contact-form legend h2 { font-size: var(--t-h3); line-height: 1; }
.contact-form fieldset.form-step > .hint { margin-bottom: var(--ui-space-4); }
.page-body .prose-block > h2 { margin-bottom: var(--ui-space-3); }

/* === brand/rewards === */
/* Rewards pages, the crew scanner and the error pages on KFC's Digital Guidelines. */

/* The rewards shell is a column at least a screen tall, footer last: a short page ends on its
   footer, never on a band of empty canvas (or the tab bar's reserved space) below it. */
.rewards-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.rewards-shell > main { flex: 1 0 auto; }

/* The Stripes wall (storefront/partials/stripes-wall): the word repeated row under row in red
   Stripes on white, every other row offset. Hero on a phone, Hero-XL from 600, Hero-XXL from 1136
   (stated floor: Mega and Hero sizes only). Each row is its own [data-stripes] band. */
.brand-wall { position: relative; overflow: hidden; background: var(--ui-white); padding: var(--ui-space-4) 0 var(--ui-space-2); }
.brand-wall-row.stripes { margin: 0; padding-left: var(--ui-grid-margin); font-size: var(--t-hero); line-height: .9; }
@media (min-width: 600px) { .brand-wall-row.stripes { font-size: var(--t-hero-xl); } }
@media (min-width: 1136px) { .brand-wall-row.stripes { font-size: var(--t-hero-xxl); } }
.brand-wall-row:nth-child(even) .stripes-track { margin-left: -.9em; }
/* The sting (transition_2_red, once): the lettermark zooms through on white and uncovers the wall.
   The mark is never laid over the words (brand book p.126): it plays on its own white cover, which
   is gone by 3.2s whatever happens to the clip. Without motion (reduced, JS off) there is no cover. */
.brand-wall-sting { display: none; }
.motion-ok .brand-wall-sting { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
    background: var(--ui-white); pointer-events: none; animation: kfc-sting-out 1ms linear 3.2s forwards; }
.motion-ok .brand-wall-sting video, .motion-ok .brand-wall-sting img { width: auto; height: 100%; max-width: 100%; }
.motion-ok .brand-wall-sting .kfc-motion-still { display: none; }  /* transition_2 opens on an empty frame */
@keyframes kfc-sting-out { to { visibility: hidden; } }
.error-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.error-shell > main { flex: 1 0 auto; }
.rewards-wall + .page { padding-top: var(--ui-space-6); }

/* Coupon (mobile-offers-and-offer-detail): tag, the offer as H1, the QR as big as the column
   allows; side by side from 900px so the QR is on screen without a scroll. */
.coupon-grid { display: grid; gap: var(--w-gap-block); }
@media (min-width: 900px) { .coupon-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--ui-space-16); align-items: start; } }
.coupon-head { margin-bottom: 0; }
.coupon-head .offer-tags { margin: 0 0 var(--ui-space-3); }
.coupon-head .notice { margin-top: var(--w-gap-block); }
.coupon-title { overflow-wrap: anywhere; }
.coupon-scan { display: flex; flex-direction: column; align-items: center; text-align: center; }
.coupon-scan .coupon-qr { width: min(100%, 380px); margin: 0 0 var(--ui-space-4); }
.coupon-show { margin: 0 0 var(--ui-space-2); font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase;
    font-size: var(--t-h4); line-height: 1; letter-spacing: .25px; }
.coupon-redeem { margin-top: var(--w-gap-section); }
.coupon-redeem > p + p { margin-top: calc(-1 * var(--ui-space-3)); }
.tag-spent { border-color: var(--ui-grey-500); color: var(--ui-grey-500); }
.coupon-invalid .page-head, .coupon-invalid + * { max-width: 640px; }

/* The crew scanner: the site's fonts, colours and radius, built for a phone mid-shift. Every
   target at least 56px; the result is a full-width status band read at arm's length. */
.staff-page { padding-top: var(--ui-space-4); }
.staff-bar { display: grid; gap: var(--ui-space-3); margin: 0 0 var(--w-gap-block); padding-bottom: var(--ui-space-4);
    border-bottom: var(--ui-border-100) solid var(--ui-grey-200); }
.staff-bar .staff-shift { margin: 0; font-size: 16px; line-height: 24px; color: var(--ui-text); }
.staff-bar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ui-space-2); }
.staff-bar-actions:has(> :only-child) { grid-template-columns: 1fr; }
.staff-bar-actions form { margin: 0; }
.staff-bar-actions .btn { width: 100%; min-height: 56px; }
.staff-page .field input, .staff-page .field select { min-height: 56px; }
.staff-page .btn { min-height: 56px; }
.field input.staff-pin { font-size: 28px; letter-spacing: .3em; font-weight: 400; }

.scan-result { margin: 0 0 var(--w-gap-block); overflow: hidden; border: var(--ui-border-100) solid var(--ui-grey-200); border-radius: var(--ui-radius-100); background: var(--ui-white); }
.scan-state { display: flex; align-items: center; min-height: 128px; padding: var(--ui-space-6) var(--w-gap-inline); }
.scan-state h1 { margin: 0; color: inherit; font-size: clamp(40px, 10vw, 72px); line-height: 1; overflow-wrap: break-word; }
.scan-ok .scan-state { background: var(--ui-success-main); color: var(--ui-white); }
.scan-bad .scan-state { background: var(--ui-error-main); color: var(--ui-white); }
.scan-warn .scan-state { background: var(--ui-warning-main); color: var(--ui-black); }
.scan-member .scan-state { background: var(--ui-black); color: var(--ui-white); }
.scan-result .scan-state :focus-visible { outline-color: currentColor; }
.scan-body { padding: var(--w-gap-inline); }
.scan-body > :last-child, .scan-body form:last-child .btn { margin-bottom: 0; }
.scan-offer { margin: 0 0 var(--ui-space-3); font-family: var(--ui-font-heading); font-style: italic; font-weight: 900; text-transform: uppercase;
    font-size: var(--t-h3); line-height: 1; overflow-wrap: anywhere; }
.btn-redeem { min-height: 64px; margin-top: var(--ui-space-2); }
.member-coupons li:first-child { border-top: 0; padding-top: 0; }

.staff-history { list-style: none; margin: var(--w-gap-block) 0 0; padding: 0; border-top: var(--ui-border-300) solid var(--ui-black); }
.staff-history li { display: grid; grid-template-columns: 6ch minmax(0, 1fr); gap: var(--ui-space-3); align-items: baseline;
    padding: var(--ui-space-4) 0; border-bottom: var(--ui-border-100) solid var(--ui-grey-200); }
.staff-history-time { font-weight: 400; font-variant-numeric: tabular-nums; }
.staff-history-offer { font-weight: 400; }

/* Error pages: the code as a Stripes wall, then the Serif headline and one red button. */
.error-wall { padding-top: var(--ui-space-6); }

/* === brand/ordering === */
/* The ordering flow on KFC's functional patterns (ui-color-1: functional = white, black, ~1% red,
   red only on the CTA). Everything here is scoped to the cart, checkout, account, auth and /order
   templates; see docs/brand-conformance/ordering.md for the row-by-row reference. */

/* Basket lines (ui-border, tertiary divider example): the photo, the name, the price top right, a
   bare  - 1 +  and the line's links in black, underlined. No box round the stepper. */
.line .stepper { border: 0; margin-left: calc(-1 * var(--ui-space-3)); }
.line .stepper .qty { min-width: 24px; }
.line-actions form { margin: 0; display: inline-flex; }
.line-actions .link-button { color: var(--ui-black); padding: 0; }

/* Summaries are sections, not cards: KFC's primary divider (4px black) opens them, the same rule
   the lines open under. Radius 8 is for selectable cards and banners, which a summary is not. */
.summary { border: 0; border-top: var(--ui-border-400) solid var(--ui-black); border-radius: var(--ui-radius-none); padding: var(--ui-space-4) 0 0; }
details.summary { border-bottom: var(--ui-border-100) solid var(--ui-grey-200); padding-bottom: var(--ui-space-4); }
@media (min-width: 1136px) { details.summary { border-bottom: 0; padding-bottom: 0; } }
.summary .tax-note { margin: 0 0 var(--ui-space-4); }
.summary-edit { margin: var(--ui-space-2) 0 0; }

/* The pay bar: the PDP's black add bar (pdp-desktop) carrying the step that spends the money.
   The item count in white on the left; the red button with the amount on the left and the verb
   on the right, exactly as ADD is drawn. In the flow of the page, not sticky, except the cart's
   own phone bar (below). */
.pay-bar { position: static; margin: var(--ui-space-4) 0 0; }
.pay-bar-count { flex: none; padding: 0 var(--ui-space-2); font-size: 14px; line-height: 20px; font-weight: 400; color: var(--ui-white); white-space: nowrap; }
.pay-bar .add-bar-go { min-height: var(--tap); }
.pay-bar .add-bar-go .add-price { font-size: var(--ui-cta-size); }
/* The cart's phone bar: the same bar, riding the foot of the screen on a white strip above the tab
   bar, as the red cart bar does on the menu. */
.cart-bar-checkout { background: var(--ui-white); padding: var(--ui-space-2) var(--ui-grid-margin) calc(var(--ui-space-2) + env(safe-area-inset-bottom)); }
@media (max-width: 599px) { .cart-bar-checkout { padding-bottom: var(--ui-space-2); } }
.cart-bar-checkout .wrap { display: block; }
.cart-bar-checkout .pay-bar { margin: 0; }
.cart-bar-checkout .add-bar-go { min-height: var(--w-tap-inline); }

/* Card number and CVV are CyberSource iframes in a box: the same notched label as every field. */
body:not(.admin) .field:has(> label + .card-box) { position: relative; padding-top: var(--ui-space-2); }
body:not(.admin) .field:has(> label + .card-box) > label {
    position: absolute; top: 0; left: var(--ui-space-2); z-index: 1; margin: 0; padding: 0 var(--ui-space-1);
    background: var(--ui-white); font-size: 12px; line-height: 16px; color: var(--ui-grey-500); white-space: nowrap; }
.card-box:hover { border-color: var(--ui-black); }
.card-box.is-focused { border-color: var(--ui-black); outline: var(--ui-focus-width) solid var(--ui-focus); outline-offset: 2px; }
.card-box iframe { display: block; width: 100%; }

/* Checkout errors. KFC draws no payment-error pattern, so it is built from what it does state: a
   banner (radius 8) in the Error status set, Error Light behind Error Dark text (6.63:1), a 1px
   Error Main line, and Lucide circle-alert in black (functional icons are never red). The words
   are the server's own. */
.alert-error:not(:empty) {
    display: flex; gap: var(--ui-space-3); align-items: flex-start; margin: var(--ui-space-4) 0 0; padding: var(--ui-space-3) var(--ui-space-4);
    background: var(--ui-error-light); color: var(--ui-error-dark); border: var(--ui-border-100) solid var(--ui-error-main);
    border-radius: var(--ui-radius-100); font-size: 16px; line-height: 24px; font-weight: 400; }
.alert-error:not(:empty)::before {
    content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; background: var(--ui-black);   /* hairline: the 20px icon on the 24px first line */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' x2='12' y1='8' y2='12'/%3E%3Cline x1='12' x2='12.01' y1='16' y2='16'/%3E%3C/svg%3E") center / contain no-repeat; }
.alert-error[hidden] { display: none; }
.field-error { margin: var(--ui-space-1) 0 0; font-size: 14px; line-height: 20px; color: var(--ui-error-main); }

/* Waiting (card confirming, Pay.aw approval): KFC's red loader, cropped to the mark so the words sit
   under it rather than 150px below, and the words in Body 1. A fade only (kiosk note, ui-motion). */
.processing { display: flex; flex-direction: column; align-items: center; }
.processing .status-motion { width: 200px; max-width: 60%; height: 112px; overflow: hidden; }
.processing .status-motion > * { margin-top: -68px; }
.processing p { max-width: 36ch; font-weight: 400; }

/* 3DS challenge: KFC's dialog (ui-radius 05): radius 16, the title in H4 with a Lucide x top right.
   Below 600px it docks to the bottom with its top corners rounded only. The bank's page fills it. */
.challenge-box { display: flex; flex-direction: column; width: 440px; max-width: 100%; max-height: calc(100vh - 2 * var(--ui-space-6)); padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-6); }
.challenge-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-3); }
.challenge-head h2 { margin: var(--ui-space-2) 0 0; font-size: var(--t-h4); line-height: 1; }
.challenge-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: var(--w-tap-inline); height: var(--w-tap-inline);
    margin: 0 calc(-1 * var(--ui-space-2)) 0 0; border: 0; border-radius: var(--ui-radius-40); background: none; color: var(--ui-black); cursor: pointer; }
.challenge-box p { margin: var(--ui-space-2) 0 0; font-size: 14px; line-height: 20px; color: var(--ui-text-secondary); }
.challenge-box iframe { width: 100%; flex: 1 1 auto; height: 600px; max-height: 70vh; margin: var(--ui-space-4) 0 0; }
@media (max-width: 599px) {
    .challenge { align-items: flex-end !important; padding: 0; z-index: 70; }
    .challenge-box { width: 100%; max-height: 92vh; border-radius: var(--ui-radius-200) var(--ui-radius-200) 0 0;
        padding-bottom: calc(var(--ui-space-6) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) {
    .challenge[style*="flex"] .challenge-box { animation: kfc-dialog-in var(--ui-dur-sheet) var(--ui-ease-out) both; }
}
@keyframes kfc-dialog-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* The 3DS return page (inside the challenge iframe, for the moment before the dialog closes). */
.tds-return { min-height: 100vh; margin: 0; display: flex; align-items: center; justify-content: center; padding: var(--ui-space-6); text-align: center; }
.tds-return p { margin: 0; font-weight: 400; }

/* Checkout with JavaScript off: payment runs in the browser, so the page says so and hides the
   button that would only reload it. */
.nojs-notice { margin: 0 0 var(--ui-space-6); }
html:not(.js) #place-button { display: none !important; }   /* paying needs JavaScript; see checkout.blade.php */

/* Section dividers on the account page and between checkout steps: KFC's primary divider. */
.section-rule { border-top: var(--ui-border-400) solid var(--ui-black); margin: var(--w-gap-section) 0 var(--ui-space-4); }
.account-section-head { margin: 0 0 var(--ui-space-3); }
.account-rewards p { margin: 0 0 var(--ui-space-3); }
.account-rewards .member-qr { margin: 0 0 var(--ui-space-3); }
.account-add { margin: var(--w-gap-block) 0 var(--ui-space-4); font-size: var(--t-h4); line-height: 1; }
.account-foot .link-button { padding: 0; }
.account-empty { margin: 0 0 var(--ui-space-4); color: var(--ui-text-secondary); }
.pickup-where { margin: var(--ui-space-3) 0 0; }

/* KFC's secondary button (ui-radius 04: SCHEDULE FOR LATER): black fill, white label. */
.btn-black { background: var(--ui-black); color: var(--ui-white); font-size: 16px; }
.btn-black:focus-visible, .btn-black:active { background: var(--ui-grey-700); }
@media (hover: hover) { .btn-black:hover { background: var(--ui-grey-700); } }
.order-store-actions .btn { min-height: var(--w-tap-inline); }

/* Email-code login: the code field reads as six digits, not as a wide input with letter-spacing. */
.field input.code-input { font-family: var(--ui-font-body); font-size: 28px; line-height: 32px; letter-spacing: .3em; }
.auth-alt { margin: var(--ui-space-5) 0 0; }
/* A phone has no room for the count beside "Pay with your bank": the collapsed summary above says it. */
@media (max-width: 599px) { #checkout-form .pay-bar-count { display: none; } .pay-bar .add-bar-go { min-width: 0; gap: var(--ui-space-3); } }
@media (max-width: 599px) { .pay-bar .add-bar-go { white-space: normal; } .pay-bar .add-bar-go .add-price { white-space: nowrap; } .pay-bar .add-bar-go > span:last-child { text-align: right; } }
#method-card > .hint { margin-top: var(--ui-space-3); }
/* Disabled on the black bar (a payment in flight): Grey 700 with a Grey 300 label, not a light block. */
.pay-bar .btn.btn[disabled], .pay-bar .btn.btn[aria-disabled="true"] { background: var(--ui-grey-700); color: var(--ui-grey-300); }
/* Focused error (ui-border, stated): the line, the label and the words in Error Main, one boundary.
   (Specific enough to beat the notched-label rule's :not() chain, which kept the label grey.) */
body:not(.admin) .field:has(> label + :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea)[aria-invalid="true"]) > label { color: var(--ui-error-main); }
.field [aria-invalid="true"]:focus { border-color: var(--ui-error-main); outline-color: var(--ui-error-main); outline-offset: 0; }
.account-rewards .link-button { padding: 0; }
/* "Find your KFC": each restaurant's name is a row title (H4, 22px), so all four sit on one line
   at 1440 and the addresses, phones and status line up across the row. */
.restaurant-list h3 { font-size: var(--t-h4); line-height: 1; }

/* One checkout bar at a time. Below 1136px the sticky bar is the cart's checkout and the copy at
   the foot of the summary is hidden; at 1136px and up the sticky bar is hidden (above) and the
   summary's own bar is the one. A short cart on a phone showed both, one above the other. */
@media (max-width: 1135px) { .cart-summary > .pay-bar { display: none; } }

/* QA E10: the add confirmation on the button the sheet was opened from (menu.js confirmAdded). It
   covers the button's own face, the same size and type, so nothing moves; black on the red CTA
   would fail, so it is the CTA's pressed red with the white label and a check. */
.has-added-flag { position: relative; }
.added-flag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--ui-space-1);
    background: var(--ui-cta-bg-pressed); color: var(--ui-white); border-radius: inherit; pointer-events: none; }
.added-flag::before { content: ""; width: 14px; height: 8px; border: solid currentColor; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
@keyframes kfc-added { 0% { opacity: 0; } 12%, 85% { opacity: 1; } 100% { opacity: 0; } }
.motion-ok .added-flag { animation: kfc-added 2000ms var(--ui-ease-standard) both; }

/* window.kfcConfirm (nav-menu.js): the site's confirmation dialog, replacing confirm(). White
   sheet, black 4px top rule, Serif title, the primary action first. */
.kfc-dialog { border: 0; border-top: var(--ui-border-400) solid var(--ui-black); border-radius: var(--ui-radius-none);
    padding: var(--w-gap-block); width: min(440px, calc(100vw - 2 * var(--ui-grid-margin))); background: var(--ui-white); color: var(--ui-black); }
.kfc-dialog::backdrop { background: var(--ui-scrim); }
.kfc-dialog-title { font-size: var(--t-h4); margin: 0 0 var(--ui-space-3); }
.kfc-dialog-text { margin: 0 0 var(--w-gap-block); }
.kfc-dialog-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-3); }
.kfc-dialog-actions .btn { min-height: 44px; }

/* QA: tap targets under 44px on a phone, fixed in the shared components rather than page by page.
   Stacked links (footer lists, restaurant names and numbers, related links, the heading links of
   the restaurant lists) get a 44px row; a checkbox's whole label is its target and gets the same.
   Links inside running text are exempt (WCAG 2.5.8 inline exception). */
@media (max-width: 599px) {
    .footer-links a, .footer-stores a, .footer-social a, .landing-related a, .page-aside-stores a,
    .restaurant-list h3 a, .store-facts h3 a, .location-head h2 a {
        display: inline-flex; align-items: center; min-height: 44px; }
    .field.check label { min-height: 44px; }
}

/* Polish (QA re-crawl): the careers CTA ran straight into the next heading. */
.apply > p:has(> .btn) { margin-bottom: var(--w-gap-section); }
/* Polish: Pickup and Delivery sat edge to edge. */
.order-store-actions form { display: inline-flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.stripes-row { will-change: transform; }