/* Public identity and private customer portals share the bakery's blue, with quieter surfaces. */
.site-body { --c-blue: #087ea4; --c-blue-dark: #066383; --c-bg: #faf9f6; --c-ink: #243530; --c-gray: #63716c; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
.site-skip { position: fixed; top: 10px; left: 10px; z-index: 100; transform: translateY(-200%); background: white; padding: 12px 20px; }
.site-skip:focus { transform: none; }
.site-header { max-width: 1328px; margin: auto; padding: 19px 40px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-bottom: 1px solid #e5e5de; }
.site-brand { display: flex; align-items: center; gap: 13px; color: #203e40; font-family: Georgia, serif; font-size: 21px; text-decoration: none; }
.site-brand img { object-fit: contain; border-radius: 50%; background: white; }
.site-body:has(#order) .site-brand img { border-radius: 10px; border: 1px solid #24a9e2; padding: 3px; }
.site-brand small { display: block; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size: 8px; letter-spacing: .15em; margin-top: 6px; }
.site-header nav { display: flex; gap: 28px; }
.site-header nav a { text-decoration: none; color: #52615b; font-size: 13px; }
.site-header nav a:hover { color: #087ea4; }
.site-phone { font-size: 13px; font-weight: 600; color: #22535e; text-decoration: none; }
.site-phone span { margin-left: 10px; }
.site-body .page { max-width: 1080px; margin: 0 auto; padding: 40px; }
.site-body .page.page-wide { max-width: 1328px; }
.site-body .page:has(> #order) { padding-top: 12px; }
.site-body .btn { background: #087ea4; border-radius: 7px; padding: 13px 20px; font-size: 13px; font-weight: 600; box-shadow: none; text-decoration: none; }
.site-body .btn:hover { background: #066383; }
.site-body :is(a,button,input,select,textarea):focus-visible { outline: 3px solid #0c89b5; outline-offset: 4px; }
.site-eyebrow { margin: 0 0 20px; font-size: 10px; font-weight: 600; letter-spacing: .15em; color: #486957; }
.bakery-hero { display: grid; grid-template-columns: 1.04fr 1fr; min-height: 550px; align-items: center; gap: 60px; margin: 3px 0 86px; }
.bakery-hero-copy { padding: 15px 0; }
.bakery-hero h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(42px, 4.5vw, 66px); line-height: 1.08; font-weight: 400; letter-spacing: -.045em; color: #183d3e; margin: 22px 0; }
.bakery-hero .lead { max-width: 425px; font-size: 16px; line-height: 1.8; color: #69766e; }
.bakery-hero .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin: 30px 0; }
.bakery-hero .hero-actions > a:last-child { font-size: 12px; text-decoration: none; color: #3e635d; }
.bakery-hero .btn span { margin-left: 15px; }
.hero-footnote { font-size: 10px; color: #5b7064; letter-spacing: .04em; }
.bakery-hero-photo { position: relative; height: 550px; border-radius: 130px 12px 12px 12px; overflow: hidden; background: #eee8dc; }
.bakery-hero-photo > img { width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.bakery-hero-photo > span { position: absolute; bottom: 24px; left: 24px; padding: 16px 23px; background: #fffffff0; border-radius: 7px; font-size: 9px; letter-spacing: .1em; color: #6a7d73; }
.bakery-hero-photo > span > span { display: block; font-family: Georgia,serif; font-size: 22px; letter-spacing: -.03em; color: #2c4641; margin-top: 5px; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 32px; }
.section-heading h2, .bakery-business h2, .bakery-contact h2 { font-family: Georgia,serif; font-weight: 400; font-size: clamp(29px,3vw,42px); letter-spacing: -.035em; line-height: 1.18; color: #254640; margin: 0; }
.section-heading .site-eyebrow { margin-bottom: 12px; }
.section-heading > a { font-size: 12px; color: #376356; text-decoration: none; white-space: nowrap; padding-bottom: 7px; }
.bakery-products { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; }
.bakery-product { text-decoration: none; color: inherit; }
.bakery-product > div { height: 280px; overflow: hidden; border-radius: 9px; background: #eee9df; }
.bakery-product img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bakery-product:hover img { transform: scale(1.025); }
.bakery-product h3 { font-size: 19px; font-family: Georgia,serif; font-weight: 400; color: #254640; margin: 18px 0 8px; }
.bakery-product h3 span { float: right; font-family: sans-serif; color: #718e7d; }
.bakery-product p { font-size: 12px; color: #5b7064; line-height: 1.7; margin: 0; }
.bakery-business { margin: 75px 0 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; background: #edf2eb; padding: 52px; border-radius: 10px; }
.bakery-business p:not(.site-eyebrow) { margin: 0 0 15px; font-size: 14px; color: #5b7264; line-height: 1.8; }
.bakery-business .btn { margin-top: 10px; }
.bakery-contact { padding: 25px 20px 50px; text-align: center; }
.bakery-contact > a { display: inline-block; margin: 23px 0 10px; font-size: 26px; font-family: Georgia,serif; color: #087797; text-decoration: none; }
.bakery-contact > p:last-child { font-size: 12px; color: #586f60; }
.bakery-contact > p:last-child a { color: inherit; }
.site-body .site-footer { background: #143f43; color: #cedbd8; border: 0; padding: 40px max(24px, calc((100vw - 1248px)/2)); font-size: 12px; }
.site-body .site-footer-main { gap: 40px; grid-template-columns: 1fr 2fr auto; }
.site-body .site-footer a { color: #e3ede8; text-decoration: none; }
.site-body .site-footer-brand img { width: 54px; height: 54px; padding: 4px; border-radius: 50%; background: white; }
.site-body .site-footer-brand { font-family: Georgia,serif; font-size: 19px; }
.site-body .site-footer-links { gap: 12px 23px; }
.site-body .site-footer-social { align-items: start; }
.site-body .site-footer-meta { border-top-color: #37605e; color: #c3d1c9; font-size: 10px; margin-top: 30px; }
.site-body .page-head { text-align: left; margin: 10px 0 35px; }
.site-body .page-head .head-logo { display: none; }
.site-body .page-head h1 { font-family: Georgia,serif; font-weight: 400; font-size: 43px; letter-spacing: -.035em; color: #254640; }
.site-body .page-head .lead { max-width: 640px; font-size: 16px; color: #5a7062; }
.site-body .card { border: 1px solid #e4e8e1; border-radius: 10px; box-shadow: none; }
.site-body .info-card h2, .site-body .info-prose h2 { color: #284f49; font-size: 20px; }
.site-body .info-card address { font-size: 16px; line-height: 1.9; color: #597167; }
.site-body .order-head { background: #fff; align-items: center; padding: 25px; }
.site-body .order-head h1 { font-size: 28px; font-weight: 650; letter-spacing: -.025em; }
.site-body .order-eyebrow { color: #357b92; font-size: 10px; letter-spacing: .09em; }
.site-body .order-when { font-size: 13px; line-height: 1.7; }
.site-body .order-when strong { color: #0c6885; }
.site-body .tabbar { border-bottom: 1px solid #d9e3dc; gap: 8px; overflow: visible; flex-wrap: wrap; }
.site-body .tab { border-radius: 7px 7px 0 0; padding: 12px 17px; font-size: 13px; }
.site-body .panel { background: transparent; padding: 0 0 24px; border: 0; }
.site-body #order > .order-head { padding: 12px; }
.site-body .order-row { border-color: #dfe6de; border-radius: 10px; background: white; box-shadow: none; }
.site-body .order-row.has-qty { border-color: #67a3b8; box-shadow: 0 0 0 1px #67a3b8; }
.site-body .order-row .row-name { font-size: 14px; line-height: 1.5; }
.site-body .row-price { color: #496b5a; }
.site-body .qty button { background: #f1f6f8; color: #0b6b88; border-color: #d4e3e9; }
.site-body .info-gear { background: #f0f6f8; color: #27657a; border-color: #d8e6eb; font-family: Georgia,serif; font-size: 22px; }
.admin-login-page { --c-blue: #087ea4; --c-blue-dark: #066383; background: #eff4f7; background-image: radial-gradient(ellipse at 15% 30%,#dfedf1,transparent 55%); min-height: 100dvh; }
.admin-login-page .admin-login { max-width: 460px; padding: 75px 20px 35px; margin: auto; }
.admin-login-page .admin-login-card { padding: 38px; border: 1px solid #dbe5eb; border-radius: 16px; box-shadow: 0 20px 60px #183c4e0a; }
.admin-login-page .admin-login-logo { width: 82px; height: 82px; margin: 0 0 24px; }
.admin-login-page h1 { text-align: left; font-size: 28px; letter-spacing: -.035em; margin: 0 0 10px; color: #213f51; }
.admin-login-page .site-eyebrow { font-size: 9px; margin-bottom: 12px; color: #477388; }
.login-intro { color: #556f7f; font-size: 13px; line-height: 1.7; margin-bottom: 28px; }
.admin-login-page .admin-field { font-size: 12px; color: #38576a; margin-bottom: 20px; }
.admin-login-page input { border-color: #cfdde5; padding: 12px 13px; border-radius: 7px; font-size: 14px; }
.admin-login-page .btn { width: 100%; padding: 13px; border-radius: 7px; font-size: 13px; }
.login-footer { display: flex; flex-direction: column; text-align: center; gap: 17px; font-size: 11px; color: #536f7e; padding: 0 20px 35px; }
.login-footer a { color: #48778e; text-decoration: none; }
@media(max-width:900px) { .site-header { padding: 16px 25px; } .site-body .page { padding: 30px 25px; } .bakery-hero { gap: 28px; min-height: 430px; } .bakery-hero-photo { height: 460px; border-top-left-radius: 85px; } .bakery-product > div { height: 230px; } .bakery-business { padding: 35px; gap: 30px; } .site-body .site-footer-main { grid-template-columns: 1fr 2fr; } .site-phone { display: none; } }
@media(max-width:640px) { .site-header { padding: 12px 18px; gap: 15px; flex-wrap: wrap; } .site-brand { font-size: 18px; } .site-brand img { width: 45px; height: 45px; } .site-brand small { font-size: 7px; } .site-header nav { gap: 17px; width: 100%; justify-content: center; border-top: 1px solid #e5e5de; padding-top: 11px; } .site-header nav a { font-size: 12px; } .site-body .page { padding: 25px 18px; } .bakery-hero { grid-template-columns: 1fr; gap: 20px; margin-bottom: 50px; } .bakery-hero h1 { font-size: 44px; margin: 18px 0; } .bakery-hero .lead { font-size: 14px; } .bakery-hero .hero-actions { margin: 23px 0; gap: 18px; } .bakery-hero .btn { padding: 12px 16px; font-size: 12px; } .bakery-hero-photo { height: 340px; border-radius: 70px 9px 9px 9px; } .bakery-hero-photo > span { bottom: 17px; left: 17px; padding: 13px 18px; } .section-heading { flex-direction: column; align-items: start; gap: 17px; } .bakery-products { grid-template-columns: 1fr; gap: 27px; } .bakery-product > div { height: 270px; } .bakery-business { grid-template-columns: 1fr; padding: 27px; margin-block: 40px; gap: 23px; } .bakery-contact { padding: 15px 0 30px; } .bakery-contact > p:last-child { line-height: 2; } .site-body .site-footer-main { grid-template-columns: 1fr; gap: 25px; } .site-body .site-footer-meta { gap: 9px; } .site-body .page-head h1 { font-size: 35px; } .site-body .order-head { padding: 18px; } .site-body .order-head h1 { font-size: 23px; } .site-body .order-logo { width: 50px; } .site-body .order-when { font-size: 12px; } .site-body .tab { font-size: 11px; padding: 10px 12px; } .admin-login-page .admin-login { padding-top: 40px; } .admin-login-page .admin-login-card { padding: 28px; } }
@media(prefers-reduced-motion:reduce) { .site-body * { transition: none !important; scroll-behavior: auto !important; } }
.site-header { width: 100%; }
.bakery-hero .lead { text-align: left; margin-inline: 0; }
.bakery-hero .hero-actions { justify-content: flex-start; }
.site-body .order-head .info-gear { font-family: inherit; }
.site-body .site-footer { padding-block: 20px; text-align: center; }
.site-footer > p { margin: 0; }
.admin-login-page > .site-footer { background: transparent; text-align: center; padding: 20px; color: #536f7e; }
.site-body .attendance-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 25px 0; }
.site-body .attendance-metrics > div { border: 1px solid #dce6e3; background: #f5f9f7; border-radius: 8px; padding: 18px; }
.site-body .attendance-metrics span, .site-body .attendance-metrics small { display: block; font-size: 12px; color: #536d5e; }
.site-body .attendance-metrics strong { display: block; font-size: 28px; color: #286250; margin: 7px 0; }
.site-body .attendance-explanation { font-size: 13px; color: #536d5e; margin: 20px 0; }
.site-body .attendance-explanation summary { cursor: pointer; }
.site-body .attendance-scroll { overflow: visible; max-height: none; }
.site-body .attendance-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.site-body .attendance-table :is(th,td) { text-align: left; padding: 12px; border-bottom: 1px solid #e5eae5; }
.site-body .attendance-table thead { background: #edf4f0; }
.site-body .attendance-table tr[hidden] { display: none !important; }
.site-body .table-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 20px 0; font-size: 12px; }
.site-body .table-controls[hidden] { display: none; }
.site-body .table-controls nav { display: flex; gap: 4px; align-items: center; }
.site-body .table-controls button { min-width: 32px; height: 32px; border: 1px solid #d6e2df; border-radius: 5px; background: white; color: #456d60; cursor: pointer; }
.site-body .table-controls button[aria-current] { background: #087ea4; color: white; border-color: #087ea4; }
.site-body .table-controls button:disabled { opacity: .4; cursor: default; }
@media(max-width:640px) {
 .site-body .attendance-metrics { grid-template-columns: 1fr; }
 .site-body .attendance-metrics > div { padding: 14px; display: grid; grid-template-columns: 1fr auto; align-items: center; }
 .site-body .attendance-metrics strong { grid-column: 2; grid-row: 1 / 3; margin: 0; }
 .site-body .attendance-report .paged-table, .site-body .attendance-report tbody { display: block; }
 .site-body .attendance-report thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
 .site-body .attendance-report tbody tr { display: block; border-bottom: 1px solid #dce6df; padding: 10px 0; }
 .site-body .attendance-report tbody :is(th,td) { display: grid; grid-template-columns: 35% minmax(0,1fr); padding: 5px 0; gap: 10px; border: 0; }
 .site-body .attendance-report tbody :is(th,td)::before { content: attr(data-label); font-size: 11px; color: #617b6c; }
 .site-body .attendance-report tbody :is(th,td) > * { grid-column: 2; }
 .site-body .attendance-report tfoot, .site-body .attendance-report tfoot tr { display: block; }
 .site-body .attendance-report tfoot :is(th,td) { display: flex; justify-content: space-between; gap: 20px; }
 .site-body .attendance-report tfoot td::before { content: attr(data-label); }
 .site-body .table-controls { flex-wrap: wrap; } .site-body .table-controls nav { width: 100%; justify-content: center; }
}
.catalog-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 28px; }
.catalog-categories a { display: flex; align-items: center; gap: 10px; color: #326652; background: white; border: 1px solid #dce6df; padding: 9px 14px; border-radius: 6px; text-decoration: none; font-size: 12px; }
.catalog-categories span { color: #576f60; font-size: 10px; }
.site-body .catalog-section { padding: 26px; margin-bottom: 25px; scroll-margin-top: 20px; }
.catalog-section h2 { font-family: Georgia,serif; font-size: 26px; font-weight: 400; color: #2a5045; }
.catalog-section .item-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 30px; }
.catalog-section .item-row { min-height: 75px; padding: 14px 0; gap: 12px; }
.catalog-section .item-name { font-size: 13px; font-weight: 500; }
.catalog-section .item-price { font-size: 14px; white-space: nowrap; color: #2c7865; }
.catalog-photo { border-radius: 7px; object-fit: cover; flex: 0 0 56px; }
@media(max-width:640px) { .catalog-section .item-list { grid-template-columns: 1fr; } .site-body .catalog-section { padding: 20px; } }

.site-body .btn { color: #fff; }
.site-body .page-head > a:has(.head-logo) { display: none; }
.site-body .attendance-table, .site-body .attendance-table :is(th,td) { min-width: 0; white-space: normal; overflow-wrap: anywhere; }

.attendance-times { display: grid; gap: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Enlarge the original product photo without leaving an in-progress order. */
.product-image-link { position: absolute; inset: 0; display: block; cursor: zoom-in; border-radius: inherit; }
.product-image-link:focus-visible { outline: 3px solid #175c46; outline-offset: -3px; z-index: 2; }
.product-qty-badge { pointer-events: none; }
html.product-image-open { overflow: hidden; }
.product-image-dialog { --preview-radius: 18px; width: min(940px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--preview-radius); box-shadow: 0 24px 90px #0005; background: #fff; color: #173d32; }
.product-image-dialog::backdrop { background: #10221d99; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.product-image-dialog[open], .product-image-dialog[open]::backdrop { animation: product-image-in 160ms ease-out; }
.product-image-dialog.is-closing, .product-image-dialog.is-closing::backdrop { animation: product-image-out 140ms ease-in forwards; }
@keyframes product-image-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes product-image-out { from { opacity: 1; } to { opacity: 0; } }
@media(prefers-reduced-motion:reduce) {
  .product-image-dialog[open], .product-image-dialog[open]::backdrop { animation: none; }
}
.product-image-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid #e2e8e3; }
.product-image-dialog h2 { margin: 0; font-size: clamp(18px, 3vw, 26px); overflow-wrap: anywhere; }
.product-image-dialog button { flex: 0 0 auto; min-height: 44px; }
.product-image-stage { padding: 16px; text-align: center; background: #f6f7f3; }
.product-image-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100dvh - 170px); margin-inline: auto; object-fit: contain; border-radius: var(--preview-radius); }
.product-image-stage [hidden] { display: none; }
.company-details dl { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); gap: 12px 20px; }
.company-details dt { color: #52645c; }
.company-details dd { margin: 0; overflow-wrap: anywhere; }
@media(max-width: 480px) { .product-image-dialog > header { padding: 14px; gap: 12px; } .product-image-stage { padding: 8px; } }