:root{
  --primary-color: #B800FF;
  --secondary-color: #FF9900;
  --seconary-word: #D6D6D6;
  --Neutral-color: #F4F4F4;
  --Neutral-opacity-color: #f4f4f420;
  --Neutral-hover-bg: #f4f4f440;
  --hero-background: #1C1C1C;
  --nav-bg-color: #1c1c1c20;
  --hero-bg-color: #2D013C;
  --glass-effect: saturate(180%) blur(10px);
  --nav-shadow: inset -2px 1px 1px #f4f4f460;
  --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --noto-sans-tc: "Noto Sans TC", sans-serif;
  --roboto-sans: "Roboto", sans-serif;    
  --border-radius: 10px;
  --letter-space: 2px;
  --txt-center: center;
  /* === Font Sizes === */
  --fs-xs: 13px;  /* Extra Small - 註解、標籤 */
  --fs-sm: 14px;  /* Small - 說明文字 */
  --fs-md: 16px;  /* Medium - 一般內文 */
  --fs-lg: 24px;  /* Large - 小標題 */
  --fs-xl: 32px;  /* Extra Large - 主標題 */
  --fs-xxl: 48px; /* 2XL - Hero Banner / 超大標題 */

  /* === Font Weights === */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 600;
  /* === btn === */
  --btn-bg: linear-gradient(to right, #B800FF, #FF9900);
  --btn-padding: 8px 38px;
  --btn-sm-padding: 0 8px;
  --btn-border-radius: 10px 0 0 10px;

  /* === btn hover === */
  --btn-bg-hover: linear-gradient(to right, rgba(184, 0, 255, 0.9), rgba(255, 153, 0, 0.8));
  --btn-shadow-hover: 0 2px 4px rgba(0, 0, 0, .25);
}
.hero{
  position: relative;
  background: url(/image/series.jpg) center/cover no-repeat;
  min-height:400px;
}
.hero h1{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Bagel Fat One", system-ui;
  font-weight: var(--fw-medium);
  font-size: var(--fs-xxl);
}


/* breadcrumb */
.breadcrumb{
  display: flex;
  padding: 16px 12px;
}
.breadcrumb li{
  list-style: none;
}
.breadcrumb li + li:before{
  content: "/";
  color: var(--Neutral-hover-bg);
  margin: 0 8px;
}
.breadcrumb-item a{
  color: var(--Neutral-hover-bg);
  text-decoration: none;
}
.breadcrumb .active{
  color: var(--Neutral-color);
}

/* series */
.series .container{
  padding: 0 8px;
}
.items{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.series .item{
  background: linear-gradient(64deg,rgba(184, 0, 255, 0.8) 0%, rgba(46, 46, 46, 0.45) 10%, rgba(33, 33, 33, 0.81) 50%, rgba(184, 0, 255, 1) 100%);
  margin: 4px;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: var(--transition-medium);
  border: 1.75px solid var(--Neutral-hover-bg);
}
.series .item:hover{
  background: linear-gradient(64deg,rgba(46, 46, 46, 0.6) 0%, rgba(64, 64, 64, 0.9) 50%,rgba(184, 0, 255, 0.8) 100%);
  box-shadow: inset var(--btn-shadow-hover);  
  transform: translateY(-3px);
}
.series .pic {
  margin: 16px 8px 0 8px;
  background-image: linear-gradient(to bottom, #1a1a1a, #B800FF);
  border-radius: var(--border-radius);
  box-shadow: 4px 2px 4px rgba(0, 0, 0, .3)
}
.series h2{
  text-align: center;
}
.series .txt{
  padding: 12px 0;
  text-align: center;
}
.series .btn{
  width: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
}

@media screen and (min-width: 768px) {

}


/* bestsell */
.bestseller .square{
  text-align: center;
}
.bestseller .square img{
  width: 24px;
  height: 24px;
  margin: 4px;
}
.card{
  padding: 8px;
  background-image: linear-gradient(to bottom, #1a1a1a, #B800FF);
  border-radius: var(--border-radius);
  transition: all .5s;
  cursor: pointer;
}
.card:hover{
  background: linear-gradient(to bottom, #3131316e, #bd30f57b);
  transform: translateY(-4px);
}
.card-header{
  display: flex;
  align-items: center;
  margin: 8px 0;
}
.card-header .name{
  display: flex;
  align-items: center;
}
.card-header .name img{
  width: 50px;
  height: 50px;
}
.name p{
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  margin-left: 8px;
}
.card-header .stars{
  margin-left: auto;
}
.card-header .stars img{
  width: 15px;
}
/* slider */

.cocktail-slider{
  position: relative;
}
.slider {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
}
.slide-img{
  opacity: 0;
  transform: translateY(50px);
  position: absolute; 
  top: -8%;
  left: -14%;
  width: 103%;
  height: auto;
  z-index: 2;
}
.slide-img:first-child {
  opacity: 1;
}
.slider-btn{
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 16px;
}
.prev, .next{
  width: 30px;
}
.prev img, .next img{
  width: 100%;
}
.bestseller button{
  background-color: transparent;
  border: none
}
.swiper-slide .pic{
  width: 100%;
}
.swiper-slide .pic img{
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: var(--border-radius);
  box-shadow: inset var(--btn-shadow-hover);
  
}
.card:hover .pic img{
  box-shadow: var(--btn-shadow-hover);
}

/* reservation */
.reservation-form{
  align-items: center;
}
.reservation-form input, .reservation-form .choices, .reservation-form textarea{
  width: 100%;
  max-width: 400px;
}
.btn-body .btn{
  padding: 16px 38px
}
.btn-body:hover .btn{
  background: var(--btn-bg-hover);
  box-shadow: var(--btn-shadow-hover);
}