/* ============================================================
   繆式髮藝沙龍 — 韓系風格配色
   改用霧感豆沙粉 x 燕麥米白 x 溫潤墨棕，取代原本偏西式/男性理髮廳的
   金棕色調，並讓照片統一套用柔霧色調濾鏡，呈現韓系美容工作室常見的
   低對比、暖白、粉霧質感。
   ============================================================ */

:root{
  --salon-ink: #3a332f;
  --salon-ink-soft: #8a7d76;
  --salon-gold: #c99a8b;
  --salon-gold-dark: #a97361;
  --salon-gold-light: #f3ddd3;
  --salon-cream: #faf5f1;
  --salon-line: #ece1da;
}

/* ---------- 導覽列：質感與流動感 ---------- */
.navbar{
  background-color: #ffffff !important;
  transition: box-shadow .3s ease, background-color .3s ease, padding .3s ease;
}

/* Guard against the flexbox nav ever shrinking nav-links down to
   near-zero width (which forces CJK text to wrap one character per
   line, and the whole bar to balloon in height). Keep every label on
   a single line and let the group wrap to a second row instead if it
   ever runs out of horizontal space, rather than crushing individual
   items vertically. */
.navbar .container{ flex-wrap: wrap; }
.navbar-nav{ flex-wrap: wrap; }
.navbar-nav .nav-item{ flex-shrink: 0; }
.navbar-nav .nav-link{ white-space: nowrap; }
.navbar-caption{ white-space: nowrap; }
.navbar.salon-scrolled{
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.5);
}

/* The navbar's real default background is white (set by the template's
   own theme CSS, .cid-s48OLK6784 .navbar{ background:#ffffff }) — an
   earlier pass here wrongly assumed a permanently dark bar from a
   corrupted measurement taken while mbr-additional.css had been
   stripped by the runtime bug fixed elsewhere; nav text needs to be
   dark for contrast against the real white background. */
a.navbar-caption{
  color: var(--salon-ink) !important;
  letter-spacing: .02em;
  transition: color .2s ease;
}
.navbar-brand:hover .navbar-caption{ color: var(--salon-gold-dark) !important; }
.navbar-brand img{ transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.navbar-brand:hover img{ transform: rotate(-6deg) scale(1.06); }

.navbar-nav .nav-link{
  position: relative;
  color: var(--salon-ink) !important;
  font-weight: 500;
  /* The template's own "display-4" utility class sets a fluid font-size
     that balloons to ~56px with huge padding at this breakpoint — pin
     it to a sane fixed size so six nav items actually fit in one row
     inside the 1140px container instead of wrapping/overflowing. */
  font-size: 1rem !important;
  padding: .6rem .85rem !important;
  transition: color .2s ease;
}
.navbar-nav .nav-link::after{
  content: "";
  position: absolute; left: 50%; bottom: 2px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--salon-gold), var(--salon-gold-dark));
  border-radius: 2px;
  transform: translateX(-50%);
  transition: width .3s cubic-bezier(.65,0,.35,1);
}
.navbar-nav .nav-link:hover{ color: var(--salon-gold-dark) !important; }
.navbar-nav .nav-link:hover::after{ width: calc(100% - 4px); }

.icons-menu .iconfont-wrapper{
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--salon-ink);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), color .2s ease;
}
.icons-menu .iconfont-wrapper:hover{
  transform: translateY(-3px);
  color: var(--salon-gold-dark);
}

/* Hamburger morph */
.navbar-toggler{ border: 0 !important; box-shadow: none !important; }
.hamburger span{
  display: block; height: 2px; margin: 5px 0;
  background: var(--salon-ink);
  transition: transform .3s cubic-bezier(.65,0,.35,1), opacity .2s ease;
  transform-origin: center;
}
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(2){ opacity: 0; }
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.navbar-toggler[aria-expanded="true"] .hamburger span:nth-child(4){ opacity: 0; }

/* Mobile dropdown: fade + slide instead of an abrupt snap */
.navbar-collapse.collapsing,
.navbar-collapse.show{
  transition: height .32s cubic-bezier(.65,0,.35,1), opacity .28s ease !important;
}
@media (max-width: 991px){
  .navbar-collapse.show .navbar-nav .nav-item{
    animation: salonNavIn .35s ease both;
  }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(1){ animation-delay: .03s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(2){ animation-delay: .07s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(3){ animation-delay: .11s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(4){ animation-delay: .15s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(5){ animation-delay: .19s; }
  .navbar-collapse.show .navbar-nav .nav-item:nth-child(6){ animation-delay: .23s; }
}
@keyframes salonNavIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ---------- 全站按鈕：金棕色取代預設藍/綠 ---------- */
.btn-success{
  background-color: var(--salon-gold) !important;
  border-color: var(--salon-gold) !important;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-success:hover{
  background-color: var(--salon-gold-dark) !important;
  border-color: var(--salon-gold-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(169,115,97,.5);
}
.item-btn.btn-primary-outline{
  color: var(--salon-gold-dark) !important;
  border-color: var(--salon-gold-dark) !important;
}
.item-btn.btn-primary-outline:hover{
  background-color: var(--salon-gold-dark) !important;
  color: #fff !important;
}
.text-primary{ color: var(--salon-gold) !important; }

/* ============================================================
   價目表重新設計
   ============================================================ */
.tabs.content18{ background: var(--salon-cream); }

.salon-price-tabs{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  border: 0; margin-bottom: 0 !important;
}
.salon-price-tabs .nav-item{ margin: 0; }
.salon-price-tabs .nav-link{
  border: 1.5px solid var(--salon-line) !important;
  border-radius: 999px !important;
  padding: 10px 22px !important;
  color: var(--salon-ink-soft) !important;
  background: #fff !important;
  font-weight: 600;
  transition: all .25s cubic-bezier(.34,1.56,.64,1);
}
.salon-price-tabs .nav-link .price-tab-icon{
  display: inline-block; margin-right: 6px; font-size: .95rem;
}
.salon-price-tabs .nav-link.active,
.salon-price-tabs .nav-link.show.active{
  color: #fff !important;
  background: linear-gradient(135deg, var(--salon-gold), var(--salon-gold-dark)) !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px -10px rgba(169,115,97,.6);
  transform: translateY(-2px);
}

.price-panel{
  max-width: 640px; margin: 40px auto 0;
  background: #fff;
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: 0 24px 60px -30px rgba(35,35,35,.2);
}
.price-panel-head{
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--salon-line);
}
.price-panel-head h5{
  font-size: 1.2rem; font-weight: 700; color: var(--salon-ink); margin: 0 0 6px;
}
.price-panel-head p{
  font-size: .88rem; color: var(--salon-ink-soft); margin: 0;
}
.price-row{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--salon-line);
}
.price-row:last-child{ border-bottom: 0; }
.price-row .price-name{
  font-weight: 600; color: var(--salon-ink);
}
.price-row .price-note{
  display: block; font-size: .8rem; color: var(--salon-ink-soft); font-weight: 400; margin-top: 2px;
}
.price-row .price-amount{
  flex-shrink: 0;
  font-weight: 800; color: var(--salon-gold-dark);
  font-size: 1.05rem; white-space: nowrap;
}
.price-row .price-amount small{
  font-weight: 500; font-size: .78rem; color: var(--salon-ink-soft);
}
.price-highlight{
  background: linear-gradient(135deg, rgba(201,154,139,.08), rgba(169,115,97,.03));
  border-radius: 14px;
  margin: 0 -16px;
  padding: 14px 16px !important;
  border-bottom: 0 !important;
}

.price-panel-cta{
  display: flex; justify-content: center;
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--salon-line);
}
.price-panel-cta .btn-book{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--salon-gold), var(--salon-gold-dark));
  color: #fff; font-weight: 700; font-size: .95rem;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.price-panel-cta .btn-book:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -10px rgba(169,115,97,.55);
  color: #fff;
}

@media (max-width: 600px){
  .price-panel{ padding: 32px 24px; }
  .salon-price-tabs .nav-link{ padding: 9px 16px !important; font-size: .92rem; }
}

/* ---------- 全站按鈕形狀統一：圓角膠囊，取代原本方角/圓角混用 ---------- */
.btn, .btn-success, .item-btn.btn-primary-outline{
  border-radius: 999px !important;
}

/* ---------- 「關於我們」滿版視差區塊：拿掉 JS 視差捲動負擔，
   並縮短高度，避免整個第一畫面被單一張模糊背景圖佔滿。
   背景圖改用明確指定，不依賴 jarallax.js 動態產生子層——實測發現
   移除 mbr-parallax-background 觸發 class 後，原本的 CSS 背景圖
   規則會一併失效（模板既有機制的連動問題），直接指定最可靠。 */
#header1-f.mbr-fullscreen{
  min-height: 58vh !important;
  /* Warm gradient layered with the photo via background-blend-mode
     (not `filter`, which would also wash out the heading/button text
     sitting on top since filter applies to the whole subtree). */
  background-image: linear-gradient(160deg, rgba(243,221,211,.4), rgba(169,115,97,.25)),
                     url("../images/03-barb-split-right-min-1000x1137.jpg") !important;
  background-blend-mode: soft-light, normal;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: scroll !important;
}
#header1-f.mbr-fullscreen .mbr-overlay{
  min-height: 58vh !important;
}
@media (max-width: 767px){
  #header1-f.mbr-fullscreen{ min-height: 46vh !important; }
  #header1-f.mbr-fullscreen .mbr-overlay{ min-height: 46vh !important; }
}

/* ---------- 導覽列「立即預約」強調按鈕 ---------- */
.nav-cta-link{
  background: linear-gradient(135deg, var(--salon-gold), var(--salon-gold-dark)) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: .55rem 1.1rem !important;
  font-weight: 700 !important;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nav-cta-link::after{ display: none !important; }
.nav-cta-link:hover{
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(169,115,97,.55);
}

/* ============================================================
   回到頂端按鈕
   ============================================================ */
.salon-back-to-top{
  position: fixed; right: 24px; bottom: 24px;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--salon-gold), var(--salon-gold-dark));
  color: #fff;
  box-shadow: 0 14px 28px -10px rgba(35,35,35,.4);
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease;
  z-index: 990;
}
.salon-back-to-top.is-visible{ opacity: 1; pointer-events: auto; transform: translateY(0); }
.salon-back-to-top:hover{ box-shadow: 0 18px 34px -8px rgba(169,115,97,.55); color: #fff; }
.salon-back-to-top svg{ width: 20px; height: 20px; }

/* ============================================================
   預約表單
   ============================================================ */
.section-booking{
  padding: 96px 0;
  background: var(--salon-cream);
}
.section-booking .container{ max-width: 760px; }
.booking-eyebrow{
  text-align: center; font-weight: 800; font-size: .82rem; letter-spacing: .1em;
  color: var(--salon-gold-dark); margin-bottom: 10px;
}
.booking-title{
  text-align: center; font-size: 2rem; font-weight: 800; color: var(--salon-ink); margin-bottom: 10px;
}
.booking-lead{
  text-align: center; color: var(--salon-ink-soft); margin-bottom: 40px;
}
.booking-form{
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 44px;
  box-shadow: 0 30px 70px -32px rgba(35,35,35,.28);
}
.booking-form::before{
  content: "";
  position: absolute; inset: -1px -1px auto -1px; height: 5px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, var(--salon-gold), var(--salon-gold-dark));
}
.booking-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.booking-row{ margin-bottom: 20px; }
.booking-row label{ display: block; font-weight: 700; font-size: .92rem; margin-bottom: 8px; color: var(--salon-ink); }
.booking-row input,
.booking-row select,
.booking-row textarea{
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--salon-line); border-radius: 12px;
  font: inherit; color: var(--salon-ink); background: var(--salon-cream);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.booking-row select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke='%236b6259' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.booking-row textarea{ resize: vertical; }
.booking-row input:focus,
.booking-row select:focus,
.booking-row textarea:focus{
  outline: none; border-color: var(--salon-gold); background: #fff;
  box-shadow: 0 0 0 4px rgba(201,154,139,.16);
}
.booking-honeypot{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.booking-submit{ width: 100%; border: 0; cursor: pointer; margin-top: 4px; font-size: 1rem; }
.booking-status{ margin: 16px 0 0; text-align: center; font-weight: 600; font-size: .92rem; min-height: 1.3em; }
.booking-status.success{ color: #1a9e6a; }
.booking-status.error{ color: #e0435a; }

@media (max-width: 700px){
  .booking-grid{ grid-template-columns: 1fr; }
  .booking-form{ padding: 32px 24px; }
  .booking-title{ font-size: 1.6rem; }
}

/* ============================================================
   Footer 美化
   ============================================================ */
.cid-sQfBF9jOYP .mbr-section-subtitle{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  color: #fff !important;
}
.cid-sQfBF9jOYP .mbr-section-subtitle::after{
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 32px; height: 2px;
  background: linear-gradient(90deg, var(--salon-gold), var(--salon-gold-light));
  border-radius: 2px;
}
.cid-sQfBF9jOYP .mbr-text{ color: rgba(255,255,255,.72); line-height: 1.8; }
.cid-sQfBF9jOYP .list{ list-style: none; padding: 0; }
.cid-sQfBF9jOYP .list .item-wrap{ margin-bottom: 10px; }
.cid-sQfBF9jOYP .list a.text-primary{
  transition: color .2s ease, padding-left .2s ease;
  display: inline-block;
}
.cid-sQfBF9jOYP .list a.text-primary:hover{
  color: var(--salon-gold-light) !important;
  padding-left: 4px;
}
.cid-sQfBF9jOYP .google-map,
.cid-sQfBF9jOYP .map{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.5);
  filter: saturate(.85);
}
.cid-sQfBF9jOYP .social-list{
  display: flex; gap: 12px; margin-top: 20px;
}
.cid-sQfBF9jOYP .social-list .soc-item a{
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s ease, border-color .2s ease;
}
.cid-sQfBF9jOYP .social-list .soc-item a:hover{
  transform: translateY(-3px);
  background: linear-gradient(135deg, var(--salon-gold), var(--salon-gold-dark));
  border-color: transparent;
}
.cid-sQfBF9jOYP .footer-lower hr{ border-color: rgba(255,255,255,.15) !important; }
.cid-sQfBF9jOYP .footer-lower .copyright p{
  color: rgba(255,255,255,.55); font-size: .85rem; margin: 0;
}

/* ============================================================
   設計師照片：不規則畫框 + 疊層色塊，取代方正的直角照片
   ============================================================ */
.cid-sQfu1wEPEW .card-wrap{
  background: transparent;
  border-radius: 0;
}
.cid-sQfu1wEPEW .item-wrapper{
  position: relative;
  padding: 22px 22px 30px;
}
/* Offset solid-color panel peeking out from behind the photo */
.cid-sQfu1wEPEW .item-wrapper::before{
  content: "";
  position: absolute;
  top: 36px; left: 36px; right: 8px; bottom: 14px;
  background: linear-gradient(155deg, var(--salon-gold), var(--salon-gold-dark));
  border-radius: 30px;
  z-index: 0;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.cid-sQfu1wEPEW .card-wrap:hover .item-wrapper::before{
  transform: translate(6px, 6px) rotate(-2deg);
}
.cid-sQfu1wEPEW .image-wrap{
  position: relative;
  z-index: 1;
  border-radius: 62% 38% 55% 45% / 45% 55% 45% 55%;
  overflow: hidden;
  box-shadow: 0 24px 44px -20px rgba(35,35,35,.45);
  transition: border-radius .5s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.cid-sQfu1wEPEW .image-wrap::before{
  content: "";
  position: absolute; inset: -12px;
  border: 1.5px solid var(--salon-gold);
  border-radius: 55% 45% 62% 38% / 55% 45% 55% 45%;
  opacity: .65;
  z-index: 2;
  transition: all .5s ease;
}
.cid-sQfu1wEPEW .image-wrap::after{
  content: "";
  position: absolute; inset: -22px;
  border: 1px solid var(--salon-gold);
  border-radius: 45% 55% 38% 62% / 45% 55% 45% 55%;
  opacity: .3;
  z-index: 2;
  transition: all .5s ease;
}
.cid-sQfu1wEPEW .image-wrap img{
  position: relative; z-index: 1;
  display: block; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.cid-sQfu1wEPEW .card-wrap:hover .image-wrap{
  border-radius: 38% 62% 45% 55% / 55% 45% 55% 45%;
  transform: translate(-4px, -4px);
}
.cid-sQfu1wEPEW .card-wrap:hover .image-wrap::before{
  inset: -8px;
  border-radius: 45% 55% 38% 62% / 45% 55% 45% 55%;
}
.cid-sQfu1wEPEW .card-wrap:hover .image-wrap::after{
  inset: -26px;
  opacity: .5;
}
.cid-sQfu1wEPEW .card-wrap:hover .image-wrap img{ transform: scale(1.08); }
/* Small role-icon medallion floating over the frame's corner */
.cid-sQfu1wEPEW .item-wrapper .role-badge{
  position: absolute; z-index: 3;
  bottom: 20px; right: 10px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 20px -8px rgba(35,35,35,.4);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
.cid-sQfu1wEPEW .card-wrap:hover .role-badge{ transform: scale(1.12) rotate(10deg); }
.cid-sQfu1wEPEW .role-badge svg{ width: 20px; height: 20px; color: var(--salon-gold-dark); }
/* Alternate tilt per card for a looser, less rigid gallery feel */
.embla__slide:nth-child(odd) .image-wrap{ transform: rotate(-2deg); }
.embla__slide:nth-child(even) .image-wrap{ transform: rotate(2deg); }
.embla__slide:nth-child(odd) .image-wrap::before,
.embla__slide:nth-child(odd) .image-wrap::after{ transform: rotate(-2deg); }
.embla__slide:nth-child(even) .image-wrap::before,
.embla__slide:nth-child(even) .image-wrap::after{ transform: rotate(2deg); }
.embla__slide:nth-child(odd) .card-wrap:hover .image-wrap{ transform: rotate(-2deg) translate(-4px, -4px); }
.embla__slide:nth-child(even) .card-wrap:hover .image-wrap{ transform: rotate(2deg) translate(-4px, -4px); }

/* ============================================================
   沙龍空間：改成並排展示牆，取代單張輪播
   ============================================================ */
.cid-sQp7RIaYQr .carousel-indicators,
.cid-sQp7RIaYQr .carousel-control{ display: none !important; }
.cid-sQp7RIaYQr .carousel-inner{
  display: grid !important;
  grid-template-columns: 1.3fr 1fr;
  gap: 22px;
}
.cid-sQp7RIaYQr .carousel-item{
  position: relative;
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}
.cid-sQp7RIaYQr .carousel-item:first-child .item-wrapper{ height: 420px; }
.cid-sQp7RIaYQr .carousel-item:last-child .item-wrapper{ height: 420px; }
.cid-sQp7RIaYQr .item-wrapper{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
}
.cid-sQp7RIaYQr .item-wrapper img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.cid-sQp7RIaYQr .item-wrapper:hover img{ transform: scale(1.06); }
.cid-sQp7RIaYQr .carousel-caption{
  position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  padding: 24px;
  background: linear-gradient(0deg, rgba(0,0,0,.6), transparent);
  text-align: left !important;
}
.cid-sQp7RIaYQr .carousel-caption h5{ color: #fff; margin: 0; }
@media (max-width: 767px){
  .cid-sQp7RIaYQr .carousel-inner{ grid-template-columns: 1fr; }
  .cid-sQp7RIaYQr .carousel-item:first-child .item-wrapper,
  .cid-sQp7RIaYQr .carousel-item:last-child .item-wrapper{ height: 280px; }
}

/* ============================================================
   御用品牌：無限跑馬燈滑動，取代靜態網格
   ============================================================ */
.cid-sQfpP6WhAT .images-container{ max-width: 100%; padding: 0; }
.cid-sQfpP6WhAT .row{ display: none !important; }
.brand-marquee{
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.brand-marquee-track{
  display: flex; align-items: center; gap: 20px;
  width: max-content;
  animation: brandMarquee 26s linear infinite;
}
.brand-marquee:hover .brand-marquee-track{ animation-play-state: paused; }
.brand-item{
  display: flex; align-items: center; justify-content: center;
  padding: 22px 40px;
  border-radius: 20px;
  transition: background .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.brand-marquee-track img{
  height: 84px; width: auto;
  opacity: .6; filter: grayscale(1);
  transition: opacity .3s ease, filter .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.brand-item:hover{
  background: #fff;
  box-shadow: 0 24px 46px -20px rgba(35,35,35,.25);
  transform: translateY(-6px);
}
.brand-item:hover img{
  opacity: 1; filter: grayscale(0);
  transform: scale(1.22);
}
@keyframes brandMarquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .brand-marquee-track{ animation: none; }
}

/* ============================================================
   韓系柔霧色調：統一套用在全站照片上，取代原本來源不一、
   對比偏強的雜牌照片色調，讓整站看起來像同一套拍攝風格。
   ============================================================ */
#slider1-n .carousel-item img,
#slider2-13 .item-wrapper img,
.cid-sQfu1wEPEW .image-wrap img,
#slider6-y .item-img img{
  filter: sepia(.12) saturate(.82) brightness(1.05) contrast(.94);
}
/* Soft warm veil over photos — lowers contrast a touch further and ties
   every image to the same blush/cream cast regardless of its original
   color temperature. Skipped on the stylist portraits (.image-wrap),
   since that element already owns ::before/::after for the decorative
   frame rings — the filter above is sufficient there on its own. */
#slider1-n .item-wrapper,
#slider2-13 .item-wrapper,
#slider6-y .item-img{
  position: relative;
}
#slider1-n .item-wrapper::after,
#slider2-13 .item-wrapper::after,
#slider6-y .item-img::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(243,221,211,.16), rgba(169,115,97,.08));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* 標題字距拉開，呼應韓系版面偏愛的輕盈留白感 */
.mbr-section-title,
.card-title{
  letter-spacing: .01em;
}
.mbr-role{
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .82rem !important;
}