:root {
  --navy: #142f6e;
  --navy-dark: #0b1f4c;
  --red: #d91e36;
  --red-dark: #a90f27;
  --cream: #fff6e6;
  --cream-dark: #f2e3cb;
  --gold: #e0a436;
  --ink: #171a20;
  --muted: #666a73;
  --white: #fff;
  --line: #e8dfd2;
  --green: #15804a;
  --shadow: 0 24px 70px rgba(15, 27, 54, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: #f6f2ea; font-family: "DM Sans", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", system-ui, sans-serif; }
body.no-scroll { overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.page-shell { max-width: 1440px; margin: 0 auto; background: var(--cream); min-height: 100vh; overflow: visible; box-shadow: 0 0 80px rgba(10, 20, 40, .08); }

.topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 5vw, 76px); background: var(--cream); border-bottom: 1px solid rgba(20,47,110,.09); position: relative; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.brand span { display: flex; flex-direction: column; line-height: 1; }
.brand strong, .footer-brand strong { font: 700 25px/1 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.brand small { margin-top: 5px; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; color: var(--red); font-weight: 700; }
.topbar-track { color: var(--navy); font-size: 14px; font-weight: 700; border-bottom: 2px solid var(--red); padding: 8px 0; }
.topbar-actions { display: flex; align-items: center; gap: 20px; }
.profile-button { min-height: 46px; display: inline-flex; align-items: center; gap: 9px; padding: 5px 13px 5px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--navy-dark); background: white; cursor: pointer; font-size: 12px; font-weight: 800; }
.profile-button-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--navy); }
.profile-button-icon svg, .profile-hero-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.profile-button.has-profile .profile-button-icon { background: var(--green); }

.active-order-banner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 15px; padding: 16px clamp(20px, 5vw, 76px); color: var(--navy-dark); background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 8px 24px rgba(11,31,76,.07); }
.active-order-banner[hidden] { display: none; }
.active-order-banner strong, .active-order-banner small { display: block; }
.active-order-banner small { margin-top: 3px; color: var(--muted); }
.active-order-banner .button { min-height: 42px; padding-inline: 18px; }
.active-order-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-weight: 900; }
#forget-active-order { padding: 8px 0; border: 0; border-bottom: 1px solid currentColor; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; }

.hero { min-height: 560px; position: relative; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; padding: 70px clamp(24px, 7vw, 105px); background: var(--navy); color: white; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 560px; height: 560px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); right: 5%; top: 50%; transform: translateY(-50%); }
.hero-copy { position: relative; z-index: 2; max-width: 700px; }
.eyebrow { margin: 0 0 13px; text-transform: uppercase; letter-spacing: .18em; font-weight: 800; font-size: 12px; color: #f4c35c; }
.eyebrow.red { color: var(--red); }
h1, h2 { font-family: "Oswald", sans-serif; text-transform: uppercase; margin: 0; line-height: .98; }
h1 { font-size: clamp(52px, 7.2vw, 104px); letter-spacing: -.035em; }
h1 em { font-style: normal; color: #f4c35c; }
.hero-text { max-width: 570px; color: rgba(255,255,255,.77); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65; margin: 28px 0 32px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; border-radius: 6px; border: 0; cursor: pointer; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: var(--red); box-shadow: 0 10px 24px rgba(217,30,54,.26); }
.button-primary:hover { background: var(--red-dark); }
.button-ghost { color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.24); }
.button-outline { color: var(--navy); border: 1px solid var(--navy); background: transparent; }
.button-full { width: 100%; }
.button:disabled { cursor: wait; opacity: .65; transform: none; }
.small-link { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 5px 7px; border: 0; border-radius: 6px; color: var(--navy); background: transparent; cursor: pointer; font-size: 11px; font-weight: 800; }
.small-link:hover { color: var(--red); background: rgba(20,47,110,.05); }
.hero-art { position: relative; z-index: 2; display: grid; place-items: center; min-height: 370px; }
.hero-roundel { width: clamp(260px, 29vw, 410px); aspect-ratio: 1; border-radius: 50%; padding: 14px; background: white; transform: rotate(3deg); box-shadow: 0 30px 80px rgba(0,0,0,.28); }
.hero-roundel img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.stamp { position: absolute; right: 1%; bottom: 0; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: var(--red); color: white; border: 5px solid var(--navy); outline: 2px dashed rgba(255,255,255,.8); outline-offset: -10px; font: 700 13px/1.25 "Oswald"; text-transform: uppercase; transform: rotate(8deg); }
.hero-stripes { position: absolute; inset: auto -80px -85px auto; width: 430px; height: 150px; transform: rotate(-22deg); background: linear-gradient(to bottom, var(--red) 0 24%, white 24% 40%, var(--navy) 40% 63%, white 63% 76%, var(--red) 76%); opacity: .8; }

.store-strip { display: grid; grid-template-columns: repeat(3, 1fr); background: white; border-bottom: 1px solid var(--line); }
.store-strip > div { min-height: 104px; display: flex; gap: 14px; align-items: center; justify-content: center; padding: 20px 28px; border-right: 1px solid var(--line); }
.store-strip > div:last-child { border: 0; }
.store-strip strong, .store-strip small { display: block; }
.store-strip strong { font-size: 14px; }
.store-strip small { color: var(--muted); margin-top: 3px; font-size: 12px; }
.store-feature > span { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--red); font-weight: 800; }
.status-dot { width: 12px; height: 12px; position: relative; flex: 0 0 auto; border-radius: 50%; background: #aaa; box-shadow: 0 0 0 7px rgba(120,120,120,.1); }
.status-dot::after { content: ""; position: absolute; inset: -1px; border: 2px solid currentColor; border-radius: 50%; opacity: 0; animation: status-pulse 1.8s ease-out infinite; }
.status-dot.open { background: var(--green); box-shadow: 0 0 0 7px rgba(21,128,74,.12); }
.status-dot.closed { background: var(--red); box-shadow: 0 0 0 7px rgba(217,30,54,.1); }
.status-dot.open { color: var(--green); }
.status-dot.closed { color: var(--red); }
@keyframes status-pulse { 0% { transform: scale(.8); opacity: .7; } 75%, 100% { transform: scale(2.5); opacity: 0; } }

.menu-section { padding: 84px clamp(18px, 6vw, 86px) 100px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.section-heading h2, .promise-section h2 { font-size: clamp(38px, 5vw, 68px); color: var(--navy-dark); }
.search-box { min-width: min(360px, 100%); height: 50px; display: flex; align-items: center; gap: 10px; padding: 0 17px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.search-box span { font-size: 24px; color: var(--red); }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); }
.category-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; margin-top: 20px; scrollbar-width: none; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; position: sticky; top: 0; z-index: 38; background: rgba(255,246,230,.96); border-block: 1px solid rgba(232,223,210,.9); box-shadow: 0 8px 20px rgba(11,31,76,.07); backdrop-filter: blur(12px); }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tab { flex: 0 0 auto; height: 43px; padding: 0 17px; scroll-snap-align: center; border-radius: 999px; border: 1px solid var(--line); background: white; color: var(--navy-dark); font-weight: 700; cursor: pointer; }
.category-tab.active { background: var(--navy); border-color: var(--navy); color: white; }
.menu-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 32px 0 20px; }
.menu-title h3 { margin: 0; font: 700 clamp(26px, 3vw, 38px)/1 "Oswald"; text-transform: uppercase; color: var(--navy-dark); }
.menu-title span { color: var(--muted); font-size: 13px; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.product-card { min-height: 220px; display: flex; flex-direction: column; position: relative; padding: 25px; border-radius: 9px; background: #fffdf9; border: 1px solid var(--line); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(20,47,110,.09); border-color: rgba(20,47,110,.28); }
.product-card::after { content: ""; position: absolute; right: -34px; top: -42px; width: 110px; height: 110px; border-radius: 50%; background: rgba(20,47,110,.045); }
.product-card.featured { background: var(--navy); border-color: var(--navy); color: white; }
.product-card.featured::after { background: rgba(255,255,255,.07); }
.product-image { aspect-ratio: 4 / 3; flex: 0 0 auto; margin: -25px -25px 18px; overflow: hidden; background: #eee8dc; }
.product-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
.product-image.image-contain img { object-fit: contain; }
.product-card:hover .product-image img { transform: scale(1.025); }
.product-card .product-kicker { color: var(--red); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; min-height: 16px; }
.product-card.featured .product-kicker { color: #f4c35c; }
.product-card h3 { margin: 7px 0 9px; font: 700 23px/1.12 "Oswald"; text-transform: uppercase; color: var(--navy-dark); }
.product-card.featured h3 { color: white; }
.product-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.product-card.featured p { color: rgba(255,255,255,.68); }
.product-bottom { margin-top: auto; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-price { font: 700 22px/1 "Oswald"; color: var(--navy-dark); }
.product-card.featured .product-price { color: white; }
.add-button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--red); color: white; font-size: 26px; line-height: 1; cursor: pointer; box-shadow: 0 8px 18px rgba(217,30,54,.2); transition: transform .15s ease; }
.add-button:hover { transform: scale(1.08); }
.add-button:disabled { background: #aaa; cursor: not-allowed; box-shadow: none; }
.menu-loading, .empty-search { padding: 70px 20px; text-align: center; color: var(--muted); }

.promise-section { background: var(--red); color: white; padding: 80px clamp(24px, 7vw, 100px); display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
.promise-section .eyebrow { color: #ffd875; }
.promise-section h2 { color: white; }
.promise-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.promise-steps li { min-height: 190px; padding: 24px; border-left: 1px solid rgba(255,255,255,.24); display: flex; flex-direction: column; }
.promise-steps span { font: 700 30px/1 "Oswald"; color: #ffd875; }
.promise-steps strong { margin-top: auto; font-size: 14px; }
.promise-steps small { color: rgba(255,255,255,.7); line-height: 1.45; margin-top: 7px; }

footer { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 50px; padding: 60px clamp(24px, 7vw, 100px) 45px; background: var(--navy-dark); color: white; position: relative; }
footer > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
footer > div > strong { font-size: 12px; color: #f4c35c; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
footer a, footer span { color: rgba(255,255,255,.68); font-size: 13px; }
footer a:hover { color: white; }
.footer-data-button { padding: 0; border: 0; color: rgba(255,255,255,.68); background: transparent; cursor: pointer; font-size: 13px; text-align: left; }
.footer-data-button:hover { color: white; }
.footer-brand { flex-direction: row; align-items: center; gap: 14px; }
.footer-brand img { width: 68px; height: 68px; object-fit: cover; border-radius: 50%; }
.footer-brand div { display: flex; flex-direction: column; gap: 5px; }
.footer-brand span { text-transform: uppercase; letter-spacing: .2em; font-size: 9px; }
.footer-note { grid-column: 1 / -1; padding-top: 24px; margin: 14px 0 0; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.44); font-size: 12px; }

.cart-fab { position: fixed; z-index: 30; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(620px, calc(100% - 28px)); min-height: 66px; padding: 10px 15px; border: 0; border-radius: 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; color: white; background: var(--navy-dark); box-shadow: 0 16px 45px rgba(9,25,63,.35); cursor: pointer; text-align: left; }
.cart-fab[hidden] { display: none; }
.cart-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 9px; background: var(--red); }
.cart-fab strong, .cart-fab small { display: block; }
.cart-fab small { color: rgba(255,255,255,.6); margin-top: 2px; }
.cart-fab b { font: 700 20px "Oswald"; }
.backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(4,12,30,.58); backdrop-filter: blur(4px); }
.backdrop[hidden] { display: none; }
.cart-drawer { position: fixed; inset: 0 0 0 auto; z-index: 50; width: min(510px, 100%); display: grid; grid-template-rows: auto 1fr auto; background: var(--cream); transform: translateX(102%); transition: transform .26s ease; box-shadow: -20px 0 60px rgba(8,20,50,.2); }
.cart-drawer.open { transform: translateX(0); }
.drawer-header { min-height: 105px; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.drawer-header h2 { font-size: 38px; color: var(--navy-dark); }
.icon-button { width: 43px; height: 43px; border-radius: 50%; border: 1px solid var(--line); background: white; color: var(--navy); font-size: 28px; cursor: pointer; }
.cart-items { overflow-y: auto; padding: 12px 28px; }
.cart-empty { padding: 80px 20px; text-align: center; color: var(--muted); }
.cart-empty span { display: block; font-size: 42px; margin-bottom: 12px; }
.cart-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-item-top { display: grid; grid-template-columns: 1fr auto; gap: 12px; }
.cart-item h3 { margin: 0 0 5px; font-size: 15px; color: var(--navy-dark); }
.cart-item-price { font-weight: 800; }
.cart-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; }
.quantity-control { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; background: white; overflow: hidden; }
.quantity-control button { width: 34px; height: 32px; border: 0; background: white; color: var(--navy); font-size: 18px; cursor: pointer; }
.quantity-control span { min-width: 28px; text-align: center; font-size: 13px; font-weight: 800; }
.remove-item { border: 0; background: none; color: var(--red); font-size: 12px; font-weight: 700; cursor: pointer; }
.item-note { margin-top: 11px; width: 100%; min-height: 38px; padding: 9px 11px; border-radius: 6px; border: 1px solid var(--line); background: white; font-size: 12px; resize: vertical; }
.cart-footer { padding: 21px 28px max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: white; }
.subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.subtotal span { color: var(--muted); font-size: 13px; }
.subtotal strong { font: 700 27px "Oswald"; color: var(--navy-dark); }
.small-notice { margin: 0 0 16px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.cart-food-warning { margin: 0 0 12px; padding: 10px 12px; border-radius: 7px; color: #8e1727; background: #ffeaed; font-size: 11px; font-weight: 800; line-height: 1.4; }
.cart-item-details { display: grid; gap: 3px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.cart-item-details strong { color: var(--navy-dark); }

.modal { position: fixed; inset: 0; z-index: 60; padding: 24px; display: grid; place-items: center; background: rgba(4,12,30,.65); backdrop-filter: blur(5px); overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-card { width: min(670px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; background: var(--cream); border-radius: 12px; box-shadow: var(--shadow); }
.customization-card { height: min(760px, calc(100dvh - 48px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.customization-card .drawer-header { background: white; }
.customization-content { overflow-y: auto; padding: 24px 28px; }
.custom-product { display: grid; grid-template-columns: 105px 1fr; gap: 18px; align-items: center; padding-bottom: 22px; }
.custom-product img { width: 105px; height: 105px; display: block; object-fit: cover; border-radius: 10px; background: #eee8dc; }
.custom-product h3 { margin: 0 0 5px; color: var(--navy-dark); font-size: 20px; }
.custom-product p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.custom-section { padding: 20px 0; border-top: 1px solid var(--line); }
.custom-section-head { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 13px; }
.custom-section-head h4 { margin: 0; color: var(--navy-dark); font-size: 15px; }
.custom-section-head small { color: var(--muted); font-size: 10px; }
.custom-choice-grid { display: grid; gap: 9px; }
.custom-choice { display: flex; justify-content: space-between; align-items: center; gap: 15px; min-height: 55px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: white; }
.custom-choice > div:first-child { min-width: 0; }
.custom-choice strong, .custom-choice small { display: block; }
.custom-choice strong { color: var(--navy-dark); font-size: 12px; }
.custom-choice small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.custom-choice select, .custom-section > select, .custom-text-option, .custom-note { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: white; color: var(--ink); padding: 11px 12px; }
.custom-choice select { min-width: 180px; }
.custom-text-option { margin-top: 9px; }
.custom-note { min-height: 70px; resize: vertical; }
.customization-footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 18px 28px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: white; }
.customization-footer small, .customization-footer strong { display: block; }
.customization-footer small { color: var(--muted); font-size: 10px; }
.customization-footer strong { margin-top: 2px; color: var(--navy-dark); font: 700 25px "Oswald"; }
.customization-error { margin: 12px 0 0; color: var(--red); font-size: 11px; font-weight: 800; }
.checkout-card form { padding: 26px 28px 30px; }
.customer-identification { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.customer-identification > div, .customer-identification > .field { grid-column: 1; }
.customer-identification > div strong, .customer-identification > div small { display: block; }
.customer-identification > div strong { color: var(--navy-dark); }
.customer-identification > div small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.customer-identification > .button { grid-column: 2; grid-row: 2; }
.customer-identification[hidden], .checkout-profile-summary[hidden] { display: none; }
.checkout-profile-summary { min-height: 68px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 9px; background: white; }
.checkout-profile-summary strong, .checkout-profile-summary small { display: block; }
.checkout-profile-summary strong { color: var(--navy-dark); font-size: 13px; }
.checkout-profile-summary small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.customer-lookup-message { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 6px; color: #155a39; background: #edf7f1; font-size: 11px; font-weight: 700; }
.customer-lookup-message.new { color: #795313; background: #fff1d5; }
#customer-checkout-details[hidden] { display: none; }
#customer-checkout-details { margin-top: 20px; }
.fulfillment-choice { border: 0; padding: 0; margin: 0 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fulfillment-choice legend { width: 100%; margin-bottom: 9px; font-size: 12px; font-weight: 800; color: var(--navy-dark); }
.fulfillment-choice input { position: absolute; opacity: 0; }
.fulfillment-choice span { height: 46px; display: grid; place-items: center; border: 1px solid var(--line); background: white; border-radius: 7px; cursor: pointer; font-weight: 700; font-size: 13px; }
.fulfillment-choice input:checked + span { color: white; background: var(--navy); border-color: var(--navy); }
.form-grid, .delivery-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.delivery-fields { display: contents; }
.checkout-address-fields, .profile-address-form { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.checkout-address-fields[hidden] { display: none; }
.checkout-saved-addresses { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fbf8f2; }
.checkout-address-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.checkout-address-heading strong, .checkout-address-heading small { display: block; }
.checkout-address-heading strong { color: var(--navy-dark); font-size: 14px; }
.checkout-address-heading small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.checkout-address-heading > span { padding: 5px 8px; border-radius: 999px; color: var(--muted); background: white; font-size: 9px; font-weight: 800; white-space: nowrap; }
.checkout-address-options { display: grid; gap: 8px; }
.checkout-address-option { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 13px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: white; cursor: pointer; text-align: left; }
.checkout-address-option.selected { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(20,47,110,.08); }
.checkout-address-option b, .checkout-address-option strong, .checkout-address-option small { display: block; }
.checkout-address-option b { color: var(--red); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.checkout-address-option strong { margin-top: 3px; color: var(--navy-dark); font-size: 12px; }
.checkout-address-option small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.checkout-address-option i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: white; background: white; font-size: 11px; font-style: normal; font-weight: 900; }
.checkout-address-option.selected i { border-color: var(--green); background: var(--green); }
.address-pin { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--red); background: #ffeaed; font-size: 18px; font-weight: 900; }
.checkout-other-address { justify-self: start; }
.cep-action { align-self: end; }
.cep-action > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.cep-action .button { width: 100%; min-height: 46px; }
#delivery-fields[hidden] { display: none; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.address-field { grid-column: 1; }
.number-field { grid-column: 2; }
.field span { color: var(--navy-dark); font-size: 11px; font-weight: 800; }
.field input, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: white; padding: 12px 13px; outline: none; color: var(--ink); }
.field input:focus, .field textarea:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(20,47,110,.08); }
.field textarea { resize: vertical; }
.no-payment { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 20px 0; border-radius: 8px; background: #edf7f1; color: #155a39; }
.no-payment > span { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-weight: 800; }
.no-payment p { margin: 0; font-size: 12px; line-height: 1.45; }
.checkout-summary { display: grid; gap: 9px; padding: 18px 0; margin-top: 5px; border-bottom: 1px solid var(--line); }
.checkout-summary span { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.checkout-summary strong { color: var(--navy-dark); }
.checkout-summary .checkout-grand-total { padding-top: 10px; border-top: 1px solid var(--line); color: var(--navy-dark); font-weight: 800; }
.checkout-grand-total strong { font: 700 24px "Oswald"; }
.payment-choice { margin: 22px 0 0; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fbf8f2; }
.payment-choice legend { padding: 0 4px; color: var(--navy-dark); font-size: 14px; font-weight: 900; }
.payment-choice > p { margin: 0 0 13px; color: var(--muted); font-size: 10px; }
.payment-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.payment-options input, .change-options input { position: absolute; opacity: 0; pointer-events: none; }
.payment-options span { min-height: 68px; display: grid; place-items: center; align-content: center; gap: 5px; border: 1px solid var(--line); border-radius: 9px; color: var(--navy-dark); background: white; cursor: pointer; }
.payment-options b { min-width: 26px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--red); background: #ffeaed; font-size: 10px; }
.payment-options strong { font-size: 11px; }
.payment-options input:checked + span { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(20,47,110,.08); }
.payment-options input:checked + span b { color: white; background: var(--navy); }
.cash-change-fields { display: grid; gap: 12px; margin-top: 10px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.cash-change-fields[hidden], #change-for-field[hidden] { display: none; }
.cash-change-fields > strong { color: var(--navy-dark); font-size: 12px; }
.change-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.change-options span { min-height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--navy-dark); background: #fbf8f2; cursor: pointer; font-size: 11px; font-weight: 800; }
.change-options input:checked + span { border-color: var(--navy); color: white; background: var(--navy); }
.save-profile { display: flex; gap: 11px; align-items: flex-start; margin: 18px 0 0; cursor: pointer; }
.save-profile input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--navy); }
.save-profile span, .save-profile strong, .save-profile small { display: block; }
.save-profile strong { color: var(--navy-dark); font-size: 12px; }
.save-profile small { color: var(--muted); font-size: 10px; line-height: 1.4; margin-top: 3px; }
.form-error { color: var(--red); font-size: 12px; font-weight: 700; margin: 0 0 14px; }
.profile-card { width: min(720px, 100%); }
.profile-body { padding: 24px 28px 30px; }
.profile-guest { max-width: 460px; margin: 0 auto; text-align: center; }
.profile-hero-icon { width: 66px; height: 66px; display: grid; place-items: center; margin: 4px auto 16px; border-radius: 50%; color: white; background: var(--navy); }
.profile-hero-icon svg { width: 34px; height: 34px; }
.profile-hero-icon.small { width: 46px; height: 46px; margin: 0; background: var(--green); }
.profile-hero-icon.small svg { width: 24px; height: 24px; }
.profile-guest h3, .profile-section-head h3 { margin: 0; color: var(--navy-dark); font: 700 24px "Oswald"; text-transform: uppercase; }
.profile-guest > p { margin: 8px auto 20px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.profile-login-form { display: grid; gap: 13px; text-align: left; }
.profile-login-form .form-error { margin: 0; }
.profile-details-form { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.profile-identity-head { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.profile-identity-head strong, .profile-identity-head small { display: block; }
.profile-identity-head strong { color: var(--navy-dark); font-size: 14px; }
.profile-identity-head small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.profile-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.profile-details-form > .small-link { margin-top: 12px; }
.profile-last-order { display: grid; gap: 3px; margin-top: 14px; padding: 15px 17px; border-radius: 10px; color: white; background: var(--navy); }
.profile-last-order[hidden] { display: none; }
.profile-last-order span { color: #f4c35c; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.profile-last-order strong { font: 700 20px "Oswald"; }
.profile-last-order small { color: rgba(255,255,255,.72); font-size: 10px; }
.profile-address-section, .profile-address-editor { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.profile-section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.profile-section-head h3 { font-size: 21px; }
.profile-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.compact-profile-button { min-height: 40px; padding-inline: 14px; font-size: 10px; }
.profile-address-list { display: grid; gap: 9px; }
.profile-address-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.profile-address-card.selected { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(20,47,110,.07); }
.profile-address-select { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 4px; border: 0; color: var(--ink); background: transparent; cursor: pointer; text-align: left; }
.profile-address-select b, .profile-address-select strong, .profile-address-select small { display: block; }
.profile-address-select b { color: var(--red); font-size: 9px; text-transform: uppercase; }
.profile-address-select strong { margin-top: 3px; overflow: hidden; color: var(--navy-dark); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.profile-address-select small { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-address-select i { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: white; background: white; font-size: 11px; font-style: normal; font-weight: 900; }
.profile-address-card.selected .profile-address-select i { border-color: var(--green); background: var(--green); }
.profile-address-empty { padding: 25px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; }
.profile-address-empty span { color: var(--red); font-size: 25px; }
.profile-address-empty p { margin: 7px 0 0; font-size: 11px; }
.profile-forget { display: block; margin: 24px auto 0; padding: 7px 0; border: 0; border-bottom: 1px solid currentColor; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; }
.profile-address-editor[hidden], #profile-content[hidden], #profile-guest[hidden] { display: none; }
.profile-address-form .form-error { margin: 0; }
.success-card { padding: 46px; text-align: center; }
.success-mark { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 22px; border-radius: 50%; color: white; background: var(--green); font-size: 34px; box-shadow: 0 12px 30px rgba(21,128,74,.22); }
.success-card h2 { font-size: clamp(38px, 6vw, 56px); color: var(--navy-dark); }
.success-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.5; }
.order-code { display: block; margin: 20px 0; font: 700 24px "Oswald"; letter-spacing: .08em; color: var(--navy); }
.success-card .button + .button { margin-top: 10px; }
.toast { position: fixed; z-index: 90; top: 20px; left: 50%; transform: translate(-50%, -120px); padding: 13px 18px; border-radius: 8px; background: var(--navy-dark); color: white; box-shadow: var(--shadow); font-size: 13px; font-weight: 700; transition: transform .25s ease; }
.toast.show { transform: translate(-50%, 0); }
.storage-consent { position: fixed; z-index: 88; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); width: min(620px, calc(100% - 36px)); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px 15px; align-items: start; padding: 18px; border: 1px solid rgba(20,47,110,.15); border-radius: 14px; color: var(--ink); background: white; box-shadow: 0 22px 70px rgba(8,20,50,.25); }
.storage-consent[hidden] { display: none; }
.storage-consent-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); font-size: 21px; }
.storage-consent strong { display: block; color: var(--navy-dark); font-size: 14px; }
.storage-consent p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.storage-consent-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 9px; }
.storage-consent-actions .button { min-height: 42px; padding-inline: 16px; font-size: 11px; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr .7fr; padding-inline: 45px; }
  .hero-art { min-height: 320px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .promise-section { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  .topbar { height: 72px; padding-inline: 17px; }
  .topbar-actions { gap: 8px; }
  .brand img { width: 46px; height: 46px; }
  .brand strong { font-size: 21px; }
  .topbar-track { max-width: 78px; font-size: 10px; line-height: 1.15; text-align: center; }
  .profile-button { min-height: 42px; gap: 7px; padding: 4px 10px 4px 5px; }
  .profile-button-icon { width: 32px; height: 32px; }
  .profile-button-icon svg { width: 19px; height: 19px; }
  .active-order-banner { grid-template-columns: auto 1fr; padding: 14px 17px; }
  .active-order-banner .button { grid-column: 1 / -1; width: 100%; }
  #forget-active-order { grid-column: 1 / -1; justify-self: center; }
  .hero { min-height: 680px; grid-template-columns: 1fr; align-content: center; padding: 54px 22px 60px; }
  .hero-copy { text-align: center; }
  .hero-copy h1 { font-size: 48px; }
  .hero-copy h1 em { display: block; font-size: 42px; }
  .hero-text { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-art { min-height: 230px; margin-top: 35px; }
  .hero-roundel { width: 230px; }
  .stamp { width: 90px; height: 90px; right: 12%; font-size: 10px; }
  .store-strip { grid-template-columns: 1fr; }
  .store-strip > div { min-height: 82px; justify-content: flex-start; border-right: 0; border-bottom: 1px solid var(--line); padding-inline: 24px; }
  .menu-section { padding: 62px 18px 100px; }
  .section-heading { align-items: stretch; flex-direction: column; }
  .search-box { min-width: 0; }
  .category-tabs { margin-inline: -18px; padding: 10px 18px; scroll-padding-inline: 18px; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { min-height: 200px; }
  .promise-section { padding: 64px 22px; }
  .promise-steps { grid-template-columns: 1fr; }
  .promise-steps li { min-height: 125px; border-left: 0; border-top: 1px solid rgba(255,255,255,.24); }
  footer { grid-template-columns: 1fr; gap: 30px; padding: 48px 24px 110px; }
  .footer-note { grid-column: auto; }
  .form-grid, .delivery-fields, .checkout-address-fields, .profile-address-form, .profile-details-grid { grid-template-columns: 1fr; }
  .customer-identification { grid-template-columns: 1fr; }
  .customer-identification > div, .customer-identification > .field, .customer-identification > .button { grid-column: 1; grid-row: auto; }
  .customer-identification > .button { width: 100%; }
  .delivery-fields { display: contents; }
  .field, .address-field, .number-field, .field-wide { grid-column: 1; }
  .modal { padding: 0; align-items: end; }
  .modal-card { max-height: 94vh; max-height: 94dvh; border-radius: 14px 14px 0 0; }
  #customization-modal { padding: 8px 8px 0; }
  .customization-card { width: min(480px, 100%); height: min(88dvh, 720px); max-height: 88dvh; border-radius: 16px 16px 0 0; }
  .customization-card .drawer-header { min-height: 86px; padding: 15px 18px; }
  .customization-card .drawer-header h2 { font-size: 31px; }
  .customization-card .drawer-header .eyebrow { margin-bottom: 8px; }
  .checkout-card form, .profile-body { padding: 20px 18px max(24px, env(safe-area-inset-bottom)); }
  .checkout-profile-summary { grid-template-columns: auto minmax(0, 1fr) auto; padding-inline: 11px; }
  .checkout-saved-addresses { padding: 13px; }
  .checkout-address-option { padding: 11px 9px; }
  .profile-section-head { align-items: flex-start; }
  .profile-address-card { grid-template-columns: minmax(0, 1fr); padding: 7px 10px 10px 7px; }
  .profile-address-card > .small-link { justify-self: end; margin-right: 5px; }
  .customization-content { min-height: 0; overscroll-behavior: contain; padding: 14px 18px 20px; }
  .custom-product { grid-template-columns: 82px 1fr; }
  .custom-product img { width: 82px; height: 82px; }
  .custom-choice { align-items: flex-start; }
  .custom-choice select { min-width: 130px; max-width: 48vw; }
  .customization-footer { position: relative; z-index: 2; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); box-shadow: 0 -10px 24px rgba(11,31,76,.08); }
  .customization-footer strong { font-size: 21px; }
  .customization-footer .button { min-height: 48px; padding-inline: 17px; }
  .payment-options { grid-template-columns: 1fr 1fr; }
  .payment-options span { min-height: 60px; }
  .success-card { padding: 42px 24px; }
  .storage-consent { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100% - 20px); grid-template-columns: auto minmax(0, 1fr); padding: 15px; }
  .storage-consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .storage-consent-actions .button { padding-inline: 10px; }
}

@media (max-width: 420px) {
  .topbar { padding-inline: 12px; }
  .brand { gap: 8px; }
  .brand img { width: 42px; height: 42px; }
  .brand strong { font-size: 19px; }
  .brand small { display: none; }
  .topbar-track { max-width: 62px; font-size: 9px; }
  .profile-button { padding-right: 8px; }
  #profile-button-label { max-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .checkout-address-heading { align-items: flex-start; }
  .checkout-address-option { grid-template-columns: auto minmax(0, 1fr) 20px; gap: 8px; }
  .address-pin { width: 29px; height: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}