@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;600&family=Noto+Sans+TC:wght@400;500;600&display=swap');

/* The ordering flow keeps its existing controls and uses the homepage palette. */
.order-page {
    --shop-ink: #302f2b;
    --shop-muted: #726e66;
    --shop-accent: #806346;
    --shop-paper: #f7f6f2;
    --shop-line: #e5e2dc;
    --bs-primary-rgb: 128, 99, 70;
    font-family: 'Noto Sans TC', sans-serif;
    color: var(--shop-ink);
    background: #fff;
}
.order-page .container { max-width: 1200px; padding-left: 32px; padding-right: 32px; }
.order-page .bakery-navbar {
    padding: 20px 0;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid var(--shop-line);
    backdrop-filter: blur(16px);
}
.order-page .navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 21px 'Noto Serif TC', serif;
    letter-spacing: 2px;
    color: var(--shop-ink);
}
.order-page .navbar-brand img { width: 32px; height: 32px; }
.order-page .navbar-brand span { font: 11px sans-serif; letter-spacing: 3px; border-left: 1px solid var(--shop-line); padding-left: 14px; margin-left: 8px; }
.order-page .btn-bakery { border: 1px solid var(--shop-line); border-radius: 0; padding: 10px 18px; font-size: 12px; color: var(--shop-ink); }
.order-page .btn-bakery:hover { border-color: var(--shop-ink); background: var(--shop-paper); }
.order-content { padding-top: 65px; padding-bottom: 120px; }
.order-intro { margin-bottom: 40px; }
.order-eyebrow { font-size: 10px; letter-spacing: 2.2px; color: var(--shop-muted); margin-bottom: 22px; }
.order-intro h1 { font-size: 42px !important; font-weight: 500; letter-spacing: 3px; }
.order-intro > p:last-child { font-size: 14px !important; margin-top: 15px; }
.category-panel { border-top: 1px solid var(--shop-line); border-bottom: 1px solid var(--shop-line); padding: 22px 0; }
.category-panel > div { display: flex; gap: 24px; align-items: center; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.category-panel label { flex-shrink: 0; margin: 0 !important; font-size: 13px; }
.category-panel select { max-width: 300px; }
.order-page .form-control, .order-page .form-select { background-color: #fff; color: var(--shop-ink); font-size: 14px; min-height: 44px; }
.order-page .form-control:focus, .order-page .form-select:focus { border-color: var(--shop-accent) !important; box-shadow: 0 0 0 3px #80634618; }
.order-page label { font-size: 13px; }
.order-page .form-check-input:checked { background-color: var(--shop-accent); border-color: var(--shop-accent); }
.order-page .product-card { border: 1px solid var(--shop-line); box-shadow: none !important; transition: transform .25s, border-color .25s !important; }
.order-page .product-card:hover { transform: translateY(-3px); border-color: #bdb3a5; }
.order-page .product-card h6 { font-size: 21px; font-weight: 500 !important; }
.order-page .product-card button:not(:disabled):hover, .order-page #submitOrderBtn:hover { background: var(--shop-accent) !important; }
.order-page button { transition: background .2s, transform .2s; }
.order-page button:disabled { opacity: .55; cursor: not-allowed !important; }
.order-page a:focus-visible, .order-page button:focus-visible { outline: 2px solid var(--shop-accent); outline-offset: 4px; }
.floating-cart-btn {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #302f2b;
    border-radius: 50%;
    background: var(--shop-ink);
    color: #fff;
    font-size: 24px;
    box-shadow: 0 6px 22px #302f2b12;
    z-index: 1000;
    cursor: pointer;
}
.floating-cart-btn:hover { background: var(--shop-accent); transform: translateY(-2px); }
.cart-badge { position: absolute; top: -4px; right: -4px; display: flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 2px; background: var(--shop-accent); color: #fff; border: 2px solid #fff; border-radius: 50%; font-size: 11px; }
.cart-sidebar { position: fixed; top: 0; right: -450px; width: 450px; height: 100dvh; background: #fff; border-left: 1px solid var(--shop-line); box-shadow: -10px 0 40px #302f2b12; transition: right .3s ease; z-index: 1052; display: flex; flex-direction: column; }
.cart-sidebar.active { right: 0; }
.cart-sidebar > div:nth-child(2) { min-height: 0; }
.cart-overlay { position: fixed; inset: 0; background: #302f2b45; z-index: 1051; display: none; }
.cart-overlay.active { display: block; }
.order-page .modal-content { overflow: hidden; box-shadow: 0 20px 70px #302f2b26; }
.order-page .modal-body { max-height: calc(100dvh - 180px) !important; }
.order-page .modal h4, .order-page .cart-sidebar h4 { font-weight: 500; font-size: 24px; }
.order-page #successModal .modal-content { border-width: 1px !important; }
.order-page .flatpickr-calendar { border: 1px solid var(--shop-line); border-radius: 8px; box-shadow: 0 12px 30px #302f2b1c; font-family: inherit; }
.order-page .flatpickr-months, .order-page .flatpickr-weekdays { background: var(--shop-paper); }
.order-page .flatpickr-current-month, .order-page .flatpickr-weekday { color: var(--shop-ink); }
.order-page .flatpickr-day { border-radius: 4px; }
.order-page .flatpickr-day.today { border-color: var(--shop-accent); }
.order-page .flatpickr-day:hover:not(.flatpickr-disabled) { background: var(--shop-paper); border-color: var(--shop-line); }
.order-page .flatpickr-day.selected, .order-page .flatpickr-day.selected:hover { background: var(--shop-ink); color: #fff; border-color: var(--shop-ink); }
@media(max-width:767px) {
    .order-page .container { padding-left: 24px; padding-right: 24px; }
    .order-page .bakery-navbar { padding: 14px 0; }
    .order-page .navbar-brand { font-size: 18px; }
    .order-page .navbar-brand span { display: none; }
    .order-page .btn-bakery { padding: 9px 12px; font-size: 11px; }
    .order-content { padding-top: 40px; }
    .order-intro h1 { font-size: 34px !important; }
    .category-panel > div { gap: 16px; }
    .floating-cart-btn { width: 55px; height: 55px; right: 18px; bottom: 18px; }
    .cart-sidebar { width: min(450px, 100vw); right: -100vw; }
    .order-page .modal-dialog { margin: 12px; }
    .order-page .modal-body { padding: 20px !important; }
    .order-page .form-control, .order-page .form-select { font-size: 16px; }
    .order-page #sendVerificationBtn { font-size: 12px; padding-left: 12px !important; padding-right: 12px !important; }
}
@media(prefers-reduced-motion:reduce) {
    .order-page *, .order-page *::before, .order-page *::after { animation: none !important; transition: none !important; }
    .order-page .product-card:hover, .floating-cart-btn:hover { transform: none; }
}

/* Product details, policies and customer order links share the same visual language. */
.order-page h1, .order-page h2, .order-page h3, .order-page h4 { font-family: 'Noto Serif TC', serif; font-weight: 500; }
.order-page .btn-primary { --bs-btn-bg: #302f2b; --bs-btn-border-color: #302f2b; --bs-btn-hover-bg: #806346; --bs-btn-hover-border-color: #806346; --bs-btn-active-bg: #806346; --bs-btn-active-border-color: #806346; --bs-btn-disabled-bg: #726e66; --bs-btn-disabled-border-color: #726e66; border-radius: 6px; }
.order-page .btn-outline-secondary { --bs-btn-color: #302f2b; --bs-btn-border-color: #d1cbc1; --bs-btn-hover-bg: #f7f6f2; --bs-btn-hover-color: #302f2b; --bs-btn-hover-border-color: #806346; border-radius: 6px; }
.order-page .breadcrumb { background: none; font-size: 12px; }
.order-page .breadcrumb a { color: var(--shop-muted); text-decoration: none; }
.order-page .breadcrumb a:hover { color: var(--shop-accent); }
.product-detail-page .product-image { width: 100%; height: auto; max-height: 580px; aspect-ratio: 1; object-fit: contain; background: var(--shop-paper); border: 1px solid var(--shop-line); border-radius: 8px; }
.product-detail-page .product-price { font-size: 32px; color: var(--shop-accent); font-family: 'Noto Serif TC', serif; }
.product-detail-page .product-badge { display: inline-block; padding: 6px 14px; background: var(--shop-paper); color: var(--shop-muted); border: 1px solid var(--shop-line); border-radius: 4px; font-size: 12px; }
.product-detail-page .info-section { padding: 24px; border: 1px solid var(--shop-line); border-radius: 6px; background: var(--shop-paper); }
.product-detail-page .quantity-input { max-width: 120px; border: 1px solid var(--shop-line); padding: 12px; border-radius: 6px; }
.product-detail-page .nutrition-table { border: 1px solid var(--shop-line); }
.product-detail-page .nutrition-table th { background: var(--shop-ink); color: #fff; padding: 14px; }
.product-detail-page .nutrition-table td { padding: 12px; border-bottom-color: var(--shop-line); }
.product-detail-page .allergen-badge { display: inline-block; margin: 4px; padding: 6px 12px; color: #874b42; background: #faf1ef; border: 1px solid #ead3cd; border-radius: 4px; font-size: 13px; }
.product-detail-page .recommendation-card { border: 1px solid var(--shop-line); border-radius: 6px; overflow: hidden; box-shadow: none !important; cursor: pointer; transition: transform .25s; }
.product-detail-page .recommendation-card:hover { transform: translateY(-3px); }
.product-detail-page .recommendation-card img { width: 100%; height: 220px; object-fit: cover; }
.policy-container { max-width: 900px; margin: auto; padding: 60px 28px 100px; }
.policy-header { padding-bottom: 35px; border-bottom: 1px solid var(--shop-line); margin-bottom: 35px; }
.policy-header h1 { font-size: 32px; line-height: 1.6; margin-bottom: 16px; letter-spacing: 1px; }
.policy-header .subtitle { color: var(--shop-muted); font-size: 14px; }
.policy-content { font-size: 14px; line-height: 2; }
.policy-intro { background: var(--shop-paper); border-left: 2px solid var(--shop-accent); padding: 26px; margin-bottom: 42px; border-radius: 4px; }
.policy-section { margin-bottom: 38px; }
.policy-section h2 { font-size: 22px; border-bottom: 1px solid var(--shop-line); padding-bottom: 16px; margin-bottom: 20px; }
.policy-section h3 { font-size: 17px; color: var(--shop-accent); }
.policy-section li { margin-bottom: 8px; }
.highlight-box, .note-box, .consent-box { background: var(--shop-paper); padding: 20px 24px; border: 1px solid var(--shop-line); border-radius: 4px; margin: 20px 0; }
.highlight-box p, .note-box p { margin: 0; }
.consent-box blockquote { margin: 0; border-left: 2px solid var(--shop-accent); padding-left: 18px; }
.back-button { display: inline-flex; gap: 12px; align-items: center; padding: 14px 24px; background: var(--shop-ink); color: #fff; text-decoration: none; border-radius: 4px; }
.back-button:hover { background: var(--shop-accent); color: #fff; }
.order-page .customer-toast { width: max-content; max-width: calc(100vw - 32px); padding: 20px 52px 20px 24px; border: 1px solid var(--shop-line); border-radius: 8px; box-shadow: 0 12px 38px #302f2b1a; color: var(--shop-ink); background: #fff; font-size: 14px; }
.order-page .customer-toast.alert-success { border-left: 3px solid #5d7860; }
.order-page .customer-toast.alert-warning, .order-page .customer-toast.alert-info { border-left: 3px solid var(--shop-accent); }
.order-page .customer-toast.alert-danger { border-left: 3px solid #a4594d; }
@media screen {
    .order-view-page .card, .invalid-link-page .card { border: 1px solid var(--shop-line); border-radius: 8px; box-shadow: none !important; overflow: hidden; }
    .order-view-page .card-header { border-color: var(--shop-line); background: var(--shop-paper) !important; }
    .order-view-page .table { --bs-table-border-color: var(--shop-line); font-size: 14px; }
    .order-view-page .table th { background: var(--shop-paper); }
    .order-view-page #orderContent { overflow-wrap: anywhere; }
    .order-view-page .order-status-badge { border-radius: 4px; font-size: 13px; font-weight: 500; }
    .order-view-page .badge.bg-primary { background: var(--shop-accent) !important; }
    .order-view-page .badge.bg-info { background: #e7efed !important; color: #3e6259; }
    .order-view-page .badge.bg-warning { background: #f5ecd9 !important; color: #75592f !important; }
    .order-view-page .badge.bg-success { background: #e6eee3 !important; color: #456451; }
    .order-view-page .badge.bg-danger { background: #f6e7e2 !important; color: #874b42; }
    .order-view-page .btn-lg { padding: 12px 18px; font-size: 14px; }
    .order-view-page #actionButtons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
}
@media(max-width:767px) {
    .product-detail-page .navbar-brand { font-size: 16px; gap: 7px; }
    .product-detail-page .navbar-brand img { width: 26px; height: 26px; }
    .product-detail-page .bakery-navbar .container { gap: 12px; flex-wrap: wrap; }
    .product-detail-page .bakery-navbar .ms-auto { display: flex; gap: 8px; }
    .product-detail-page .bakery-navbar .btn { margin: 0 !important; font-size: 10px; padding: 8px; }
    .product-detail-page #productContent h1 { font-size: 30px !important; }
    .policy-container { padding: 38px 24px 80px; }
    .policy-header h1 { font-size: 26px; }
    .policy-intro { padding: 20px; }
    .policy-section h2 { font-size: 20px; }
    .order-view-page .card-body { padding: 20px !important; }
}
@media(prefers-reduced-motion:reduce) { .product-detail-page .recommendation-card:hover { transform: none; } }