*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
   
}

h1,h2,h3{
    font-size: 1rem;
}

a{
    text-decoration: none;
}

.gotop img{
    width: 60px;
    position: fixed;
    right: 1%;
    bottom: 1%;
    z-index: 101;
    transition: transform 0.3s ease; /* 增加平滑度 */
}
.gotop img:hover{
  transform: scale(1.5);
  right: 1.5%;
  bottom: 2%;
  transition: smooth 0.3s;
}

@media(max-width:768px){
    .gotop img{
    width: 50px;
    position: fixed;
    right: 4%;
    bottom: 35%;
}
.gotop img:hover{
  transform: scale(1.5);
  right: 4.5%;
  bottom: 36%;
  transition: smooth 0.3s;
}
}

@media(max-width:428px){
    .gotop img{
    width: 40px;
    position: fixed;
    right: 1%;
    bottom: 30%;
}
.gotop img:hover{
  transform: scale(1.1);
  right: 1.5%;
  bottom: 31%;
  transition: smooth 0.3s;
}
}




/* --------------------------------------------------------- */

/* seo */
.seo{
    color: #feeeec;
    position: absolute;
    top: 0%;
    left: -20%;
}
.seo>H1{
    color: #feeeec;
    font-size: 10px;
    position: absolute;
    top: 10%;
    left: 20%;
}
.seo>H2{
    color: #feeeec;
    font-size: 10px;   
}

/* header */
.momHeader{
    width: 100%;
    display: flex;
    justify-content:space-between;
    align-items: center;
    background-color: #FFF;
    padding: 20px 20px;
}

.headerDiv img{
    width: 100%;
}

.headerDiv a{
    font-size: 1.2rem;
    color: black;
    padding:15px 10px;
}

.headerDiv a:hover{
    font-weight: 500;
    text-align: center;
    color: #f7776a;
}


/* 桌面版隱藏漢堡按鈕 */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-toggle span {
    width: 25px;
    height: 3px;
    background-color: #333;
    transition: 0.3s;
}

/* 768px 以下手機版樣式 */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex; /* 顯示漢堡按鈕 */
        z-index: 1001;
    }

    .nav-links {
        display: none; /* 預設隱藏選單 */
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        justify-content: center;
        align-items: center;       
        z-index: 1000;
    }

    .nav-links a:hover{
        width: 100%;
        text-align: center;
        text-decoration: none;
        background-color: antiquewhite;        
    }

    /* 當選單被啟動時顯示 (透過 JS 切換 Class) */
    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        font-size: 1.5rem;
        /* margin: 15px 0; */
        padding: 15px 0px; 
        color: #333;
        text-decoration: none;
    }

    /* 漢堡按鈕變叉叉的動畫 (選配) */
    .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }
}

/* ------------------------------------------------- */

/* banner */
.momBanner{
    width: 100%;
    height: 0; /* 高度設為 0 */
    padding-top: 33.33%; /* 這裡控制了比例 */
    background-image:url(../images/banner.jpg);
    background-size:cover;
    background-position:top center;
    background-repeat: no-repeat;
}

@media(max-width:768px){
  .momBanner{
    width: 100%;
    height: 0; /* 高度設為 0 */
    padding-top: 33.33%; /* 這裡控制了比例 */
    background-image:url(../images/banner-mob.jpg);
    background-size:cover;
    background-position:top center;
    background-repeat: no-repeat;
}
}

/* 愛心特效 */
.momBanner {
    position: relative; /* 必備：讓愛心相對於 Banner 定位 */
    overflow: hidden;   /* 隱藏超出 Banner 的愛心 */
}

/* 愛心基礎樣式 */
.heart-icon {
    position: absolute;
    left: 85%;
    top: 40%;
    pointer-events: none; /* 防止干擾點擊 */
    color: #ff4d4d;
    font-size: 20px;
    z-index: 10;
    /* 動畫執行：名稱 總時長 緩動函數 結束後移除 */
    animation: heart-burst 1.5s ease-out forwards;
}

/* 核心動畫：噴發與淡出 */
@keyframes heart-burst {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        /* 利用變數 --x 和 --y 讓 JS 控制每個愛心的噴發方向 */
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1.5) rotate(var(--tr));
        opacity: 0;
    }
}

.tagLink{
    position: absolute;
    left: 30%;
    top: 65%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.5rem;
    background-color: #f7776a;
    padding: 10px 50px;
    border-radius: 50px;
    z-index: 5;
}
.tagLink:hover{
    color: #FFF;
    font-size: 1.6rem;
     background-color: #fc604f;
    opacity: 0.8;
}
.tagLink a{
    color: #FFF;
    font-size: 1.6rem;
}

/* 倒數計時器 */
/* 倒數計時器外層容器 */
.countdown-container {
    width: 100%;
    max-width: 400px;
    position: absolute;
    top: 60%;
    left: 30%;
    background: rgba(255, 255, 255, 0.6); /* 半透明白色背景 */
    backdrop-filter: blur(5px); /* 毛玻璃效果 */
    padding: 15px 25px;
    border-radius: 15px;
    display: inline-block;
    text-align: center;   
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    z-index: 100;
}

.countdown-title {
    color: #4a4a4a;
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* 時間數字外框 */
.timer {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 15px;
}

.time-box {
    background: #ff8e7e; /* 採用圖片中的珊瑚紅 */
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    min-width: 45px;
}

.time-box span {
    font-size: 30px;
    font-weight: 900;
    display: block;
    line-height: 1;
}

.time-box .unit {
    font-size: 10px;
    margin-top: 2px;
}

/* 按鈕美化 */
.tagLink-new {
    display: inline-block;
    background-color: #ff8e7e;
    color: white;
    padding: 8px 25px;
    text-decoration: none;
    border-radius: 50px; /* 橢圓形按鈕 */
    font-weight: bold;
    transition: transform 0.2s, background-color 0.2s;
    font-size: 20px;
}

.tagLink-new:hover {
    background-color: #f57664;
    transform: scale(1.05);
}

/* 針對行動裝置 (螢幕寬度小於 768px) */
/* --- 前面保留你原本的桌機版 CSS --- */
@media (max-width: 768px) {
    .countdown-container {
        /* 1. 改為固定在螢幕右下角 */
        position: fixed;
        top: auto;        /* 取消桌機版的 60% */
        left: auto;       /* 取消桌機版的 30% */
        right: 15px;      /* 距離右邊界 15px */
        bottom: 15px;     /* 距離下邊界 15px */
        
        /* 2. 寬度縮小，適合直立展示 */
        width: auto;
        max-width: 80px;  /* 限制寬度讓內容強迫換行 */
        padding: 10px;
        background: rgba(255, 255, 255, 0.9); /* 行動版背景建議深一點，較清晰 */
    }

    .countdown-title {
        font-size: 14px;  /* 縮小標題字體 */
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .timer {
        /* 3. 時間格子轉為垂直排列 */
        flex-direction: column;
        gap: 5px;
        margin-bottom: 0; /* 因為按鈕隱藏了，下方不需要間距 */
    }

    .time-box {
        min-width: 50px;
        padding: 5px;
    }

    .time-box span {
        font-size: 20px; /* 縮小數字字體 */
    }

    /* 4. 隱藏按鈕 */
    .tagLink-new {
        display: none;
    }
}

/* 針對行動裝置 (螢幕寬度小於 768px) */
/* --- 前面保留你原本的桌機版 CSS --- */
@media (max-width: 430px) {
    .countdown-container {
        /* 1. 改為固定在螢幕右下角 */
        position: fixed;
        top: auto;        /* 取消桌機版的 60% */
        left: auto;       /* 取消桌機版的 30% */
        right: 0px;      /* 距離右邊界 15px */
        bottom: 15px;     /* 距離下邊界 15px */
        
        /* 2. 寬度縮小，適合直立展示 */
        width: auto;
        max-width: 60px;  /* 限制寬度讓內容強迫換行 */
        padding: 10px;
        background: rgba(255, 255, 255, 0.9); /* 行動版背景建議深一點，較清晰 */
    }

    .countdown-title {
        font-size: 12px;  /* 縮小標題字體 */
        line-height: 1.2;
        margin-bottom: 8px;
    }

    .timer {
        /* 3. 時間格子轉為垂直排列 */
        flex-direction: column;
        gap: 5px;
        margin-bottom: 0; /* 因為按鈕隱藏了，下方不需要間距 */
    }

    .time-box {
        min-width: 20px;
        padding: 5px;
    }

    .time-box span {
        font-size: 12px; /* 縮小數字字體 */
    }

    /* 4. 隱藏按鈕 */
    .tagLink-new {
        display: none;
    }
}


/* sale-tittle */                                                                                                  
.sale-tittle {
    width: 100%;
    text-align: center;
    padding: 60px 0px;
    background-color: #feeeec;
}

.sale-tittle h1 {
    font-size: 2.5rem;
    color: #333;
}

.sale-tittle h2 {
    font-size: 1.8rem;
    color: #666;
}

@media(max-width:900px){
    .sale-tittle h1{
        font-size: 1.5rem;
    }
    .sale-tittle h2 {
    font-size: 1.5rem;
    color: #666;
}
}

@media(max-width:430px){
    .sale-tittle {
    padding: 30px 0px;
}
    .sale-tittle h1{
        font-size: 1rem;
    }
    .sale-tittle h2 {
    font-size: 0.9rem;
    color: #666;
}
}

/* nav */
.momNav {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    padding: 0px 0px;
    overflow-x: auto;
    z-index: 100;
}
.momNav a{
    width: 100%;
    display: flex;
    justify-content: center;
    color: #FFF;
    padding: 0px 0px;
    overflow-x: auto;
}


.momNav>div{
    width: 100%;
    color: #FFF;
    font-size: 1.2rem;
    text-align: center;
    padding: 10px 0px;
}
.momNav>div:hover{
    opacity: 0.8;
}

.momNav ul{
    width: 100%;
    display: flex;
    justify-content:space-evenly;
    align-items: flex-end;
    /* gap: 20px; */
}

/* 預設樣式保持不變... */

/* 針對 768px 以下的裝置 */
@media (max-width: 768px) {
    .momNav {
        /* 允許水平方向溢出時顯示捲軸 */
        overflow-x: auto;
        
        /* 確保子元素不會擠壓，而是維持寬度並撐開父層 */
        display: flex;
        justify-content: flex-start; /* 手機版通常靠左對齊開始滑動 */
        
        /* 隱藏預設的醜醜捲軸 (選用) */
        -webkit-overflow-scrolling: touch; /* 讓 iOS 滑動更順暢 */
    }

    .momNav::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera 隱藏捲軸 */
    }
    
    .momNav {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    .momNav > div {
        /* 重要：防止被 Flex 壓縮，設定一個固定寬度或最小寬度 */
        flex: 0 0 50%; /* 每個選項佔 25%，這樣畫面會剛好出現 4 個，第 5 個要滑動 */
        min-width: 100px; /* 或者設定最小像素寬度，確保文字不換行 */
        white-space: nowrap; /* 確保文字永遠在一行 */
    }
}

/* ----------------------------------------------- */
/* 將所有區塊預設隱藏 */
.content-block {
    display: none;
    background-image: url(../images/bg.jpg);
    background-repeat: repeat-y;
    background-size: 100% cover;
    background-position: top center;
    text-align: center;
}

/* 預設顯示第一個區塊 */
.blockOne {
    display: block;
}

.content-bottom{
    width: 100%;
    height: 0; /* 高度設為 0 */
    padding-top: 3%; /* 這裡控制了比例 */
    background-image: url(../images/bgBottom.jpg);
    background-repeat: no-repeat;
    background-size: 100% cover;
    background-position: top center;
}

/* 區塊 */
.blockOne{
    background-color: #f7ede1;
}
/* 標題 */
.momContent{
    width: 100%;
    text-align: center;
    padding: 60px 0px;
}

.momContent h2{
    font-size: 2rem;
    padding-bottom: 10px;
}
.momContent h3{
    font-size: 1.5rem;
}

@media(max-width:900px){
    .momContent h2{
        font-size: 1.5rem;
    }
      .momContent h3{
        font-size: 1.5rem;
    }
}
@media(max-width:528px){
    .momContent{
        padding: 30px 0px;
    }
    .momContent h2{
        font-size: 1rem;
    }
      .momContent h3{
        font-size: 1rem;
    }
}

/* 優惠選單 */
.momMenu {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 220px;
}

@media(max-width:1300px){
    .momMenu {    
    padding: 20px 20px;
}
}

/* 確保 a 標籤在 PC 端也能正常運作，若有特定寬度需求可在此設定 */
.momMenu a {
    text-decoration: none;
    display: block;
}

.MenuDiv img {
    width: 100%; /* 確保圖片填滿容器 */
    display: block;
    opacity: 0.8;
    transition: transform 0.3s ease; /* 增加平滑度 */
}

.MenuDiv img:hover {
    opacity: 1;
    transform: translateY(-10px);
}

/* 針對 768px 以下的調整 */
@media(max-width: 768px) {
    .momMenu {
        gap: 15px 10px; /* 上下間距 15px, 左右間距 10px */
        padding: 20px 10px; /* 增加兩側內距防止貼邊 */
    }

    .momMenu a {
        /* 重點：扣除 gap 寬度，讓兩個 a 標籤佔滿一排 */
        /* 計算公式：(100% - 間隔總合) / 2 */
        width: calc((100% - 10px) / 2); 
    }

    .MenuDiv img {
        width: 100%;
    }
}

/* 針對 600px 以下的調整 */
@media(max-width: 600px) {
    .momMenu {
        /* 這裡原本你寫了 nowrap，要改回 wrap 才能讓它換行變成兩排 */
        flex-wrap: wrap; 
        gap: 10px;
    }

    .momMenu a {
        width: calc((100% - 10px) / 2);
    }
}

/* 商品 */
.bigsale img{
    width: 100%;
    max-width:768px;
    padding:15px;
}
.bigsale img:hover{
    transform: scale(1.1);
}
.commodityFlex{
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 50px 0px;
    margin: 0px auto;
}

@media(max-with:1200px){
    .commodityFlex{
        display: block !important;
        flex-wrap: nowrap;
        gap: 10px;
    }   
}


.commodity{
    width: 30%;
    min-width: 300px;
    background-color: #ffffff;
    padding: 0px;
    border-radius: 15px;
    margin: 0px auto;
}

@media(max-with:768px){
.commodity{
    width: 100%;    
}  
}

.commodityDiv{
    padding: 15px;
}

.comImg{
    position: relative;
}

.comImg img{
    width: 100%;
    border-radius: 15px 15px 0px 0px;
}

.datemom{
    position: absolute;
    bottom: 10px;
    left: 0px;
    padding: 6px 8px;
    color: #fff;
    background-color: #db5252;
}

.comTxt{
    text-align: center;
}
.comTxt h3{
    color: #000000;
    font-size: 1.1rem !important;
}
.comTxt h4{
    color: #666;
    font-size: 1.1rem !important;
}

.comPrice{
    color: #fc604f;
    text-align: center;
    font-weight: 600;
    padding-top: 10px;
}
.price{
    font-size: 1.5rem;
    font-weight: bold;
}

.comLink{
    color: #FFF;
    text-align: center;
    padding: 10px 0px;
    background-color: #8a4a9e;
    border-radius: 0px 0px 15px 15px;
}

.comLink:hover{
    opacity: 0.8;
}

.comLink a{
    color: #FFF;
    font-size: 1.1rem;
    text-align: center;
    padding: 10px 20px;
    background-color: #8a4a9e;
}

.comLink a:hover{
    color: #fff34b;   
}



/* 專區標題 */
.mom-areatittle{
    width: 100%;
    text-align: center;
    padding: 100px 0px 50px 0px;
}

.areatittleBig{
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: #da6272;
    font-size: 3rem;
    font-weight: bold;
    /* background-color: blueviolet; */
    padding: 20px;
    margin: 0px auto;
}

.tittleBigTxt{
    position: relative;
    display: inline-block;
    font-size: 32px;
    letter-spacing: 1px;
    color: #fd6969;
    font-weight: 700;
    margin: 0px 0 0px 0;
    text-align: center;
    z-index: 10;
}

.tittleBigTxt {
        &::before {
            content: "";
            background: url(../images/love.png) no-repeat center / contain;
            width: 40px;
            height: 40px;
            position: absolute;
            top: -10px;
            left: -25px;
            display: flex;
            z-index: -1;
            opacity: 0.8;
        }
    }
.tittleBigTxt h2{
    font-size: 2.5rem;
}


.areatittleSmall p{
    font-size: 20px;
    font-weight: 500;
    color: #616161;;
    /* background-color: #fff34b; */
}

@media(max-width:768px){
    .mom-areatittle{
        padding: 50px 0px 30px 0px;
    }
    .areatittleBig{
        font-size: 2rem;
        margin: 0px auto;
    }
    .tittleBigTxt{
        font-size: 20px;
    }
      .areatittleSmall{
        padding: 0px 20px;        
    }
    .areatittleSmall p{
        font-size: 14px;        
    }
}

@media(max-width:430px){
    .mom-areatittle{
        padding: 50px 0px 20px 0px;
    }
   
    .tittleBigTxt h2{
        font-size: 1.2rem;
    }
  
    .areatittleSmall p{
        font-size: 0.9rem !important;        
    }
}

/* 宣告 */
.declare{
    width: 100%;
    color: #FFF;
    text-align: center;
    padding: 10px 0px;
    background-color: #f7776a;
}