/* Screenshot-led visual system. Business rules and native forms remain server-side. */
:root { --radius-card: 14px; --radius-button: 12px; }
:focus-visible { outline-color: #B45B00; }
.button { background: var(--color-yellow); color: #211B1C; border-color: transparent; }
.button:hover { background: #F4C524; }
.button:active { background: #E8B91B; }
.button.secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.site-header { background: #4A101D; color: #FFF7ED; border-color: #6D303D; }
.header-inner { min-height: 92px; }
.brand img { width: 48px; height: 48px; }
.brand small,.site-header .address-link small { color: #E2C9CA; }
.site-header .address-link > .icon:first-child { color: #FFD43B; }
.site-header .account-link { color: #FFF7ED; }
.site-header .button.text { color: #E2C9CA; }
.site-header .button.secondary { border-color: #915560; background: transparent; color: #FFF7ED; }
.cart-count { background: #FF9A35; color: #211B1C; border-radius: 50%; }
.cart-link { background: transparent; color: #FFF7ED; padding-inline: 10px; }
.cart-link:hover { background: #701626; }
.customer-nav { margin-bottom: 24px; min-height: 58px; }
.customer-nav a[aria-current] { color: #701626; border-color: #FF9A35; }
.food-hero { position: relative; min-height: 464px; overflow: hidden; border-radius: 16px; background: #4A101D url('food/hero.webp') center 57% / cover no-repeat; color: #FFF7ED; display: flex; align-items: center; }
.food-hero-copy { padding: 52px 48px; position: relative; z-index: 1; }
.food-hero h1 { font-size: clamp(44px,5.2vw,76px); line-height: 1.04; letter-spacing: -2.5px; margin: 20px 0 24px; font-weight: 800; }
.food-hero h1 em { color: #FFD43B; font-style: normal; }
.food-hero-copy > p:not(.hero-location) { font-size: 18px; line-height: 1.5; }
.hero-location { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #EEDADD; }
.hero-location .icon { color: #FFD43B; width: 16px; height: 16px; flex-basis: 16px; }
.hero-cta { margin-top: 28px; border-radius: 32px; min-width: 208px; min-height: 50px; }
.hero-payment { display: block; font-size: 11px; color: #EEDADD; margin-top: 12px; }
.food-categories { display: flex; gap: 28px; padding: 0 0 12px; overflow-x: auto; }
.food-categories > a { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 76px; font-size: 12px; padding: 3px; border-bottom: 2px solid transparent; flex-shrink: 0; }
.food-categories > a[aria-current] { border-color: #FF9A35; font-weight: 700; }
.category-picture { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background-color: #F4E4E2; }
.food-photo { display: block; aspect-ratio: 3/2; background-image: url('food/catalog-atlas.webp'); background-size: 200% 200%; background-repeat: no-repeat; background-color: #F5E8DC; }
.food-burger { background-position: left top; }.food-fries { background-position: right top; }.food-nuggets { background-position: left bottom; }.food-cola { background-position: right bottom; }
.food-categories .category-picture.food-photo { aspect-ratio: 3/2; width: 78px; height: 52px; border-radius: 16px; margin-block: 6px; }
.popular-section { margin-top: 28px; }
.menu-more { display: inline-flex; gap: 8px; align-items: center; color: #701626; font-size: 13px; min-height: 44px; }
.product-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.product-card { border: 0; border-radius: 12px; background: transparent; }
.product-image-link { overflow: hidden; border-radius: 12px; }
.product-image-link .food-photo { transition: transform .2s ease; }
.product-image-link:hover .food-photo { transform: scale(1.025); }
.product-body { padding: 14px 0 10px; }
.product-body .eyebrow { display: none; }
.product-card h3 { font-size: 16px; }
.product-description { font-size: 12px; margin-top: 6px; min-height: 38px; }
.product-bottom { margin-top: 14px; gap: 8px; }
.product-bottom .price { color: var(--color-text); font-size: 18px; }
.product-bottom .button { background: #FFD43B; color: #211B1C; border: 0; min-width: 44px; min-height: 44px; padding: 10px; font-size: 12px; }
.add-button span { display: none; }
.restaurant-cover { min-height: 180px; background: #4A101D; display: flex; align-items: center; justify-content: center; gap: 20px; color: #FFF7ED; padding: 36px 20px; }
.restaurant-cover span { font-size: 24px; font-weight: 700; max-width: 210px; line-height: 1.2; }
.brand-promise { border-block: 1px solid var(--color-border); padding: 30px 0; margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-promise > p { font-size: 20px; line-height: 1.4; }
.brand-promise > div { display: flex; gap: 12px; align-items: center; font-size: 12px; }
.site-footer { padding-bottom: 32px; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.mobile-dock { display: none; }
.product-detail-visual .food-photo { aspect-ratio: 3/2; }
.home-page .catalog-search { margin-top: 30px; }
@media (max-width: 1024px) { .food-hero { min-height: 400px; } .food-hero-copy { padding: 36px 32px; } .product-grid { gap: 18px; } .brand-promise { flex-wrap: wrap; } }
@media (min-width: 769px) { .home-page .customer-nav { margin-bottom: 0; background: #4A101D; color: #FFF7ED; border-color: #6D303D; padding-inline: 28px; } .home-page .customer-nav a[aria-current] { color: #FFD43B; } .home-page .customer-nav > span { color: #E2C9CA; } .home-page .food-hero { border-radius: 0 0 16px 16px; } }
@media (max-width: 768px) {
  .storefront { --color-background: #240D15; --color-surface: #38212A; --color-surface-muted: #4B2934; --color-text: #FFF7ED; --color-text-secondary: #CDBBC2; --color-border: #5E3A47; background: #240D15; color: #FFF7ED; padding-bottom: 82px; }
  .storefront .site-header { background: #4A101D; border-color: #63303E; }
  .storefront .header-inner { padding: 14px 20px; min-height: 78px; flex-wrap: nowrap; gap: 12px; }
  .storefront .brand { gap: 8px; }.storefront .brand > span { font-size: 27px; }.storefront .brand small { display: none; }.storefront .brand img { width: 36px; height: 36px; }
  .storefront .address-link { display: none; }
  .storefront .header-actions { gap: 6px; }.storefront .header-actions .account-link span { display: none; }.storefront .header-actions form { display: none; }.storefront .header-actions .cart-link > span:not(.cart-count) { display: none; }.storefront .cart-link { min-height: 44px; padding: 8px; }
  .storefront .header-actions .button.secondary { min-height: 44px; padding-inline: 10px; font-size: 12px; }
  .storefront .app-shell { padding-inline: 20px; }.storefront .customer-nav { display: none; }
  .storefront main { padding-top: 24px; }
  .storefront .food-hero { min-height: 310px; background-position: 57% center; border-radius: 14px; margin-bottom: 24px; }
  .storefront .food-hero-copy { padding: 26px 24px; }
  .storefront .food-hero h1 { font-size: 46px; letter-spacing: -1.6px; margin: 14px 0; }
  .storefront .food-hero-copy > p:not(.hero-location) { font-size: 14px; max-width: 220px; }
  .storefront .hero-location { font-size: 10px; max-width: 200px; }
  .storefront .hero-cta { min-width: 170px; min-height: 46px; margin-top: 20px; padding-inline: 15px; }
  .storefront .food-categories { gap: 12px; margin-inline: -4px; }
  .storefront .catalog-search { margin-top: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px; }.storefront .catalog-search .city-picker { grid-column: 1 / -1; background: transparent; border: 0; padding: 0; min-height: 36px; width: 100%; }.storefront .city-picker select { color: #FFF7ED; width: 100%; }.storefront .city-picker .icon { color: #FFD43B; }.storefront .city-picker option { background: #38212A; }
  .storefront input,.storefront select,.storefront textarea { color: #FFF7ED; }.storefront input::placeholder { color: #CDBBC2; }.storefront .search-input { color: #CDBBC2; }
  .storefront .eyebrow { color: #FFB865; }.storefront .menu-more,.storefront .back-link { color: #FFD43B; }
  .storefront .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 16px; }.storefront .product-bottom { flex-wrap: wrap; }.storefront .product-bottom .button.secondary { color: #211B1C; }
  .storefront .category-tabs a[aria-current] { background: #FFD43B; color: #211B1C; border-color: #FFD43B; }
  .storefront .button.text { color: #E6CFD2; }
  .storefront .brand-promise { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.storefront .brand-promise > p { grid-column: 1 / -1; }.storefront .brand-promise > div { font-size: 11px; }
  .storefront .site-footer { margin-inline: 20px; }.storefront .site-footer > a:last-child { color: #FFD43B; }
  .mobile-dock { display: grid; grid-template-columns: repeat(4,1fr); position: fixed; bottom: 0; inset-inline: 0; z-index: 20; padding: 8px 12px max(8px,env(safe-area-inset-bottom)); background: #210A12; border-top: 1px solid #5E3A47; }
  .mobile-dock a { min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 10px; color: #CDBBC2; }.mobile-dock a[aria-current] { color: #FFD43B; }
  .storefront .notice-error { color: #FFD1D7; background: #551B2A; }.storefront .notice-warning { color: #FFE6AF; background: #45311B; }.storefront .notice-success { color: #CEF0D8; background: #1D3D2A; }
  .storefront .product-detail-price .price { color: #FFF7ED; }.storefront .auth-story h1 { color: #FFF7ED; }
}
@media (max-width: 480px) {
 .storefront .app-shell { padding-inline: 16px; }.storefront .header-inner { padding-inline: 16px; }
 .storefront .food-hero { min-height: 270px; background-size: auto 100%; background-position: 52% center; }
 .storefront .food-hero-copy { padding: 22px 18px; background: linear-gradient(90deg,rgba(38,8,17,.78),rgba(38,8,17,.25) 75%,transparent); width: 100%; }
 .storefront .food-hero h1 { font-size: 35px; margin-top: 12px; }.storefront .food-hero-copy > p:not(.hero-location) { font-size: 12px; }.storefront .hero-cta { min-width: 150px; font-size: 12px; margin-top: 17px; min-height: 44px; }.storefront .hero-payment { font-size: 10px; }
 .storefront .popular-section .product-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
 .storefront .popular-section .product-card { display: grid; grid-template-columns: 110px 1fr; gap: 14px; align-items: center; background: #38212A; padding: 12px; border-radius: 14px; }
 .storefront .popular-section .product-image-link { border-radius: 10px; }.storefront .popular-section .food-photo { aspect-ratio: 3/2; }
 .storefront .popular-section .product-body { padding: 0; }.storefront .popular-section .product-card h3 { font-size: 14px; }.storefront .popular-section .product-description { font-size: 11px; min-height: 0; margin-top: 4px; line-height: 1.4; }
 .storefront .popular-section .product-bottom { margin-top: 9px; flex-wrap: nowrap; }.storefront .popular-section .product-bottom .price { font-size: 16px; }.storefront .popular-section .product-bottom .button { padding: 8px; font-size: 10px; }.storefront .popular-section .product-bottom .button.secondary:not(.add-button) { max-width: 82px; }
 .storefront h2 { font-size: 21px; }.storefront .food-categories { gap: 6px; }.storefront .food-categories > a { min-width: 68px; font-size: 10px; }.storefront .food-categories .category-picture.food-photo { width: 66px; height: 44px; }
 .storefront .brand-promise { margin-top: 24px; }.storefront .page-heading h1 { font-size: 28px; }
}
@media(prefers-reduced-motion:reduce) { .product-image-link .food-photo { transition: none; } }
/* Desktop follows the reference's single header; phone opens directly into the food feed. */
.header-links { display: flex; align-items: center; gap: 24px; font-size: 12px; }
.header-links a { display: grid; align-items: center; min-height: 44px; }
.home-page .food-hero { background-image: linear-gradient(90deg,#4A101D 18%,rgba(74,16,29,0) 68%),url('food/hero.webp'); background-size: 100% 100%,auto 100%; background-position: center,right center; background-repeat: no-repeat; }
@media(min-width:769px) { .home-page .customer-nav { display: none; } .home-page main { padding-top: 24px; } .home-page .food-hero { border-radius: 14px; min-height: 420px; } .home-page .food-hero-copy { padding-block: 36px; } }
@media(max-width:1100px) { .header-links { display: none; } }
@media(max-width:480px) { .storefront .food-hero { display: none; } .storefront.home-page main { padding-top: 10px; } .storefront.home-page .catalog-search { gap: 8px; margin-bottom: 16px; } .storefront .popular-section { margin-top: 20px; } .storefront .food-categories { padding-bottom: 6px; } }
.product-bottom form { flex: 0 0 auto; }
.product-bottom .add-button { width: 44px; }
.food-categories { scrollbar-width: none; }.food-categories::-webkit-scrollbar { display: none; }
@media(max-width:768px) { .storefront .all-food { background-color: #4B2934; color: #FFD43B; } }
@media(max-width:768px) { .storefront { --color-brand: #FFD43B; --color-brand-hover: #FFE16B; --color-brand-deep: #FF9A35; } }
.cart-item .food-photo { width: 104px; aspect-ratio: 3/2; border-radius: 10px; flex-shrink: 0; }
@media(max-width:600px) { .cart-item .food-photo { width: 72px; } }
.product-bottom form { width: auto; }
.product-bottom .add-button { color: #211B1C !important; }
@media(max-width:768px) { .storefront .availability { color: #8BD9A7; }.storefront .availability.closed { color: #FFD690; } }
@media(max-width:768px) { .storefront { --color-success:#8BD9A7; --color-warning:#FFD690; --color-danger:#FFADB7; }.storefront .order-steps .current .step-marker { color: #211B1C; } }
@media(min-width:481px) { .home-page .food-hero { background: #4A101D; }.home-page .food-hero::before { content:''; position:absolute; inset:0; background: url('food/hero.webp') right center / auto 100% no-repeat; mask-image:linear-gradient(90deg,transparent 40%,#000 63%); } }
/* Gradient palette from the approved brand reference: exact base swatches in tokens.css. */
.site-header { background: var(--gradient-brand); }
.button:not(.secondary):not(.text):not(.cart-link):not(:disabled),
.product-bottom .button:not(:disabled) { background: var(--gradient-yellow); color: #211B1C; }
.button:not(.secondary):not(.text):not(.cart-link):not(:disabled):hover,
.product-bottom .button:not(:disabled):hover { background: linear-gradient(110deg,#FFD43B,#FFE16B 65%,#FFD43B); }
.site-header .cart-link { background: transparent; }
.cart-count { background: var(--gradient-warm); }
.home-page .food-hero { background: var(--gradient-brand); }
.restaurant-cover { background: var(--gradient-brand); }
@media(min-width:481px) {
  .home-page .food-hero::before {
    /* Fade inside the photograph itself, so its left edge is always transparent. */
    inset: 0 0 0 auto;
    width: auto;
    height: 100%;
    aspect-ratio: 3 / 2;
    max-width: 100%;
    background-image: url('food/hero-gradient.webp');
    background-position: right center;
    background-size: 100% 100%;
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.06) 10%, rgba(0,0,0,.28) 22%, rgba(0,0,0,.65) 34%, #000 48%);
  }
}
@media(max-width:768px) {
  .storefront { background: var(--gradient-app); background-attachment: fixed; }
  .storefront .site-header { background: var(--gradient-brand); }
  .storefront .mobile-dock { background: linear-gradient(120deg,#211B1C,#4A101D); }
  .storefront .all-food { background: linear-gradient(145deg,#701626,#4A101D); }
  .storefront .category-tabs a[aria-current] { background: var(--gradient-yellow); }
  .storefront .popular-section .product-card { background: linear-gradient(120deg,#38212A,#302027); }
}
/* The detailed chest needs more room than the previous speed mark. */
.brand img { width: 54px; height: 48px; object-fit: contain; }
.footer-brand img { content: url('brand/chest-pack/symbol-light.svg'); object-fit: contain; }
@media(max-width:768px) { .storefront .brand img { width: 42px; height: 40px; }.storefront .footer-brand img { content: url('brand/chest-pack/symbol-dark.svg'); } }