.filter-block{
	text-align:right;
	margin-top:38px;
}
.product-block{
	margin-top:39px;
}
.filter-block img{
	height:26px;
}
.btn-filter{
	font-family:"Noto Sans TC";
	font-size:18px;
	letter-spacing:2px;
	color:#696767;
	background:transparent;
	border: 1px solid #696767;
	padding:2px 30px;
	border-radius:5px;
}
.btn-auth {
    font-family: "Noto Sans TC";
    background: #F6C89F;
    color: #333A56;
    font-size: 17px;
    letter-spacing: 7.5px;
    border-radius: 5px;
    border: none;
    padding: 12px 16px;
}
.row-custom{
   	gap:3%;
}
.row-custom >*{
	width:48.5%;
	max-width: 100%;
	flex:0 0 auto;
}
.card{
	position:relative;
	border:0;
}
.outofstock{
	position: absolute;
	border:1px solid #607D8B;
	padding:3px;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	width:85%;
	text-align: center;
	font-size:16px;
	color:#607D8B;
}
.card-body{
	padding:0 8px;
	margin-top:16px;
	margin-bottom:31px;
}
.card-title{
	font-family:"Noto Sans TC";
	letter-spacing:2px;
	margin-bottom:10px;
	color:#696767;
	font-size:14px;
}
.product-name{
	font-size:17px;
}
.card-text{
	font-family:"Noto Sans TC";
	letter-spacing:2px;	
	color:#696767;
	font-size:16px;
	margin-bottom:10px;
}
.card-text-salecount-lg{
	display:none;
}
.card-text-salecount-sm{
	font-family:"Noto Sans TC";
	letter-spacing:2px;
	color:#696767;
	font-size:14px;
	margin-bottom:8px;
}
.pagination{
	gap:8px;
}
.pagination li{
	font-family:"Noto Sans TC";
	letter-spacing:2px;
	font-size:14px;
	padding-left: 8px;
    padding-right: 6px;
    padding-top: 0px;
    padding-bottom: 2px;
}
.pagination li.active{
	border-radius: 99em;
    background: #FEE4CD;
    border-color: #F6C89F;
}
.pagination li img{
	height:15px;
	padding-bottom: 3px;
}
.filter-group{
	margin-bottom:40px;
}
.filter-title{
	font-family:"Noto Sans TC";
	font-size:18px;
	color:#5685A2;
	text-align:center;
	letter-spacing:2px;
	margin-bottom:10px;
	padding-bottom:10px;
	border-bottom:1px solid #696767;
}
.filter-options{
	display:grid;
	gap:6px 10px;
}
.filter-options.grid-2{ grid-template-columns:1fr 1fr; }
.filter-options.grid-1{ grid-template-columns:1fr; }
.f-option{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.f-option .label{
	font-family:"Noto Sans TC";
	font-size:18px;
	color:#696767;
	text-align:center;
	letter-spacing:2px;
}
.circle-check {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid #696767;
  background-color: #fff;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
  cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
  margin: 0 6px 0 0;
}

.circle-check::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #5685A2;
}

.circle-check:checked::before {
  transform: scale(1);
}

.circle-check:hover {
  box-shadow: 0 0 0 3px rgba(86,133,162,0.15);
}

.circle-check:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(86,133,162,0.25);
}
.color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

.color-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.color-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.color-option .swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: inline-block;
  position: relative;
  transition: all .2s ease;
}

/* 勾選時外框與打勾符號 */
.color-option input:checked + .swatch {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(86,133,162,0.4);
}

.color-option input:checked + .swatch::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-55%);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0,0,0,.25);
}

.color-option .label {
  font-size: 13px;
  color: #333A56;
}

/* Inputs */
.form-control {
  font-family: 'Noto Sans TC';
  font-size: 16px;
  letter-spacing: 2px;
  border-radius: 5px;
  border: 1px solid #D4D0C9;
  padding: 12px 14px;
}
.form-control::placeholder {
  color:#D4D0C9;
}
.form-control:focus {
  border-color: #5685A2;
  box-shadow: 0 0 0 0.2rem rgba(86,133,162,0.25);
}
/* 選項反灰 */
  .f-option.disabled,
  .color-option.disabled {
    opacity: .45;
    pointer-events: none;
  }
@media (min-width: 992px) {
	.filter-block{
		margin-top:87px;
	}
	.product-block{
		margin-top:49px;
	}
	.filter-block img{
		height:auto;
	}
	.btn-filter{
		font-size:19px;
		letter-spacing:2px;
		ppadding: 0 50px 2px 50px;
	}
	.row-custom{
    	gap:6.35%;
	}
	.row-custom >*{
    	width: 29.1%;
	}
	.card-body{
		margin-top:24px;
		margin-bottom:78px;
	}
	.card-title{
		font-size:16px;
	}
	.product-name{
		font-size:18px;
	}
	.card-text{
		font-size:17px;
		margin-bottom:0;
	}
	.card-text-salecount-lg{
		display:block;
		float: right;
		font-family:"Noto Sans TC";
		letter-spacing:2px;
		color:#696767;
		font-size:17px;
	}
	.card-text-salecount-sm{
		display:none;
	}
	.pagination li{
		font-size:16px;
	}
}