/* ================================================
   Restaurant 906 — Index page styles
   ================================================ */

/* ---------- Hero banner ----------
   Full width, filling the viewport beneath the fixed header (.l-header:
   90px desktop / 65px at <=1070px). Replaces the shared .c-cropPh
   percentage-padding aspect-ratio hack with an explicit height, since
   that hack sizes off element width and can't express a viewport-relative
   height. Scoped to this page only (restaurant.css loads on /restaurants
   alone), so the shared .c-cropPh/.c-cropPh__lead rules used by other
   pages are unaffected. */
.p-firstview .c-cropPh__lead {
    padding-top: 0;
    width: 100%;
    height: calc(100vh - 90px);
    height: calc(100dvh - 90px);
    min-height: calc(100vh - 90px);
    min-height: calc(100dvh - 90px);
}
.p-firstview .c-cropPh__lead img {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
}
@media screen and (max-width: 1070px) {
    .p-firstview .c-cropPh__lead {
        height: calc(100vh - 65px);
        height: calc(100dvh - 65px);
        min-height: calc(100vh - 65px);
        min-height: calc(100dvh - 65px);
    }
}

.p-restaurant {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding-bottom: 4em;
}

/* ---------- Header ---------- */
.p-restaurant__header {
    padding: 1.5em 1em 0.5em;
}

.p-restaurant__name {
    font-size: 150%;
    font-weight: bold;
    line-height: 1.3em;
    margin-bottom: 0.5em;
}

.p-restaurant__desc {
    font-size: 87.5%;
    line-height: 1.75em;
    color: #666;
}

/* ---------- Tabs ---------- */
.p-restaurant__tabNav {
    display: -webkit-flex;
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    margin: 1.5em 0 0;
    padding: 0;
    list-style: none;
}

.p-restaurant__tabBtn {
    -webkit-flex: 1;
    flex: 1;
    padding: 0.9em 0.5em;
    text-align: center;
    font-size: 87.5%;
    font-weight: bold;
    letter-spacing: 0.12em;
    color: #aaa;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    -webkit-user-select: none;
    user-select: none;
    list-style: none;
}

.p-restaurant__tabBtn.is-active {
    color: #000;
    border-bottom-color: #000;
}

/* ---------- Tab panels ---------- */
.p-restaurant__tabContent {
    padding: 1.5em 1em 0;
}

/* ---------- Course intro ---------- */
.p-restaurant__courseIntro {
    font-size: 87.5%;
    color: #666;
    line-height: 1.75em;
    margin-bottom: 1.5em;
}

/* ---------- Course card ---------- */
.p-restaurant__courseCard {
    border: 1px solid #e6e6e6;
    padding: 0 1.5em 1.5em;
    margin-bottom: 1.5em;
}
.p-restaurant__courseCard:hover {
    border-color: #000;
}

/* Linkable card variant */
a.p-restaurant__courseCard--link {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.p-restaurant__courseCard--link:hover .p-restaurant__courseTitle {
    text-decoration: underline;
}

/* Full-bleed image within padded container */
.p-restaurant__courseImg {
    margin: 0 -1.5em 1.25em;
    overflow: hidden;
    line-height: 0;
}

.p-restaurant__courseImg img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

/* Category label */
.p-restaurant__courseCategory {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 75%;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #666;
    margin-bottom: 0.5em;
}

.p-restaurant__categoryAccent {
    display: inline-block;
    width: 1.5em;
    height: 2px;
    background: #d5001c;
    margin-right: 0.5em;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

/* Badges */
.p-restaurant__badges {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-bottom: 0.6em;
}

.p-restaurant__badge {
    display: inline-block;
    padding: 0.15em 0.85em;
    font-size: 75%;
    border-radius: 2em;
    white-space: nowrap;
    line-height: 1.7em;
}

.p-restaurant__badge--default {
    background: #383838;
    color: #fff;
}

.p-restaurant__badge--dark {
    background: #000;
    color: #fff;
}

.p-restaurant__badge--danger {
    background: #d5001c;
    color: #fff;
}

/* Course title */
.p-restaurant__courseTitle {
    font-size: 112.5%;
    font-weight: bold;
    line-height: 1.4em;
    margin-bottom: 0.3em;
}

.p-restaurant__courseDishes {
    font-size: 80%;
    font-weight: normal;
    color: #666;
    margin-left: 0.3em;
}

.p-restaurant__courseSupp {
    font-size: 80%;
    font-weight: normal;
    color: #666;
    margin-bottom: 0.75em;
}

/* Course description */
.p-restaurant__courseDesc {
    font-size: 87.5%;
    color: #666;
    line-height: 1.75em;
    white-space: pre-line;
}

/* Price + hours row */
.p-restaurant__courseFooter {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.4em;
}

.p-restaurant__priceAmount {
    font-size: 125%;
    font-weight: bold;
    line-height: 1.2em;
}

.p-restaurant__priceTax {
    font-size: 75%;
    color: #666;
    margin-left: 0.2em;
}

.p-restaurant__courseHours {
    font-size: 87.5%;
    color: #666;
    white-space: nowrap;
}

/* ---------- Menu sections ---------- */
.p-restaurant__menuSection {
    margin-bottom: 2em;
}

.p-restaurant__sectionHeader {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 0.75em;
}

.p-restaurant__sectionAccent {
    display: inline-block;
    width: 1.5em;
    height: 2px;
    background: #d5001c;
    margin-right: 0.5em;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.p-restaurant__sectionLabel {
    font-size: 75%;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #666;
}

.p-restaurant__menuItems {
    border-top: 1px solid #e6e6e6;
}

.p-restaurant__menuItem {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    padding: 0.9em 0;
    border-bottom: 1px solid #e6e6e6;
    gap: 1em;
}

.p-restaurant__menuItemLeft {
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
}

.p-restaurant__menuItemName {
    font-size: 87.5%;
    line-height: 1.5em;
}

.p-restaurant__menuItemDesc {
    font-size: 75%;
    color: #999;
    line-height: 1.5em;
    margin-top: 0.15em;
}

.p-restaurant__menuItemPrice {
    font-size: 87.5%;
    white-space: nowrap;
    color: #333;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    padding-top: 0.1em;
}

.p-restaurant__sectionNote {
    font-size: 75%;
    color: #999;
    margin-top: 0.5em;
    line-height: 1.5em;
}

/* ---------- Information section ---------- */
.p-restaurant__infoSection {
    padding: 2em 1em 0;
    border-top: 1px solid #e6e6e6;
}

.p-restaurant__infoTable {
    border: 1px solid #e6e6e6;
    margin-top: 0.75em;
    margin-bottom: 1.5em;
}

.p-restaurant__infoRow {
    display: -webkit-flex;
    display: flex;
    border-bottom: 1px solid #e6e6e6;
}

.p-restaurant__infoRow:last-child {
    border-bottom: none;
}

.p-restaurant__infoLabel {
    width: 38%;
    padding: 0.75em;
    font-size: 87.5%;
    color: #666;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    border-right: 1px solid #e6e6e6;
    line-height: 1.6em;
}

.p-restaurant__infoValue {
    -webkit-flex: 1;
    flex: 1;
    padding: 0.75em;
    font-size: 87.5%;
    line-height: 1.6em;
    word-break: break-word;
}

/* ---------- Notice ---------- */
.p-restaurant__notice {
    border-left: 3px solid #d5001c;
    padding: 0.75em 1em;
    background: #fafafa;
    font-size: 75%;
    color: #666;
    line-height: 1.75em;
    margin-bottom: 2em;
}

/* ---------- Bottom link ---------- */
.p-restaurant__policyLink {
    text-align: center;
    margin-bottom: 1em;
}

.p-restaurant__policyLink a {
    font-size: 87.5%;
    color: #000;
    text-decoration: underline;
}

/* ================================================
   Restaurant 906 — Course Detail page styles
   ================================================ */

.p-cdetail {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding-bottom: 4em;
}

/* ---------- Back link ---------- */
.p-cdetail__back {
    display: block;
    padding: 1em 1em 0;
    font-size: 87.5%;
    color: #000;
    text-decoration: none;
}

.p-cdetail__back:hover {
    text-decoration: underline;
}

/* ---------- Hero image ---------- */
.p-cdetail__img {
    margin: 1em 0 0;
    overflow: hidden;
    line-height: 0;
    background: #e6e6e6;
}

.p-cdetail__img img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.p-cdetail__imgPlaceholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #e6e6e6;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

/* ---------- Course header ---------- */
.p-cdetail__header {
    padding: 1.25em 1em 0;
}

.p-cdetail__category {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    font-size: 75%;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #666;
    margin-bottom: 0.6em;
}

.p-cdetail__categoryAccent {
    display: inline-block;
    width: 1.5em;
    height: 2px;
    background: #d5001c;
    margin-right: 0.5em;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.p-cdetail__badges {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 0.4em;
    margin-bottom: 0.6em;
}

.p-cdetail__badge {
    display: inline-block;
    padding: 0.15em 0.85em;
    font-size: 75%;
    border-radius: 2em;
    white-space: nowrap;
    line-height: 1.7em;
}

.p-cdetail__badge--default {
    background: #383838;
    color: #fff;
}

.p-cdetail__badge--dark {
    background: #000;
    color: #fff;
}

.p-cdetail__badge--danger {
    background: #d5001c;
    color: #fff;
}

.p-cdetail__title {
    font-size: 137.5%;
    font-weight: bold;
    line-height: 1.35em;
    margin-bottom: 0.4em;
}

.p-cdetail__titleSupp {
    font-size: 75%;
    font-weight: normal;
    color: #666;
    margin-bottom: 0.75em;
}

.p-cdetail__desc {
    font-size: 87.5%;
    color: #666;
    line-height: 1.75em;
    white-space: pre-line;
}

.p-cdetail__priceRow {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    gap: 0.3em;
    margin-bottom: 0.25em;
}

.p-cdetail__price {
    font-size: 137.5%;
    font-weight: bold;
    line-height: 1.2em;
}

.p-cdetail__priceTax {
    font-size: 75%;
    color: #666;
}

/* ---------- Info table ---------- */
.p-cdetail__infoTable {
    border: 1px solid #e6e6e6;
    margin: 1.25em 1em 0;
}

.p-cdetail__infoRow {
    display: -webkit-flex;
    display: flex;
    border-bottom: 1px solid #e6e6e6;
}

.p-cdetail__infoRow:last-child {
    border-bottom: none;
}

.p-cdetail__infoLabel {
    width: 38%;
    padding: 0.75em;
    font-size: 87.5%;
    color: #666;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    border-right: 1px solid #e6e6e6;
    line-height: 1.6em;
}

.p-cdetail__infoValue {
    -webkit-flex: 1;
    flex: 1;
    padding: 0.75em;
    font-size: 87.5%;
    line-height: 1.6em;
    word-break: break-word;
}

/* ---------- SET MENU section ---------- */
.p-cdetail__menuSection {
    padding: 2em 1em 0;
}

.p-cdetail__menuHeading {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    margin-bottom: 1.25em;
}

.p-cdetail__menuHeadingAccent {
    display: inline-block;
    width: 1.5em;
    height: 2px;
    background: #d5001c;
    margin-right: 0.5em;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.p-cdetail__menuHeadingText {
    font-size: 75%;
    font-weight: bold;
    letter-spacing: 0.15em;
    color: #666;
}

.p-cdetail__menuGroups {
    border-top: 1px solid #e6e6e6;
}

.p-cdetail__menuGroup {
    padding: 1em 0;
    border-bottom: 1px solid #e6e6e6;
}

.p-cdetail__menuGroupTitle {
    font-size: 87.5%;
    font-weight: bold;
    line-height: 1.5em;
    margin-bottom: 0.3em;
}

.p-cdetail__menuGroupDesc {
    font-size: 87.5%;
    color: #666;
    line-height: 1.7em;
    white-space: pre-line;
}

/* ---------- Change notice ---------- */
.p-cdetail__changeNotice {
    font-size: 75%;
    color: #999;
    line-height: 1.6em;
    padding: 0.75em 1em 0;
}

/* ---------- Notice box (allergy / dietary info) ----------
   Same left-accent notice style as .p-confirm__notice in
   restaurant-booking.css (border-left #a08040 / cream background),
   reused here with a bold heading. */
.p-cdetail__noticeBox {
    border-left: 4px solid #a08040;
    background: #fdfcf8;
    padding: 1em 1.25em;
    box-sizing: border-box;
}

.p-cdetail__noticeTitle {
    font-size: 100%;
    font-weight: bold;
    line-height: 1.5em;
    margin: 0 0 0.5em;
}

.p-cdetail__noticeText {
    font-size: 87.5%;
    color: #555;
    line-height: 1.75em;
}

.p-cdetail__noticeDivider {
    border: none;
    border-top: 1px solid #ddd;
    margin: 0.75em 0;
}

/* ---------- Action buttons ---------- */
.p-cdetail__actions {
    padding: 2em 1em 0;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    gap: 0.75em;
}

.p-cdetail__btnReserve {
    display: block;
    width: 100%;
    padding: 1em;
    background: #000;
    color: #fff;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    border: 2px solid #000;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    letter-spacing: 0.05em;
}

.p-cdetail__btnReserve:hover {
    background: #222;
    border-color: #222;
}

.p-cdetail__btnBack {
    display: block;
    width: 100%;
    padding: 1em;
    background: #fff;
    color: #000;
    font-size: 100%;
    font-weight: bold;
    text-align: center;
    border: 2px solid #000;
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    letter-spacing: 0.05em;
}

.p-cdetail__btnBack:hover {
    background: #f5f5f5;
}