/* ===================================
    Crafto - Restaurant
====================================== */
/* font 
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700;800;900&display=swap");*/

/* 進場（未 sticky/未 appear）：透明、白字 */

.kosugi-regular {
  font-family: "Noto Sans HK", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* variable */
:root {
  --base-color: #d39121;
  --medium-gray: #8d8987;
  --black: #282725;
  --dark-gray: #383632;
  --red: #d51f0f;
  --green: #46b57e;
  --very-light-gray: #f9f6f3;
  --light-gray: #a8a9a2;
  --yellow: #ecba23;
  --alt-font: "Noto Sans HK", sans-serif;
  --primary-font: "Noto Sans HK", sans-serif;
  --latte-1: #f3e8da;
  --latte-2: #eadbc8;
  --white: #ffffff;
  --darkbrown: #4d3900;
  --darkbrown-1: #4e4220;
  --slant: 9vw;
}

body {
  font-size: 17px;
  line-height: 30px;
  font-family: "Noto Sans HK", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.text-darkbrown {
  color: var(--darkbrown);
}

.text-darkbrown-1 {
  color: var(--darkbrown-1);
}

.bg-lightgray {
  background: var(--light-gray);
}
/* header */
header .navbar-brand img {
  max-height: 65px;
}

.navbar .navbar-nav .nav-link {
  font-size: 18px;
  font-weight: 350;
}

header .btn.btn-switch-text.btn-small > span {
  padding: 11px 25px 9px;
}

.sticky .header-transparent .header-button .btn {
  background-color: var(--dark-gray);
  border-color: rgba(23, 23, 23, 0.2);
  color: var(--white);
}

.sticky .header-transparent .header-button .btn:hover {
  background-color: var(--dark-gray);
  color: var(--white);
  border-color: var(--dark-gray);
}

/* heading */
h1,
.h1 {
  line-height: 4rem;
}

h2 {
  line-height: 3.2rem;
}

/* swiper slider */
.slider-navigation-style-01.swiper-button-next {
  right: 30px;
}

.slider-navigation-style-01.swiper-button-prev {
  left: 30px;
}

/* btn */
[class*="btn-transparent"],
[class*=" btn-transparent"] {
  font-weight: 500;
}

.btn i {
  top: 0px;
}

.btn.btn-switch-text.btn-extra-large > span {
  font-size: 18px;
  padding: 19px 32px 16px;
}

.btn.btn-switch-text.btn-large > span {
  font-size: 17px;
  padding: 17px 28px 14px;
}

.btn.btn-switch-text.btn-medium > span {
  font-size: 16px;
  padding: 15px 24px 12px;
}

.btn.btn-switch-text.btn-small > span {
  font-size: 14px;
  padding: 13px 20px 11px;
}

.btn.btn-switch-text.btn-very-small > span {
  font-size: 13px;
  padding: 10px 18px 7px;
}

.btn.btn-link {
  padding: 0 0 2px;
}

.btn.btn-hover-animation-switch .btn-icon i {
  font-size: 24px;
  line-height: 0;
  top: -2px;
}

.btn.btn-hover-animation-switch .btn-icon {
  margin-left: 5px;
}

/* page title */
.page-title-extra-large h1 {
  font-size: 5rem;
  line-height: 5rem;
}

.page-title-extra-large h2 {
  font-size: 15px;
  line-height: 26px;
}

/* border color */
.border-color-extra-medium-gray {
  border-color: #c7c2bf !important;
}

/* bg color transparent */
.bg-base-color-transparent {
  background: rgba(211, 145, 33, 0.9);
}

.bg-mise-color {
  background: #f9e9cd;
}

.bg-tea-color {
  background: #dbc8b6;
}

.bg-stone-color {
  background-image: url("../images/about-bg.jpg");
}

.bg-light-color {
  --bg-alpha: 0.6; /* 透明度 */
  --bg-rgb: 255, 255, 255; /* 背景色（白） */
  position: relative;
  background: transparent;
}

.text-outline-base-color-background {
  -webkit-text-fill-color: var(--base-color);
}

.subscribe-popup .newsletter-style-05 .submit {
  font-size: 17px;
}

/* portfolio */
.portfolio-filter li {
  padding: 0 35px;
}

/* top right bottom left */
.top-minus-35px {
  top: -35px;
}

/* review */
.review-star-icon i {
  letter-spacing: 1px;
}

/* categories */
.categories-btn {
  line-height: 21px;
  letter-spacing: 0;
  padding: 3px 14px 4px;
}

/* blog comment */
.blog-comment li .btn-reply {
  padding: 6px 20px 7px;
}

/* footer */
footer .footer-logo img {
  max-height: 49px;
}

footer .elements-social li {
  margin: 0 22px 0 0;
}

footer .social-icon-style-08 ul li a:hover {
  opacity: 1;
}

footer .facebook {
  color: #3b5998;
}

footer .twitter {
  color: #00aced;
}

footer .elements-social ul li:last-child {
  margin-right: 0;
}

/* team style */
.team-style-05:hover img {
  filter: grayscale(100%);
}

/* margin */
.mt-minus-2px {
  margin-top: -2px;
}

/* map */
.infowindow .mb-3 {
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0;
}

.infowindow p {
  font-size: 17px;
  letter-spacing: 0;
}

.google-maps-link a {
  font-size: 13px;
  letter-spacing: 1px;
}

/* media query responsive */
@media (min-width: 1024px) {
  .mb50-lg {
    margin-top: 50px;
  }
}

@media (max-width: 1199px) {
  header .btn.btn-switch-text.btn-small > span {
    padding: 10px 15px 8px;
  }
}

@media (max-width: 991px) {
  header .btn.btn-transparent-white-light {
    background-color: var(--dark-gray);
    border-color: rgba(23, 23, 23, 0.2);
    color: var(--white);
  }
  header .btn.btn-transparent-white-light:hover {
    background-color: var(--dark-gray);
    color: var(--white);
  }
}

@media (max-width: 767px) {
  .portfolio-filter li {
    padding: 0;
    margin-bottom: 5px;
  }
  .sm-text-outline-width-1px {
    -webkit-text-stroke-width: 1px;
  }
}

@media (max-width: 575px) {
  .video-icon-large .video-icon {
    width: 75px;
    height: 75px;
  }
  .video-icon .video-icon-sonar .video-icon-sonar-bfr {
    top: -30px;
    left: -30px;
  }
  .xs-w-320px {
    width: 320px !important;
  }
  .xs-h-320px {
    height: 320px !important;
  }
  .btn.btn-switch-text.btn-extra-large > span {
    font-size: 17px;
    padding: 14px 22px 11px;
  }
}

@media (max-width: 767px) {
  /* swiper slider */
  .slider-navigation-style-01.swiper-button-next {
    right: 15px;
  }
  .slider-navigation-style-01.swiper-button-prev {
    left: 15px;
  }
}

/* category section background */

/* 斜角背景本體 */
.latte-slant {
  /*position: relative;
  z-index: 0;
  isolation: isolate;*/
  background: linear-gradient(180deg, var(--latte-1), var(--white));
  margin-bottom: 50px;
}

/* category end */

/*　about　section　*/
.about.seamless-join {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--slant) + 1px);
}

.about.seamless-join > .inner,
.about.seamless-join > .container {
  padding-top: calc(var(--about-pt, 96px) + var(--slant));
}

.about.no-tail-bottom::after {
  display: none;
}

/*　end　about　section　*/

/*footer section */
/* 讓 footer 往上吃掉上一塊的斜角高度，無縫銜接 */
.seamless-join {
  margin-top: calc(-1 * var(--slant));
}

.latte-footer {
  position: relative;
  /*overflow: hidden;*/
  z-index: 3;
  isolation: isolate;
  color: #222;
}

.latte-footer.seamless-join {
  margin-top: calc(-1 * var(--slant) + 1px);
}

/* 上緣：左上→右下 的斜角 */
.latte-footer::before {
  content: "";
  position: absolute;
  inset: 0; /* 佔滿整個區塊 */
  background: linear-gradient(180deg, var(--white), var(--white));
  /* 左上 → 右下 的上緣斜線 */
  clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% var(--slant), 100% 100%, 0 100%);
  z-index: 0;
}

/* 內容層 */
.latte-footer__inner {
  position: relative;
  z-index: 1;
  padding: 96px 5vw; /* 依需要調整 */
}

/* 右上角傢俱圖：預設寬度、投影、不可點擊 */
.latte-footer__obj {
  --obj-w: min(40vw, 560px); /* 圖片寬度 */
  --obj-top: clamp(12px, calc(var(--slant) * 0.18), 120px); /* 與斜緣距離 */
  position: absolute;
  right: clamp(12px, 2.5vw, 48px);
  top: var(--obj-top);
  width: var(--obj-w);
  height: auto;
  z-index: 2; /* 高於背景與內容 */
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18));
}

/* 若怕被文字蓋到，可替內文多一點上內距 */
.latte-footer__inner {
  padding-top: max(30px, calc(var(--slant) * 0.9));
}

@media (min-width: 992px) {
  .latte-footer__inner {
    --stack-lift: 50px;
    padding-top: calc(max(20px, var(--slant) * 0.9) - var(--stack-lift));
    margin-top: calc(-1 * var(--stack-lift));
  }
  .latte-footer__obj {
    top: calc(var(--obj-top) - 150px);
    right: 0px;
  }
}

@media (max-width: 991px) {
  :root {
    --slant: 14vw;
  } /* 手機讓斜角更明顯 */
  .latte-footer__inner {
    padding: 72px 6vw;
  }
  .latte-footer__obj {
    position: static;
    display: block;
    width: min(82vw, 520px);
    margin: 16px auto 0;
  }
}

/*end footer section */

.hero-about {
  min-height: 70vh; /* 區塊高度 */
  padding: 80px 0; /* 上下留白 */
  background-image: url("../images/chair.png");
  background-repeat: no-repeat;
  background-size: 20% auto;
  background-position: left;
  position: relative;
}

.hero-scenc {
  min-height: 60vh; /* 區塊高度 */
  padding: 80px 0; /* 上下留白 */
}

/*about section */
/* 配色（木質、低飽和） */
.mics-typo {
  /*--bg: #f7f4ef;*/
  --ink: #2a2a2a;
  --m: #6e8aa6;
  --i: #6b8f5a;
  --c: #7a5f31;
  --s: #a96558;
  background: var(--bg);
  color: var(--ink);
  padding: 60px 0;
  --glass-bg: rgba(255, 255, 255, 0.2); /* 玻璃底色 */
  --glass-blur: 12px; /* 模糊量 */
  --glass-edge: rgba(255, 255, 255, 0.45); /* 邊緣高光 */
  --glass-stroke: rgba(255, 255, 255, 0.25); /* 內描邊 */
  --shadow: 0 12px 26px rgba(67, 55, 41, 0.14); /* 柔和投影 */
  /* 可選：極淡木紋底 */
  /* background: var(--bg) url('/assets/img/tex/paper.jpg') center/900px repeat; */
}

.mics-typo .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 22px;
}

.mics-typo .tile {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #e5ded3;
  background: var(--glass-bg);
  border: 1px solid rgba(229, 222, 211, 0.6); /* 原本的米色邊框再透明點 */
  box-shadow: var(--shadow), /* 外投影 */ inset 0 1px 0 var(--glass-edge),
    /* 上緣高光 */ inset 0 0 0 1px var(--glass-stroke); /* 內描邊 */
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1) contrast(1.02);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1) contrast(1.02);
  padding: 22px 20px;
  isolation: isolate;
}

/* 巨型字母水印 */
.mics-typo .tile::before {
  content: attr(data-letter);
  position: absolute;
  inset: auto 0 -18px 0; /* 靠底邊 */
  margin: auto;
  text-align: center;
  z-index: -1;
  font-weight: 900;
  line-height: 1;
  font-size: clamp(120px, 18vw, 220px);
  opacity: 0.8; /* 原本 0.25 -> 略降 */
  color: color-mix(in oklab, currentColor 18%, white 82%);
  pointer-events: none;
}

/* 光澤層（不擋互動） */
.mics-typo .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* 角落高光與柔霧過渡，保持文字可讀性 */
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.25) 14%,
    rgba(255, 255, 255, 0.08) 32%,
    rgba(255, 255, 255, 0) 52%
  );
  /* 只在上半區域較明顯 */
  mask: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* 文字 */
.mics-typo h3 {
  margin: 0 0 6px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

.mics-typo h3 small {
  margin-left: 0.4em;
  font-weight: 600;
  opacity: 0.7;
}

.mics-typo p {
  margin: 0;
  opacity: 0.85;
  font-weight: 500;
}

/* 單塊主色（只影響水印顏）；前景文字仍用 --ink */
.mics-typo .m {
  color: var(--m);
}

.mics-typo .i {
  color: var(--i);
}

.mics-typo .c {
  color: var(--c);
}

.mics-typo .s {
  color: var(--s);
}

/* 微互動 */
.mics-typo .tile {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mics-typo .tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(67, 55, 41, 0.18);
  backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.1)
    contrast(1.03);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 2px)) saturate(1.1)
    contrast(1.03);
}

/* 沒有 backdrop-filter 的瀏覽器：給較實的底色做優雅降級 */
@supports not (
  (backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))
) {
  .mics-typo .tile {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 22px rgba(67, 55, 41, 0.12);
  }
}

/* RWD：手機直排 */
@media (max-width: 991.98px) {
  .mics-typo .grid {
    grid-template-columns: 1fr;
  }
}

/*category 的排列方式 */

/* 兩欄 Masonry：純 CSS columns，不用 JS、不吃 Isotope */
/* 調整整體兩欄 masonry（columns 版） */
.mics-masonry {
  display: block !important;
  column-count: 2;
  column-gap: 40px;
}

/* 每個項目在欄內不得被切開 */
.mics-masonry > li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  width: auto !important;
  margin: 0 0 40px;
  float: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

.mics-masonry > .grid-sizer {
  display: none !important;
}

/* ===== 左欄抬頭樣式 ===== */
.mics-masonry .col-heading {
  /* 控制要把左欄往下推多少：數值越大，兩張圖越往下 */
  --left-offset: 120px; /* 你要多推就加大這個值，例如 160px */
  height: var(--left-offset);
  margin-bottom: 40px;
  text-align: left !important;
  display: flex;
  align-items: flex-end; /* 文字靠區塊底部 */
  color: #222;
}

.mics-masonry .col-heading .category-label {
  font: 700 clamp(14px, 2.5vw, 24px) / 1 "Montserrat", "Noto Sans TC",
    sans-serif;
  letter-spacing: 0.06em;
  position: relative;
  padding-bottom: 8px;
}

/* 小裝飾線（可拿掉） */
.mics-masonry .col-heading .category-label::after {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  background: currentColor;
  margin-top: 10px;
}

/* 圖片鋪滿 */
.mics-masonry .category-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 992px) {
  /* 可調高度 */
  .mics-typo .tile.i,
  .mics-typo .tile.s {
    margin-top: 0 !important;
    position: relative;
    z-index: 2; /* 保證陰影在上層 */
  }

  /* 定義每張卡片的「靜態抬升量」 */
  .mics-typo .tile {
    --static-lift: 0px;
  }

  /* Innovative 往上（依你現在想要的數值填）*/
  .mics-typo .tile.i {
    --static-lift: 40px;
  }

  /* Simple 往上但小一點，避免黏住 */
  .mics-typo .tile.s {
    --static-lift: 35px;
  }

  /* 應用位移：不影響排版高度 */
  .mics-typo .tile {
    transform: translateY(calc(-1 * var(--static-lift)));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }

  /* 保留你的 hover 效果，和靜態位移相加 */
  .mics-typo .tile:hover {
    transform: translateY(calc((-1 * var(--static-lift)) - 3px));
  }

  .mics-masonry .col-heading {
    --left-offset: 160px;
  }

  .mics-masonry .col-heading .category-label {
    position: relative;
    font-family: "Bodoni Moda", "Playfair Display", "Didot", "Times New Roman",
      serif;
    font-weight: 700;
    font-size: clamp(40px, 4.4vw, 80px); /* 大！ */
    line-height: 0.88;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: #222;
    padding-bottom: 10px;
  }

  .mics-masonry .col-heading .category-label::before {
    content: "C"; /* 水印字，可改 */
    position: absolute;
    left: -0.06em; /* 微微外凸更有設計感 */
    top: -0.35em;
    font: inherit;
    font-size: 2.6em; /* 2.6 倍於主字 */
    color: rgba(176, 138, 70, 0.12); /* 淺拿鐵金色感 */
    z-index: -1;
    pointer-events: none;
  }

  .mics-masonry .col-heading .category-label::after {
    content: "";
    display: block;
    width: 72px;
    height: 5px;
    background: currentColor;
    margin-top: 16px;
  }
}

/* 手機：單欄時抬頭就當一般標題用 */
@media (max-width: 991.98px) {
  .mics-typo .tile {
    --static-lift: 0px;
    transform: translateY(0);
  }
  .mics-masonry {
    column-count: 1;
    column-gap: 24px;
  }
  .mics-masonry > li {
    margin-bottom: 24px;
  }
  .mics-masonry .col-heading {
    --left-offset: 0px;
    height: auto;
    align-items: center;
    margin-bottom: 12px;
  }
  .mics-masonry .col-heading .category-label {
    font-size: clamp(26px, 7.2vw, 42px);
    line-height: 0.8;
    padding-bottom: 4px;
    letter-spacing: 0.02em;
  }
  .mics-masonry .col-heading .category-label::after {
    margin-top: 6px;
    height: 3px;
    width: 56px;
  }
}

@media (max-width: 575.98px) {
  .mics-masonry .col-heading .category-label {
    font-size: clamp(24px, 8.8vw, 38px);
  }
}
/* end category 的排列方式 */

/* footer info */
/* 讓文字不被右上傢俱壓到：右側預留空間；小螢幕會自動回歸 0 */
.latte-footer .footer-stack {
  max-width: none; /* 取消 980px 限制 */
  width: 100%;
}

@media (min-width: 991px) {
  .latte-footer__inner.container-lg {
    --bs-gutter-x: 0;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 如果你之前有為文字預留右側空間，順便清掉 */
  .latte-footer .footer-stack {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* 標題：雜誌感放大、字距拉開 */
.latte-footer .footer-stack__title {
  font-family: "Bodoni Moda", "Playfair Display", "Noto Sans TC", serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(32px, 5.2vw, 60px);
  letter-spacing: 0.04em;
  margin-bottom: 16px;
  line-height: 1.05;
  color: rgba(0, 0, 0, 0.72);
}

/* 地址行 */
.latte-footer .footer-stack__addr {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.7);
}

/* 列表：使用 grid 對齊「標籤 : 內容」 */
.latte-footer .footer-stack__list {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  row-gap: 18px;
  font-size: clamp(15px, 1.5vw, 18px);
  row-gap: 14px;
  column-gap: 12px;
  color: rgba(0, 0, 0, 0.75);
}

.latte-footer .footer-stack__list dt {
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  color: rgba(0, 0, 0, 0.65);
}

.latte-footer .footer-stack__list dd {
  margin: 0;
}

.latte-footer .footer-stack__list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.latte-footer .footer-stack__list a:hover {
  border-bottom-color: rgba(0, 0, 0, 0.35);
}

.latte-footer .footer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(18px, 3vw, 36px);
  padding: 18px 0 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.1); /* 與上方區隔 */
  position: relative;
  z-index: 1;
}

.latte-footer .copyright {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}

/* 快速連結：一行並排、細底線 hover */
.latte-footer .quick-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.latte-footer .quick-links a {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.75);
  text-decoration: none;
  position: relative;
}

.latte-footer .quick-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.25s ease;
}

.latte-footer .quick-links a:hover::after {
  width: 100%;
}

/* 手機：置中、間距縮小 */
@media (max-width: 991.98px) {
  .latte-footer .footer-stack {
    padding-right: 0;
  }
  .latte-footer .footer-stack__title {
    font-size: clamp(34px, 9vw, 56px);
  }
  .latte-footer .footer-meta {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  .latte-footer .quick-links {
    justify-content: center;
    gap: 14px;
  }
}

/* === Footer 降高度：覆寫（直接貼在檔案最後） === */
.latte-footer__inner {
  padding-bottom: 0 !important; /* 整體底內距歸零 */
}

/* 版權＋快速連結列：上下更緊 */
.latte-footer .footer-meta {
  /*margin-top: 15px !important;*/
  padding: 6px 0 0 !important; /* 取消底部 padding */
}

/* 若仍有舊結構的 footer-bottom（主題類別） */
.latte-footer .footer-bottom {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* 移除列表/段落的預設下外距，避免撐高 */
.latte-footer .quick-links,
.latte-footer .quick-links li,
.latte-footer .quick-links a,
.latte-footer .copyright,
.latte-footer p,
.latte-footer ul {
  margin-bottom: 0 !important;
}

/* 小螢幕同樣緊湊 */
@media (max-width: 991.98px) {
  .latte-footer__inner {
    padding-bottom: 0 !important;
  }
  .latte-footer .footer-meta {
    padding: 6px 0 0 !important;
  }
}

/* header 半透明*/
/* Glassy dark navbar on top of hero */
.navbar.nav-glass-dark {
  background-color: rgba(
    130,
    130,
    130,
    0.3
  ) !important; /* 半透明黑，蓋過 bg-transparent */
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.25s ease, box-shadow 0.25s ease,
    color 0.25s ease;
}

/* 互動時稍微更深一點 */
.navbar.nav-glass-dark:hover {
  background-color: rgba(130, 130, 130, 0.3) !important;
}

/* 文字／圖示維持白色 */
.navbar.nav-glass-dark .nav-link,
.navbar.nav-glass-dark .icon > a,
.navbar.nav-glass-dark .navbar-toggler,
.navbar.nav-glass-dark .navbar-toggler-icon {
  /*color: #fff !important;
  fill: #fff !important;*/

  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 2px rgba(0, 0, 0, 0.4);
}

/* Sticky 或出現 header-appear 時改為白底＋淺陰影（延續你原本需求） */
header.sticky.sticky-active .navbar.nav-glass-dark,
header.header-appear .navbar.nav-glass-dark {
  background-color: #fff !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
header.sticky.sticky-active .navbar.nav-glass-dark .nav-link,
header.header-appear .navbar.nav-glass-dark .nav-link,
header.sticky.sticky-active .navbar.nav-glass-dark .icon > a,
header.header-appear .navbar.nav-glass-dark .icon > a {
  color: var(--dark-gray) !important;
}

/* 手機展開選單的底也用半透明黑，避免看不清楚 */
@media (max-width: 991.98px) {
  .navbar.nav-glass-dark .navbar-collapse {
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* 1) 斜角背景不擋點擊 */
  .latte-slant::before,
  .latte-slant::after {
    pointer-events: none !important;
  }

  /* 2) 讓 header 維持覆蓋在最上層（不改它原本 position 型態） */
  header {
    /* 保持你主題原本的 absolute/sticky/fixed，不強制改 relative */
    z-index: 1000; /* 只提高層級即可 */
  }

  /* Bootstrap 的 .navbar 本來就是 position: relative；只要拉高層級即可 */
  header .navbar {
    z-index: 1001; /* 確保漢堡可點擊 */
  }

  /* 3) 如果主題有插入 header 佔位用的空白（避免 sticky 跳動），把它收掉 */
  .header-space,
  .header-placeholder,
  .header-height {
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/*-------------index_1 的css -------------------------*/
/* --- catv1：徹底關掉 Masonry 的影響 + 壓低高度 --- */
/* ========== catv1：左右直長 + 中上/中下正方，中下再突出 ========== */

/* 1) Grid 容器：改用 auto 列 + overhang 列，只讓中下使用 */
.catv1 .catv1__grid {
  /* 可調參數 */
  --catv1-gap: 24px; /* 欄距 */
  --catv1-offset: 36px; /* 中間兩塊整體往下的量 */
  --catv1-overhang: 60px; /* 中下方「突出」高度 */

  /* 清掉 Masonry 影響 + 設 Grid */
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: var(--catv1-offset) auto auto var(--catv1-overhang);
  gap: var(--catv1-gap);
  align-items: stretch;
  list-style: none;
}
/* Masonry 給 item 的定位全部清掉 */
.catv1 .catv1__grid > .grid-item {
  position: static !important;
  float: none !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  width: auto !important;
  transform: none !important;
}
.catv1 .catv1__grid > .grid-sizer {
  display: none !important;
}

/* 2) 位置：左右跨 1~3 列；中上列 2；中下跨 3~4（用 overhang 突出） */
.catv1 .catv1__slot--left {
  grid-column: 1;
  grid-row: 1 / 4;
}
.catv1 .catv1__slot--right {
  grid-column: 3;
  grid-row: 1 / 4;
}
.catv1 .catv1__slot--mid-top {
  grid-column: 2;
  grid-row: 2;
}
.catv1 .catv1__slot--mid-btm {
  grid-column: 2;
  grid-row: 3 / 5;
}

/* 3) 正方形關鍵：讓中上/中下的盒子依寬度自動成 1:1 */
.catv1 .catv1__slot--mid-top .category-box,
.catv1 .catv1__slot--mid-btm .category-box {
  aspect-ratio: 1 / 1; /* ← 正方形 */
  height: auto; /* 由寬度決定高度 */
}

/* 4) 讓卡片充滿格線、圖片不拉伸 */
.catv1 .grid-item .category-box {
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.catv1 .grid-item .category-image,
.catv1 .grid-item .category-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 不需要「Choice」那格就隱藏 */
.catv1 .col-heading {
  display: none !important;
}

/* 5) RWD：平板 2 欄（移除突出），手機單欄 */
@media (max-width: 991.98px) {
  .catv1 .catv1__grid {
    --catv1-offset: 0px;
    --catv1-overhang: 0px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  .catv1 .catv1__slot--left {
    grid-column: 1;
    grid-row: 1 / span 2;
  }
  .catv1 .catv1__slot--right {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .catv1 .catv1__slot--mid-top {
    grid-column: 1;
    grid-row: 2;
  }
  .catv1 .catv1__slot--mid-btm {
    grid-column: 2;
    grid-row: 2;
  }
}
@media (max-width: 575.98px) {
  .catv1 .catv1__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .catv1 .catv1__slot--left,
  .catv1 .catv1__slot--right,
  .catv1 .catv1__slot--mid-top,
  .catv1 .catv1__slot--mid-btm {
    grid-column: auto;
    grid-row: auto;
  }
}

/* --------  mics --------------  */
/* 保險：容器維持在上層 */
/* ===== Compact Bubbles – 保底版（貼在最底部）===== */

/* === 讓每一塊的外框一定吃到你的木頭圖片（覆蓋版） === */
/* === MICS 木紋相框：修正跑版 + 兩欄固定 + 強制木紋 === */

/* 容器：兩欄兩列 */
.compact-bubbles.frame-mode {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  column-gap: clamp(22px, 5vw, 60px);
  row-gap: clamp(12px, 3vw, 28px);
  place-items: center; /* 讓較窄的相框置中 */
}

/* 相框本體*/
.frame-mode .glass-bubble {
  --w: clamp(200px, 25vw, 300px);
  width: var(--w) !important; /* ← 關鍵：不要被 width:100% 蓋掉 */
  height: auto !important;
  aspect-ratio: 5 / 3 !important; /* 橫式長方 */
  justify-self: center !important;

  /* 清掉舊泡泡樣式 */
  background: transparent !important;
  border: none !important;
  border-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;

  position: relative;
  border-radius: 14px;
  padding: clamp(12px, 1.6vw, 16px);
  overflow: visible;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* 外框木紋：只用你的圖片（不再混合其他漸層） */
.frame-mode .glass-bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background-image: var(--woodImg) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-blend-mode: normal !important;
  z-index: 0;
}

/* 內層卡紙 */
.frame-mode .glass-bubble::after {
  content: "";
  position: absolute;
  inset: 10px; /* 木框寬度，可調 */
  border-radius: 10px;
  background: #fffdf7;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 16px 22px rgba(0, 0, 0, 0.05),
    inset 0 -10px 16px rgba(0, 0, 0, 0.04);
  z-index: 1;
}

/* 內容疊在最上 */
.frame-mode .glass-bubble > * {
  position: relative;
  z-index: 2;
}

/* 大字跟框色 */
.frame-mode .bubble-icon {
  color: var(--frame, #8a6b4b) !important;
  font-size: clamp(36px, calc(var(--w) * 0.2), 64px);
  line-height: 1;
  margin-bottom: 6px;
  background: none !important;
}

.frame-mode .bubble-icon,
.frame-mode .bubble-title,
.frame-mode .bubble-subtitle {
  padding-left: 20px;
}
/* —— 確保四塊一定用你的木紋圖片（避免被舊的 --woodImg:none 覆蓋） —— */
.frame-mode .bubble-1 {
  --woodImg: url("../images/wood.jpg") !important;
  --frame: #b3885a !important;
  --r0: -0.6deg;
}
.frame-mode .bubble-2 {
  --woodImg: url("../images/wood.jpg") !important;
  --frame: #8a6b4b !important;
  --r0: 0.6deg;
}
.frame-mode .bubble-3 {
  --woodImg: url("../images/wood.jpg") !important;
  --frame: #a96e53 !important;
  --r0: -0.4deg;
}
.frame-mode .bubble-4 {
  --woodImg: url("../images/wood.jpg") !important;
  --frame: #c49a6a !important;
  --r0: 0.8deg;
}

/* 手機單欄 */
@media (max-width: 650px) {
  .compact-bubbles.frame-mode {
    grid-template-columns: 1fr !important;
    row-gap: 18px;
  }
  .frame-mode .glass-bubble {
    --w: clamp(220px, 74vw, 300px);
    aspect-ratio: 7 / 4 !important;
  }
  .mt-xs-3 {
    margin-top: 0.8rem !important;
  }
}

/* I 與 S 往上提高（桌機） */
@media (min-width: 651px) {
  .frame-mode .bubble-2,
  .frame-mode .bubble-4 {
    position: relative;
    top: -28px; /* 需要更高就改成 -32px、-36px… */
  }
}