:root {
    --ichigyu-red: #B81A35;
    --wagyu-black: #1A1A1A;
    --pure-white: #FFFFFF;
    --gold-foil: #FFB300;
    --charcoal: #333333;
    --slate-gray: #708090;
    --text-light-gray: #E0E0E0;
    --ichigyu-red-darker: #9e162d;
    --border-gray: var(--slate-gray)
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    background-color: var(--wagyu-black);
    color: var(--text-light-gray);
    line-height: 1.7
}

h1,
h2,
h3,
.font-display {
    font-family: 'Playfair Display', 'Noto Sans TC', serif;
    font-weight: 700;
    color: var(--pure-white)
}

h1 {
    font-size: 2.5rem;
    line-height: 1.2
}

h2 {
    font-size: 2rem;
    line-height: 1.3
}

h3 {
    font-size: 1.5rem;
    line-height: 1.4
}

h4 {
    font-size: 1.25rem;
    font-family: 'Montserrat', 'Noto Sans TC', sans-serif;
    font-weight: 600;
    color: var(--pure-white)
}

.font-heavy {
    font-weight: 900
}

.font-bold {
    font-weight: 700
}

.font-semibold {
    font-weight: 600
}

.font-medium {
    font-weight: 500
}

.font-regular {
    font-weight: 400
}

.font-light {
    font-weight: 300
}

.bg-ichigyu-red {
    background-color: var(--ichigyu-red)
}

.text-ichigyu-red {
    color: var(--ichigyu-red)
}

.border-ichigyu-red {
    border-color: var(--ichigyu-red)
}

.hover\:bg-ichigyu-red-dark:hover {
    background-color: var(--ichigyu-red-darker)
}

.bg-wagyu-black {
    background-color: var(--wagyu-black)
}

.text-wagyu-black {
    color: var(--text-light-gray)
}

.bg-pure-white {
    background-color: var(--charcoal)
}

.text-pure-white {
    color: var(--pure-white)
}

.text-gold-foil {
    color: var(--gold-foil)
}

.bg-gold-foil {
    background-color: var(--gold-foil)
}

.text-charcoal {
    color: var(--text-light-gray)
}

.text-slate-gray {
    color: var(--slate-gray)
}

.bg-light-gray {
    background-color: var(--charcoal)
}

.btn {
    display: inline-block;
    padding: .75rem 1.5rem;
    border-radius: 4px;
    font-weight: 700;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    font-size: 1rem
}

.btn-lg {
    padding: .875rem 2rem;
    font-size: 1.25rem
}

.btn-primary {
    background-color: var(--ichigyu-red);
    color: var(--pure-white);
    border: 1px solid var(--ichigyu-red)
}

.btn-primary:hover {
    background-color: var(--ichigyu-red-darker);
    border-color: var(--ichigyu-red-darker);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgb(0 0 0 / .3)
}

.btn-secondary {
    background-color: #fff0;
    color: var(--ichigyu-red);
    border: 1px solid var(--ichigyu-red)
}

.btn-secondary:hover {
    background-color: rgb(184 26 53 / .1)
}

.btn:focus,
a:focus {
    outline: 2px solid var(--ichigyu-red);
    outline-offset: 2px
}

.main-nav {
    transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease
}

.main-nav.nav-scrolled {
    background-color: rgb(26 26 26 / .85);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px rgb(0 0 0 / .4)
}

.main-nav.mobile-menu-active {
    background-color: rgb(26 26 26 / .85);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 6px rgb(0 0 0 / .4)
}

.main-nav.mobile-menu-active+#mobile-menu {
    background-color: rgb(26 26 26 / .9);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 16px rgb(0 0 0 / .3)
}

.main-nav a:not(.btn) {
    color: var(--pure-white);
    transition: color 0.3s ease
}

.main-nav a:not(.btn):hover {
    color: var(--ichigyu-red)
}

#mobile-menu-button {
    color: var(--pure-white)
}

#mobile-menu-button:hover {
    color: var(--ichigyu-red)
}

#mobile-menu {
    box-shadow: 0 8px 16px rgb(0 0 0 / .3)
}

#mobile-menu a.mobile-menu-link:hover {
    background-color: #fff0;
    color: var(--ichigyu-red)
}

.content-card {
    background-color: var(--charcoal);
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 4px 8px rgb(0 0 0 / .3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-gray);
    display: flex;
    flex-direction: column
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px rgb(0 0 0 / .4)
}

.menu-tag {
    position: absolute;
    top: .75rem;
    right: .75rem;
    background-color: var(--ichigyu-red);
    color: var(--pure-white);
    font-size: .875rem;
    padding: .375rem .75rem;
    border-radius: 9999px;
    font-weight: 600
}

.section-padding {
    padding-top: 4rem;
    padding-bottom: 4rem
}

@media (min-width:768px) {
    .section-padding {
        padding-top: 6rem;
        padding-bottom: 6rem
    }
}

.prose-custom {
    color: var(--text-light-gray)
}

.prose-custom p {
    margin-bottom: 1.25em;
    line-height: 1.7
}

.prose-custom strong {
    font-weight: 600;
    color: var(--pure-white)
}

.prose-custom strong.text-ichigyu-red {
    color: var(--ichigyu-red)
}

.prose-custom span.font-semibold {
    color: var(--pure-white)
}

.star-rating .star-icon {
    width: 1rem;
    height: 1rem;
    color: var(--gold-foil);
    display: inline-block;
    vertical-align: middle
}

.text-on-image {
    text-shadow: 0 2px 5px rgb(0 0 0 / .8)
}

.text-pure-white.text-on-image {
    text-shadow: 0 1px 4px rgb(0 0 0 / .7)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

#hero .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.hero-review-swiper-container {
    height: auto;
    min-height: 4.5rem;
    padding-top: .75rem;
    padding-bottom: .75rem
}

.heroReviewSwiper .swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    padding-left: 1rem;
    padding-right: 1rem;
    touch-action: pan-y !important;
}

.heroReviewSwiper .review-stars .star-icon {
    width: .75rem;
    height: .75rem;
    color: var(--gold-foil)
}

.heroReviewSwiper .review-text {
    font-size: .875rem;
    /* font-style: italic; */
    color: var(--text-light-gray);
    line-height: 1.4;
    margin-bottom: .125rem;
    width: 100%
}

.heroReviewSwiper .reviewer-name {
    font-size: .75rem;
    font-weight: 600;
    color: #a0aec0
}

.heroReviewSwiper {
    height: 4.5rem;
    overflow: hidden;
    touch-action: pan-y !important;
}

#experience .experience-swiper-container {
    position: relative;
    width: 100%;
    background-color: var(--wagyu-black);
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 6px 12px rgb(0 0 0 / .4)
}

#experience .swiper {
    width: 100%
}

#experience .swiper-wrapper {
    align-items: flex-start
}

#experience .swiper-slide {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--wagyu-black)
}

#experience .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%
}

#experience .experience-swiper-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, transparent, var(--wagyu-black));
    z-index: 5;
    pointer-events: none
}

#experience .swiper-button-prev,
#experience .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: var(--pure-white);
    background-color: rgb(0 0 0 / .25);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease
}

#experience .swiper-button-prev:hover,
#experience .swiper-button-next:hover {
    background-color: rgb(0 0 0 / .5)
}

#experience .swiper-button-prev::after,
#experience .swiper-button-next::after {
    font-size: 1rem;
    font-weight: 700
}

#experience .swiper-button-prev {
    left: 15px
}

#experience .swiper-button-next {
    right: 15px
}

#experience .brand-story-block {
    background-color: var(--wagyu-black);
    padding: 3rem 1rem;
    margin-top: -1px;
    position: relative;
    z-index: 6
}

@media (min-width:768px) {
    #experience .brand-story-block {
        padding: 4rem 1rem
    }
}

#location .swiper {
    padding-bottom: 0
}

#location .swiper-slide {
    height: auto;
    align-items: stretch
}

#location .content-card {
    height: 100%
}

#location .location-card-map iframe {
    border-radius: .375rem;
    filter: brightness(.85) contrast(1.05)
}

#location .swiper-button-prev,
#location .swiper-button-next {
    color: var(--pure-white);
    background-color: rgb(26 26 26 / .5);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    transition: background-color 0.3s ease;
    top: 50%;
    transform: translateY(-50%)
}

#location .swiper-button-prev:hover,
#location .swiper-button-next:hover {
    background-color: rgb(26 26 26 / .8)
}

#location .swiper-button-prev::after,
#location .swiper-button-next::after {
    font-size: 1rem;
    font-weight: 700
}

.location-card-content {
    display: flex;
    flex-direction: column;
    height: 100%
}

.location-card-details {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.location-card-details>div {
    margin-bottom: 0rem
}

.location-card-map {
    margin-top: 1rem;
    margin-bottom: 1rem
}

/* 1. 將 Hero 內容區塊向上移動約 100px (維持不變) */
#hero-content-block {
    padding-bottom: 100px;
     /* transform: translateY(-50px); */ /* 或使用 transform */
}

/* --- 調整評論區樣式 --- */

/* 2a. 將評論區星星放大至 1.75rem */
.heroReviewSwiper .review-stars .star-icon {
    width: 1.75rem; /* << 修改處 */
    height: 1.75rem; /* << 修改處 */
}

/* 2b. 評論區文字大小 (維持先前調整的 1.1375rem) */
.heroReviewSwiper .review-text {
    font-size: 1.25rem;
    line-height: 1.6;
}

/* (調整) 增加星星和文字間的距離，因應星星變大 */
.heroReviewSwiper .review-stars {
    margin-bottom: 0.5rem; /* << 增加間距 */
}

/* (調整) 因為內容(尤其是星星)變更大，需要顯著增加評論區塊的高度 */
 .heroReviewSwiper {
     height: 7.5rem; /* << 顯著增加高度 (原 4.5rem -> 5.5rem -> 7.5rem) */
 }
 .hero-review-swiper-container {
      min-height: 7.5rem; /* << 同步調整外容器最小高度 */
      /* 根據視覺效果微調 padding */
      padding-top: 1.25rem;  /* << 可能需要增加 */
      padding-bottom: 1.25rem; /* << 可能需要增加 */
 }

 /* (微調) 調整評論者名稱與星星的對齊方式 (可能需要) */
 .heroReviewSwiper .reviewer-name {
    /* 嘗試讓它跟較大的星星在視覺上更協調 */
    /* margin-top: 0.25rem; */ /* 視情況取消註解或調整 */
 }

 /* (微調) 調整評論者名稱和星星的整體容器對齊 (可能需要) */
 .heroReviewSwiper .swiper-slide > div:first-child { /* 選取包含星星和名字的 flex 容器 */
     align-items: center; /* 嘗試讓星星和名字垂直居中對齊 */
 }

 /* --- Review Clickable Area Styles --- */
.review-clickable-area {
    text-decoration: none; /* 移除下劃線 */
    color: inherit;        /* 繼承父元素的文字顏色 */
    display: block;        /* 確保其行為像塊級元素，配合 w-full h-full */
    /* cursor: pointer; /* a 標籤默認就是 pointer，可以不加 */
    touch-action: pan-y !important;
}

/* 可選：為可點擊區域添加 focus 樣式，提高可訪問性 */
.review-clickable-area:focus-visible { /* 使用 focus-visible 避免滑鼠點擊時出現 */
    outline: 2px solid var(--ichigyu-red); /* 你可以選擇喜歡的 focus 顏色 */
    outline-offset: 2px;
    border-radius: 4px; /* 可選，讓 outline 更貼合卡片形狀 */
}

/* 可選：為整個 swiper-slide 添加 hover 效果，暗示它是可點擊的 */
.heroReviewSwiper .swiper-slide:hover {
    /* 例如，輕微改變背景色或透明度 */
    /* background-color: rgba(255, 255, 255, 0.03); */ /* 範例：非常淡的背景變化 */
    /* opacity: 0.95; */
    /* 你也可以讓裡面的文字變亮一點等 */
}

/* 確保 swiper-slide 本身也有 cursor: pointer，因為 a 標籤在它內部 */
.heroReviewSwiper .swiper-slide {
    cursor: pointer;
}

/* 修正：移除地點卡片在 hover 時的向上移動效果 */
#location .content-card:hover {
    transform: none; /* 或者 transform: translateY(0); */
    /* 如果您仍想保留陰影變化，可以保留下面這行，否則也移除 */
    box-shadow: 0 10px 15px rgb(0 0 0 / .4);
}

.hero-review-swiper-container {
    background-image: linear-gradient(
        to top, /* 漸變方向：從下往上 */
        rgba(26, 26, 26, 1) 0%,       /* 底部：完全不透明的 wagyu-black (#1A1A1A) */
        rgba(26, 26, 26, 0.9) 25%,  /* 向上漸變，透明度略微降低 */
        rgba(26, 26, 26, 0.65) 60%,  /* 繼續向上變淡 */
        rgba(26, 26, 26, 0) 100%   /* 頂部：非常透明的 wagyu-black，隱約透出背景圖 */
    );
    
    padding-top: 0.75rem; 
    padding-bottom: 0.75rem;
}