@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");

@import url(slick-theme.css);
@import url(slick.css);

/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcAption, fREigure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1; 
}
ol, ul, li{
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ---reset.css--- */
a { text-decoration:none;}

html {	
	-webkit-text-size-adjust:none;
	scroll-behavior: smooth; 
	font-family:'Noto Sans TC', sans-serif;

}

body{
background:#bbe2ed url(images/bg.png) ;
background-size:cover;
background-attachment: fixed;
}

/* 模擬雪點效果 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(white 1px, transparent 1px),
    radial-gradient(white 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  opacity: 0.2;
  z-index: 0;
  animation: snow 20s linear infinite;
}

@keyframes snow {
  from { background-position: 0 0, 20px 20px; }
  to   { background-position: 0 1000px, 20px 1020px; }
}
@keyframes breathing {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* --電腦版型------------------------------------- */


#WRAPPER{
	width:100%; 
	min-width:1100px; 
	margin:0 auto; 
}

header{
	clear:both;
	width:100%;
	margin:0 auto;
	background-color:#727171;
	padding:5px 0;
	}	

header img{
	padding-left:15px;
	}	

	@media screen and ( max-width: 768px ){
	#WRAPPER{ min-width:100%;}
	header img{
	width:80%;
	padding-left:5px;
	}	
}
	
article{
	width:100%;
	margin:0 auto;
	}

.title{
	width:100%;
 	height:auto;
	overflow:hidden;
	margin:0 auto;
	font-weight: bold;
	}	
	
.title div{
	width:1200px;
	height:550px;
	overflow: hidden;
	margin:0 auto 0 auto; 
	text-align:center;
	}	
	

.title_m{
	display:none;
	}

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

.title{
		display:none;
	}		

	.title_m{
		display:block;
		}

	.title_m img{
		width:100%;
		}


	}



section{
  width: 1200px;
 	height:auto;
	overflow:hidden;
  margin:0 auto 0 auto;
  text-align:center;
	}	

/* 容器位置：你可以改成 right:20px; top:40%; */
.side-nav.leftWood {
  position: fixed;
  right: 5px;
  top: 58%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 99;
  transform: translateY(-50%);
  font-family: "Noto Sans TC", sans-serif;
}

/* 單一小木牌 */
.sideWood-card {
  position: relative;
  display: block;
  min-width: 70px;
  background: #b57a38;
  background-image: repeating-linear-gradient(
    12deg,
    rgba(0,0,0,0.18) 0px,
    rgba(0,0,0,0.18) 4px,
    rgba(255,255,255,0.08) 4px,
    rgba(255,255,255,0.08) 8px
  );
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  border: 2px solid #fff;
  box-shadow:
    0 10px 20px rgba(0,0,0,.6),
    0 0 10px rgba(255,255,255,.5) inset;
  padding: 10px 12px 12px;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-shadow: 0 2px 3px rgba(0,0,0,.6);
  transition: .18s;
}



/* 底下木樁腳（像插在雪裡） */
.sideWood-card::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 16px;
  background: #7a4a15;
  border-radius: 2px;
  box-shadow: 0 4px 8px rgba(0,0,0,.6);
}

/* 針對三種不同類別，我們加上細節小icon燈光感 */
.sideWood-card.games   { background-color: #7e3a99; }
.sideWood-card.hot     { background-color: #d37300; }
.sideWood-card.xmas    { background-color: #2e7d32; }

.sideWood-card:hover {
  transform: translateX(-4px) scale(1.03);
  box-shadow:
    0 16px 24px rgba(0,0,0,.8),
    0 0 14px rgba(255,255,255,.9) inset,
    0 0 10px rgba(255,255,255,.6);
}
.sideWood-card .txt {
  display: inline-block;
  padding-top: 4px;
}
@media (max-width:768px){


section{
  width: 100%;
	}	

  .side-nav.leftWood {
    right: 10px;
    top: auto;
    bottom: 20px;
    transform: none;
  }
  
  
/* 容器位置：你可以改成 right:20px; top:40%; */
.side-nav.leftWood {
  position: static;
  right: 0;
  top: 0;
  display: block;
  margin:0 auto;
  
  
}


  .sideWood-card {
    min-width: auto;
    font-size: 1.05rem;
    float:left;
    margin:10px 5px;
  }
}

/* ② 區塊標題標籤 ----------------------------------------------- */
.section-header {
	width:50%;
  text-align: center;
  margin: 10px auto 40px 20px;
  position: relative;
  display: inline-block;
  padding: 20px 0 20px 0 ;
  background: #2f224e;
  color: #fff;
  font-weight: 800;
  font-size: 1.785rem;
  line-height: 1.4;
  border-radius: 10px;
  border: 2px solid #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.6);
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
}
.section-header .sub {
  display: block;
  font-size: 1.2rem;
  font-weight: 500;
  color: #ffd85a;
  margin-top: 4px;
  text-shadow: 0 0 6px rgba(255,216,90,.6),0 1px 2px rgba(0,0,0,.8);
}

/* 左右裝飾線+星星 */
.section-header::before,
.section-header::after {
  content: "✦ ❄ ✦";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: .7rem;
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,.8),0 0 10px rgba(255,255,255,.5);
  white-space: nowrap;
  opacity: .8;
}
.section-header::before {
  right: 100%;
  margin-right: 16px;
}
.section-header::after {
  left: 100%;
  margin-left: 16px;
}

/* ③ 內容外框（糖果框升級版） ----------------------------------- */

.section-wrapper {
  position: relative;
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 30px 20px 40px;
  border-radius: 14px;
  background:rgba(255,255,255,.5);
  box-shadow:
    0 30px 60px rgba(0,0,0,.7),
    0 0 30px rgba(255,255,255,.2) inset;
  border: 6px solid transparent;
  background-clip: padding-box;
}

/* 糖果條紋邊框效果 */
.section-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  padding: 6px;
  background: repeating-linear-gradient(
    45deg,
    #fff 0 10px,
    #d5152b 10px 20px,
    #fff 20px 30px,
    #2f4d0a 30px 40px
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  box-shadow: 0 15px 30px rgba(0,0,0,.6);
}

/* 內陰影，讓內容像坐在雪桌上 */
.section-inner-shadow {
  position: absolute;
  left:0;
  right:0;
  bottom:0;
  height: 40px;
  border-radius: 0 0 14px 14px;
  background: radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}

/* ④ 商品卡 ----------------------------------------------------- */

.product-list {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
  gap: 20px;
  position: relative;
  z-index: 2;
}

.item-card {
  background:#FFF;
  border-radius: 10px;
  padding: 16px 16px 14px;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow:
    0 18px 30px rgba(0,0,0,.4),
    0 0 20px rgba(255,255,255,.6) inset;
  position: relative;
  transition: .2s;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: #2a2a2a;
}
.item-card:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 26px 40px rgba(0,0,0,.6),
    0 0 30px rgba(255,255,255,.9) inset;
}

/* 商品圖片區 */
.item-thumb {
  background: #fff;
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
  border: 1px solid rgba(0,0,0,.05);
  margin-bottom: 12px;
  text-align: center;
}
.item-thumb img {
  max-width: 100%;
  max-height: 150px;
  object-fit: contain;
  border-radius: 4px;
}

/* 商品標題 */
.item-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1f1a2f;
  line-height: 1.4;
  min-height: 2.8em;
  text-shadow: 0 1px 2px rgba(255,255,255,.8);
  margin-bottom: 8px;
}

/* 價格區 */
.item-price {
  font-size: .8rem;
  line-height: 1.5;
  color: #444;
  margin-bottom: 10px;
}
.item-price .strike {
  color: #777;
  text-decoration: line-through;
  margin-right: .3em;
}
.item-price .sale {
  color: #c4002b;
  font-weight: 700;
  font-size: 1.025rem;
  text-shadow: 0 0 6px rgba(255,0,0,.2);
}

/* 購物車按鈕 */
.item-action {
  text-align: right;
}
.buy-btn {
  display: inline-block;
  background: linear-gradient(#2c1d76,#1a0f4a);
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow:
    0 6px 12px rgba(0,0,0,.6),
    0 0 10px rgba(117,101,255,.8);
  text-shadow: 0 0 4px rgba(255,255,255,.8);
  cursor: pointer;
  transition: .15s;
}
.buy-btn:hover {
  background: linear-gradient(#4a2adf,#2a177e);
  box-shadow:
    0 8px 16px rgba(0,0,0,.8),
    0 0 12px rgba(255,255,255,1),
    0 0 30px rgba(130,110,255,.8);
  transform: translateY(-2px) scale(1.04);
}

/* RWD 微調 */
@media (max-width:768px){
  .category-tab {
    min-width: 100px;
    font-size: .85rem;
    padding: 7px 12px;
  }
  
.section-header {
  margin: 15px auto;
  position: static;
  display: inline-block;
  padding: 5px;
}

  .section-header .sub {
    font-size: .75rem;
  }
  
.product-list {
  grid-template-columns: repeat(auto-fit,minmax(46%,1fr));
}

.section-wrapper {
  max-width: 100%;
  margin: 0 auto ;
  padding: 5px;
}

}




footer{
	clear:both;
	width:100%;
	margin:0 auto;
	background:#4B3100;
	color:#FFF;
	padding:8px 0;
	text-align:center;
	font-size:0.85rem;
	line-height:1.5;
}




#car{ /* 購物車 */
	width:145px;
  position:fixed;
  z-index:999999;
}

#car a{ /* 購物車 */
width:25px;
  height:auto;
	margin:0 auto;
	border-radius: 15px;
	background: #ff4f81;
  color:#FFF;
  font-size:1.15rem;
  text-align:center;
  padding:5px 3px;
  position:fixed;
	display:inline-block;
  top:42px;
	right:5px;
	box-shadow: 0 5px 15px #193047;
  border:1px solid #EEE;
  font-weight:800;
  line-height:1.2;
}


iframe{ /* 購物車 */
width:140px;
  position:fixed;
  right:40px;
  top:42px;
  height:180px;
  overflow:hidden;
}  

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

	#car{ /* 購物車 */
		width:auto;
	}
	
	#car a{ /* 購物車 */
	width:35px;
	  height:auto;
		margin:0 auto;
		border-radius: 5px;
	  font-size:1.15rem;
	  top:80%;
	  line-height:1.5;
	}

	iframe{
	display:none;
	}
}