/* ======================
   Header 區塊：桌機/平板
   ====================== */
/* 只針對 header 區塊內的 carousel 做覆蓋 */
.header_section .carousel .banner_img { 

}

.header_section .carousel .banner_img img {
  width: 100%;
  height: auto;        /* 讓圖片維持比例 */
  object-fit: contain; /* 不裁切（也可乾脆拿掉 object-fit） */
  display: block;
}


/* 清除浮動保險（若內部有 float） */
.header_section::after {
  content: "";
  display: table;
  clear: both;
}

/* 白底分隔線 */
.header_bg {
  background-color: #ffffff;     /* ⚠️ 僅用 background-color，避免用 background 縮寫清掉背景 */
  border-bottom: 1px solid #AE0606;
}

/* 避免與 Bootstrap flex 互撞，高度異常 */
.navbar-brand {
  margin: 0;
  float: none;
}

/*---------------------------------------------------------------------
 File Name: style.css
---------------------------------------------------------------------*/

/*---------------------------------------------------------------------
 import Files
---------------------------------------------------------------------*/
@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(css/font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);

/*---------------------------------------------------------------------
 skeleton
---------------------------------------------------------------------*/
* {
  box-sizing: border-box !important;
  transition: ease all 0.5s;
}

html { scroll-behavior: smooth; }

body {
  color: #666666;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
  line-height: 1.80857;
  font-weight: normal;
  overflow-x: hidden;
}

a {
  color: #1f1f1f;
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0;
  font-weight: normal;
  position: relative;
  padding: 0 0 10px 0;
  line-height: normal;
  color: #111111;
  margin: 0;
}

h1 { font-size: 24px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 13px; }

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #212121;
  text-decoration: none!important;
  opacity: 1;
}

button:focus { outline: none; }

ul, li, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 20px;
  font-weight: 300;
  font-size: 15px;
  line-height: 24px;
}

a { color: #222222; text-decoration: none; outline: none !important; }

a, .btn {
  text-decoration: none !important;
  outline: none !important;
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

img { max-width: 100%; height: auto; }

:focus { outline: 0; }

.paddind_bottom_0 { padding-bottom: 0 !important; }

.btn-custom {
  margin-top: 20px;
  background-color: transparent !important;
  border: 2px solid #ddd;
  padding: 12px 40px;
  font-size: 16px;
}

.lead {
  font-size: 18px;
  line-height: 30px;
  color: #767676;
  margin: 0;
  padding: 0;
}

.form-control:focus {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input { border: none !important; }

.badge { font-weight: 500; }

blockquote { margin: 20px 0; padding: 30px; }

button {
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}

.full { float: left; width: 100%; }

.layout_padding { padding-top: 0; padding-bottom: 0; }

.padding_0 { padding: 0; }

/* =========================
   Header section (revised)
   ========================= */

/* 若你以前把 .bg-light 設透明，請改回或由下方覆蓋 */
.bg-light { background-color: transparent !important; }

/* Bootstrap 相關 */
-nav .nav-link {
  padding: 3px 15px;
  font-size: 18px;
  color: #222222;
  margin: 0 6px;
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbt .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link { coargin: 0 6px;
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link { color: #AE0606; }
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover { color: #000000; }

/* 登入區 */
.login_bt {}
.login_bt a {
  font-size: 18px;
  color: #222222;
  padding: 0 50px 0 30px;
}
.login_bt a:hover { color: #AE0606; }

/* 搜尋 icon */
.fa.fa-search.form-control-feedback { font-size: 18px; color: #222222; }
.fa.fa-search.form-control-feedback:hover { color: #AE0606; }

/* =========
   手機版
   ========= */
@media (max-width: 767.98px) {
  .header_section {
    background-color: #ffffff;
    background-image: url("../images/banner-bg-mobile.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;  /* 手機也置底 */

  }

  .navbar-brand img { max-height: 40px; }  /* 手機縮小 logo */
}

/* ====== 可選強化：視網膜/高 DPI 圖（有素材再開） ====== */
/*
@media (max-width: 767px) {
  .header_section {
    background-image: image-set(
      url("../images/banner-bg-mobile.png") 1x,
      url("../images/banner-bg-mobile@2x.png") 2x
    );
  }
}
*/

/* banner section start */
.banner_section {
  width: 100%;
  float: left;
  padding: 10px 0 0 0;
}

.banner_taital {
  width: 30%;
  font-size: 60px;
  color: #222222;
  font-weight: bold;
}

.banner_text {
  width: 70%;
  font-size: 16px;
  color: #222222;
  margin: 0;
}

.started_text {
  width: 170px;
  float: left;
  padding-top: 20px;
}

.started_text a {
  width: 100%;
  float: left;
  padding: 8px 10px;
  color: #ffffff;
  background-color: #AE0606;
  text-align: center;
  font-size: 18px;
  border-radius: 5px;
}

.started_text a:hover {
  color: #252525;
  background-color: #faf8f9;
}

.form-group { margin-bottom: 0; }

.carousel-indicators li {
  width: 40px;
  height: 40px;
  color: #252525;
  border: none;
  text-indent: 0;
  padding-top: 25px;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}
.carousel-indicators .active { color: #AE0606; }
.carousel-indicators {
  bottom: -40px;
  justify-content: left;
  margin-right: initial;
  margin-left: 0;
}
/* banner section end */

/* about section start */
.about_section {
  width: 100%;
  float: left;
  padding: 90px 0 0 0;
}

.about_taital {
  width: 80%;
  float: left;
  font-size: 40px;
  color: #373736;
  font-weight: bold;
  padding-top: 120px;
}
.about_taital::after {
  display: none;   /* 取消偽元素 */
}


.about_text {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #373736;
  margin-left: 0;
}

.about_img { width: 100%; float: left; }

.read_bt_1 { width: 180px; float: left; margin-top: 20px; }
.read_bt_1 a {
  width: 100%;
  float: left;
  font-size: 16px;
  text-align: center;
  background-color: #AE0606;
  color: #ffffff;
  padding: 10px 0;
  border-radius: 5px;
  font-weight: bold;
}
.read_bt_1 a:hover { background-color: #1e1e1e; color: #faf8f9; }
/* about section end */

/* cream section start */
.cream_section {
  margin-top: 0;
  padding-top: 30px; /* 原本 90px，縮小時可以縮短 */
}
}
.cream_section::after {
  position: absolute;
  content: '';
  width: 120px;
  height: 140px;
  background-image: url(../images/img-6.png);
  background-size: 100%;
  background-repeat: no-repeat;
  bottom: 80px;
}
.cream_section::before {
  position: absolute;
  content: '';
  width: 120px;
  height: 140px;
  background-image: url(../images/img-6.png);
  background-size: 100%;
  background-repeat: no-repeat;
  top: 180px;
  right: 0;
}

.cream_taital {
  font-size: 40px;
  color: #373736;  /* ← 黑色 */
  font-weight: bold;
}

.cream_text {
  font-size: 16px;
  color: #373736;  /* ← 黑色 */
  margin: 0;
}

.cream_section_2 { width: 100%; float: left; padding-top: 30px; }

.cream_box {
  width: 100%;
  float: left;
  background-image: linear-gradient(0deg, #ffffff 37%, #f2f2f0 37%);
  height: auto;
  padding: 20px;
  box-shadow: 0 0 20px 10px #ededec;
}
.cream_box:hover {
  background-image: linear-gradient(0deg, #ffffff 37%, #faf0c7 37%);
}

.cream_img {
  width: 100%;
  text-align: center;
  padding-bottom: 20px;
  min-height: 210px;
}

.price_text {
  width: 80px;
  margin: 0 auto;
  text-align: center;
  font-size: 24px;
  color: #373736;
  font-weight: bold;
  background: #fff;
  padding: 18px 15px;
  border-radius: 100px;
  font-style: italic;
}

.strawberry_text {
  width: 100%;
  font-size: 22px;
  color: #373736;
  text-align: center;
  font-weight: bold;
}

.cart_bt { width: 150px; margin: 0 auto; text-align: center; padding-top: 10px; }
.cart_bt a {
  width: 100%;
  float: left;
  font-size: 16px;
  text-align: center;
  border: 1px solid #AE0606;
  color: #AE0606;
  padding: 8px 0;
  border-radius: 40px;
}
.cart_bt a:hover {
  border: 1px solid #AE0606;
  color: #373736;
}

.seemore_bt {
  width: 180px;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
  display: flex;
}
.seemore_bt a {
  width: 100%;
  float: left;
  font-size: 16px;
  text-align: center;
  background-color: #AE0606;
  color: #fefefd;
  padding: 10px 0;
  border-radius: 5px;
  font-weight: bold;
}
.seemore_bt a:hover { background-color: #1e1e1e; color: #faf8f9; }
/* cream section end */

/* services section start */
.services_section {
  width: 100%;
  float: left;
  padding: 90px 0 0 0;
  position: relative;
}

.services_taital {
  width: 66%;
  float: left;
  font-size: 40px;
  color: #373736;
  font-weight: bold;
}
.services_taital::after {
  position: absolute;
  content: '';
  width: 80px;
  height: 6px;
  background-color: #ffd6e1;
  bottom: 25px;
  right: 160px;
  border-radius: 4px;
}

/* =========
   Banner 圖片（用 <img> 的情況）
   ========= */
/* 以高度為主：父層給固定高度，圖片 cover 填滿並可裁切 */
/* Banner 圖片容器：上下左右置中 */
.banner_img {
  display: flex;
  justify-content: center;   /* 水平置中 */
  align-items: center;       /* 垂直置中 */

}

/* Banner 圖片：等比縮放、不裁切 */
.banner_img img {
  max-width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767.98px) {
  .banner_img { height: 300px; }   /* 手機高度：以高度為主 */
}

/* 控制文字 */
.services_text {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #373736;
  margin: 0;
}

.services_section_2 {
  width: 100%;
  float: left;
  padding-top: 30px;
}

.services_box {
  width: 100%;
  float: left;
  border: 1px solid #fc9cc8;
  padding: 20px 30px;
  height: auto;
}

.tasty_text {
  width: 100%;
  float: left;
  font-size: 20px;
  color: #373736;
}

.icon_img { padding-right: 15px; }

.lorem_text {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #373736;
  margin: 0;
}
/* services section end */

/* testimonial section start */
.testimonial_section {
  width: 100%;
  float: left;
  padding: 90px 0 100px 0;
  position: relative;
}

.testimonial_taital {
  width: 100%;
  float: left;
  font-size: 40px;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

.testimonial_section_2 {
  width: 100%;
  float: left;
  padding-top: 30px;
  padding-bottom: 75px;
  position: relative;
}

.testimonial_section::after {
  position: absolute;
  content: '';
  width: 120px;
  height: 102px;
  background-image: url(../images/quick-icon.png);
  background-size: 100%;
  left: 40px;
  top: 290px;
}
.testimonial_section::before {
  position: absolute;
  content: '';
  width: 120px;
  height: 102px;
  background-image: url(../images/quick-icon.png);
  background-size: 100%;
  right: 40px;
  top: 290px;
}

.testimonial_box {
  width: 82%;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0 0 20px 10px #ededec;
  padding: 50px 40px 0 40px;
  height: 300px;
}

.testimonial_text {
  width: 100%;
  font-size: 16px;
  color: #343434;
  margin: 0;
  text-align: center;
}

.client_name {
  width: 100%;
  font-size: 20px;
  text-align: center;
  color: #343434;
  font-weight: bold;
  padding-top: 40px;
}

.client_img { width: 100%; text-align: center; margin-top: 10px; }

#main_slider a.carousel-control-next {
  position: absolute;
  right: -63px;
  top: 25%;
}
#main_slider a.carousel-control-prev {
  position: absolute;
  left: -63px;
  top: 25%;
}
#main_slider .carousel-control-prev,
#main_slider .carousel-control-next {
	 display: none !important;
}
  width: 0px;
  height: 0px;
  background-color: #AE0606;
  opacity: 1;
  font-size: 30px;
  color: #ffffff;
}
#main_slider .carousel-control-prev:hover,
#main_slider .carousel-control-next:hover,
#main_sl695ider .carousel-control-prev:focus,
#main_slider .carousel-control-next:focus {
  background-color: #1e1e1e;
  color: #fff;
}
/* testimonial section end */

/* contact section start */
.contact_section {
  width: 100%;
  float: left;
  background-color: #262526;
  height: auto;
  padding: 90px 0;
}

.contact_main { width: 100%; float: left; }

.contact_taital {
  width: 65%;
  float: left;
  font-size: 40px;
  font-weight: bold;
  color: #ffffff;
  border-bottom: 1px solid #ffffff;
}

.form-group { margin-bottom: 30px; }

.email-bt {
  color: #fefefd;
  width: 100%;
  height: 55px;
  font-size: 16px;
  padding: 20px 20px 0 0;
  background-color: transparent !important;
  border-bottom: 1px solid #6d6d6d !important;
  border: 0;
  text-transform: uppercase;
}
input.email-bt::placeholder { color: #fefefd; }

.massage-bt {
  color: #fefefd;
  width: 100%;
  height: 55px;
  font-size: 16px;
  padding: 20px 20px 0 0;
  background-color: transparent !important;
  border-bottom: 1px solid #6d6d6d !important;
  border: 0;
  text-transform: uppercase;
}
textarea#comment::placeholder { color: #fefefd; }

.main_bt { width: 150px; float: left; padding-top: 10px; }
.main_bt a {
  width: 100%;
  float: left;
  color: #fefefd;
  font-size: 16px;
  padding: 10px 0;
  background-color: #AE0606;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}
.main_bt a:hover { color: #252525; background-color: #ffffff; }

.location_text { width: 100%; float: left; }
.location_text ul { margin: 0; padding: 0; float: right; }
.location_text li {
  float: left;
  font-size: 16px;
  color: #ffffff;
  padding: 0 7px 0 16px;
}
.location_text li a { color: #ffffff; }
.location_text li a:hover { color: #ffffff; }

.padding_left_10 {
  font-size: 30px;
  color: #ffffff;
  padding-right: 10px;
  position: relative;
  top: 4px;
}
.padding_left_10:hover { color: #AE0606; }
.padding_left_10.active { color: #AE0606; }

.footer_social_icon {
  width: 100%;
  float: right;
  padding-top: 20px;
  text-align: right;
}
.footer_social_icon ul { margin: 0; padding: 0; display: inline-block; }
.footer_social_icon li { float: left; }
.footer_social_icon li a {
  float: left;
  padding: 5px 10px;
  background-color: #fff;
  color: #252525;
  border-radius: 100%;
  font-size: 19px;
  margin-left: 15px;
  width: 44px;
  text-align: center;
  margin-top: 10px;
}
.footer_social_icon li a:hover { background-color: #AE0606; color: #ffffff; }

.mail_main { width: 70%; float: right; }

.newsletter_text {
  width: 100%;
  float: left;
  font-size: 20px;
  color: #ffffff;
  font-weight: 500;
  margin-top: 130px;
}

.form-group {
  margin-bottom: 1rem;
  display: flex;
  width: 100%;
  float: left;
}

.update_mail {
  color: #444444;
  width: 100%;
  height: 55px;
  font-size: 16px;
  padding: 13px 10px 0 10px;
  background-color: #ffffff;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  display: block;
  margin-top: 10px;
  border: 0;
  text-transform: uppercase;
}
textarea#comment.update_mail::placeholder { color: #444444; }

.subscribe_bt { width: 170px; float: left; padding-top: 10px; }
.subscribe_bt a {
  width: 100%;
  float: left;
  color: #ffffff;
  font-size: 16px;
  padding: 13px 0 14px 0;
  background-color: #AE0606;
  text-align: center;
  text-transform: uppercase;
}
.subscribe_bt a:hover { color: #363636; background-color: #ffffff; }
/* contact section end */

/* copyright section start */
.copyright_section {
  width: 100%;
  float: left;
  background-color: #262526;
  height: auto;
}

.copyright_text {
  width: 100%;
  float: left;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  margin-left: 0;
}
.copyright_text a { color: #ffffff; }
.copyright_text a:hover { color: #AE0606; }
/* copyright section end */

.margin_top90 { margin-top: 90px; }

/* ====== 手機微調：避免視覺誤會「沒貼底」 ====== */
@media (max-width: 767.98px) {
  .banner_section { padding-top: 0; padding-bottom: 0; margin-bottom: 0; }
  .cream_section { margin-top: 0; padding-top: 5px; }  /* 原 90px 對手機太高，縮小 */
}

/* 避免 Bootstrap 影響（保險再加一次） */
.navbar-brand { margin: 0; float: none; }

/* =========================
   固定導覽列（整合成一份，不重複）
   ========================= */
.navbar {
  position: fixed;            /* 固定定位 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;              /* 保證在其他內容之上 */
  background: #ffffff;        /* 固定後白底，避免透明 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* 內容往下推，避免被固定導覽列擋住 */
body { padding-top: 80px; }           /* 桌機估 80px */
@media (max-width: 991.98px) {
  body { padding-top: 64px; }         /* 手機估 64px */
}

/* 統一保證 navbar 白底（若你曾把 .bg-light 設透明） */
.navbar.bg-light,
.navbar.bg-white { background-color: #ffffff !important; }



@media (max-width: 767.98px) {
  .banner_section {
    padding: 0 !important;
    margin: 0 !important;
  }
}



.container {
  padding-left: 0;
  padding-right: 0;
  margin-right: auto;
  margin-left: auto;
}





/* === About 區塊 RWD 排序（修：手機置頂） === */
.about-row {
  display: flex;
  flex-direction: column;       /* 手機直排 */
  justify-content: flex-start;  /* 手機：主軸(垂直)置頂 */
  align-items: stretch;         /* 橫向撐滿，避免被置中 */
}

/* 手機：圖片在上、文字在下 */
.about-col-img  { order: 1; }
.about-col-text { order: 2; }

/* 圖片元素本身不要被置中/留白 */
.about-col-img img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;                    /* 防止被外部樣式置中 */
}

/* 平板以上：水平排列 → 左圖右文 */
@media (min-width: 768px) {
  .about-row {
    flex-direction: row;        /* 改成水平 */
    align-items: flex-start;    /* 兩欄頂對齊（若想垂直置中就改 center） */
    justify-content: flex-start;
    gap: 24px;                  /* 可選：欄間距 */
  }
  .about-col-img,
  .about-col-text {
    flex: 1 1 50%;              /* 兩邊平均分 */
    min-width: 0;               /* 防止內容撐爆 */
  }
  .about-col-img  { order: 1; }
  .about-col-text { order: 2; }
}

/* 若父層或框架有 .align-items-center 等類別，這裡強制覆蓋 */
.about-row,
.about-col-img,
.about-col-text {
  align-items: stretch !important;
}



/* 手機給左右 16px 的安全留白 */
@media (max-width: 767.98px) {
  .mobile-safe-gap {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
}


























/* 基礎樣式 */
.menu { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", sans-serif; }
.menu-root { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; }
.menu-item { position: relative; }

/* 主連結 */
.menu-link {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #ddd;
  cursor: pointer;
  user-select: none;
}
.menu-link:hover { background: #f7f7f7; }

/* 子選單外觀 */
.submenu {
  position: absolute;
  left: 0; top: calc(100% + 8px);
  min-width: 180px;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  display: none;
  z-index: 10;
}
.submenu a {
  display: block;
  padding: 10px 12px;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
}
.submenu a:hover { background: #f2f4f7; }

/* 手機：用 checkbox 控制展開 */
.menu-toggle { display: none; }
.menu-toggle:checked ~ .submenu { display: block; }

/* 桌機：用 hover 展開。隱藏為桌機準備的 duplicate 連結/label 控制衝突 */
@media (hover: hover) and (pointer: fine) {
  .menu-item:hover > .submenu { display: block; }
  .menu-item .menu-link { display: none; }        /* 手機用 label 在桌機隱藏 */
  .menu-item .desktop-link { display: inline-block; }
}

/* 手機：只顯示 label（可點展開），隱藏桌機用的超連結 */
@media (hover: none), (pointer: coarse) {
  .menu-item .desktop-link { display: none; }
}

/* RWD 保險：小螢幕時主選單佈局可改為直排 */
@media (max-width: 767.98px) {
  .menu-root { gap: 12px; }
}





/* === 只在 body.page-black 的頁面生效 === */
.page-black { 
  background:#000; 
  color:#eaeaea; 
}

/* 導覽列：固定白底黑字（桌機 + 手機縮小都適用） */
.page-black .navbar { 
  background:#fff !important; 
}
.page-black .navbar .nav-link { 
  color:#000 !important; 
}
.page-black .navbar .nav-link:hover { 
  color:#ffcc00 !important; 
}

/* 手機展開選單（.navbar-collapse）強制白底 */
.page-black .navbar-collapse {
  background:#fff;
}

/* 手機漢堡按鈕：黑色線條 + 灰色邊框 */
.page-black .navbar-light .navbar-toggler {
  border-color: rgba(0,0,0,0.0);
}
.page-black .navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280,0,0,0.8%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Hero 區塊 */
.page-black .header_section { 
  position:relative; 
  background-color:#000; 
}
.page-black .header_section::before {
  content:""; 
  position:absolute; 
  inset:0; 
  background:rgba(0,0,0,0); 
  pointer-events:none;
}

/* 區塊底色（保留白底，符合你之前的設定） */
.page-black .cream_section,
.page-black .testimonial_section,
.page-black .copyright_section { 
  background:#000; 
}

/* 商品卡片：深色化 */
.page-black .cream_box {
  background:#111; 
  border:1px solid #222; 
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.35); 
  color:#f0f0f0;
}
.page-black .strawberry_text,
.page-black .price_text { 
  color:#ee2d24; 
}

/* 購物車按鈕 */
.page-black .cart_bt a {
  display:inline-block; 
  background:#ffcc00; 
  color:#000 !important;
  padding:8px 14px; 
  border-radius:6px; 
  text-decoration:none; 
  transition:.2s;
}
.page-black .cart_bt a:hover { 
  filter:brightness(.9); 
}

/* 文字鏈結色 */
.page-black a { color:#9ecfff; }
.page-black a:hover { color:#c7e2ff; }

/* 全集數選單：白底黑字 */
.page-black .menu-root { 
  background:#000; 
}
.page-black .menu-link, 
.page-black .desktop-link { 
  color:#000; 
}
.page-black .menu-link:hover, 
.page-black .desktop-link:hover { 
  background:#222; 
  color:#ffcc00; 
}

/* 輪播左右箭頭 */
.page-black .carousel-control-prev .fa,
.page-black .carousel-control-next .fa { 
  color:#fff; 
  text-shadow:0 2px 6px rgba(0,0,0,.6); 
}

/* 手機安全留白 */
.page-black .mobile-safe-gap { 
  padding-left:16px !important; 
  padding-right:16px !important; 
}

/* 白色邊框與分隔線 */
.page-black hr, 
.page-black .border, 
.page-black .testimonial_box { 
  border-color:#222 !important; 
}

/* 版權字色 */
.page-black .copyright_text { 
  color:#bdbdbd; 
}






/* 手機：讓 banner 圖片靠底，移除多餘間距 */
@media (max-width: 767.98px) {
  /* 1) 移除區塊本身的上/下 padding */
  .header_section .banner_section,
  .banner_section.layout_padding {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* 2) 清掉 container/row/col 造成的左右內距（避免看起來有空隙） */
  .header_section .container { padding-left: 0; padding-right: 0; }
  .header_section .row { margin-left: 0; margin-right: 0; }
  .header_section [class*="col-"] { padding-left: 0; padding-right: 0; }

  /* 3) 圖片容器：靠底對齊，不要被固定高度撐高 */
  .banner_img {
    display: flex;
    justify-content: center;     /* 水平置中 */
    align-items: flex-end;       /* 垂直靠底 */
    min-height: 220px;           /* 可依需要調小/調大，或設為 auto */
    height: auto;
  }

  /* 4) 圖片：等比縮放，移除 inline 空隙 */
  .banner_img img {
    display: block;
    width: 100%;
    height: auto;
  }
}





/* 讓整個選單容器置中 */
.menu { 
  display: flex; 
  justify-content: center; 
}

/* 根節點與項目都用 flex，內容置中 */
.menu-root{
  display:flex;
  justify-content:center;          /* 水平置中 */
  padding:0;
  margin:0 auto;                    /* 保險：本身也置中 */
  list-style:none;
  width:100%;
}
.menu-item{
  display:flex;
  justify-content:center;          /* 把裡面的 label + a 都置中 */
  align-items:center;
  flex-wrap:wrap;                   /* 太多自動換行仍維持置中 */
  gap:8px;                          /* 元件間距 */
  width:100%;                       /* 讓置中生效在整行 */
}

/* 每個按鈕外觀（可調） */
.menu-link{
  display:inline-block;
  padding:8px 16px;
  background:#fff;
  border:1px solid #ddd;
  border-radius:6px;
  color:#000;
  text-decoration:none;
}
.menu-link:hover{ background:#222; color:#ffcc00; }

/* 如果你希望手機只顯示「骷髏13全集數選單」那顆，再展開清單，則加： */
/* 手機：隱藏桌機連結，只顯示 label */
@media (max-width: 767.98px){
  .desktop-link{ display:none; }
}

/* 桌機：隱藏手機用 label（想同時顯示就刪掉這段） */
@media (min-width: 768px){
  label.menu-link{ display:none; }
}

.info{
    font-size:13pt;
}

.fbclass {
    margin: 4px;
    width: 35px;
}

.shopicon {
    width: 95%;
}

.bigh1{
    font-size:2em;


}

.nav-link{
    font-size:1.5em;
}

 .separator

{
    width: 100%; /* 設定寬度為 100% */
    height: 1px; /* 設定高度，如果需要可略 */
    border-top: 1px solid gray; /* 設定黑色 1px 的頂部邊框 */
}

.bgblack {
    background-color: black;
}

.boxrad {
    border-radius: 8px;
}

.spplogo{
    width:100px;
}

.disabled-link {
    opacity: 0.5; /* 讓連結變灰 */
    pointer-events: none; /* 禁用點擊事件 */
    text-decoration: none; /* 移除底線，如果需要 */
    color: gray; /* 設定為灰色文字 */
}