@import url(‘https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600;700&display=swap’);
/* ===== 全局變數 ===== */
.ys-shop-page {
–ys-cream: #F6F7F0;
–ys-milk-tea: #EDE4D8;
–ys-milk-tea-light: #F5F0E8;
–ys-milk-tea-dark: #D5C8B8;
–ys-gold: #C9A96E;
–ys-gold-hover: #B8944F;
–ys-gold-light: #D9C49A;
–ys-gold-pale: #F0E6D0;
–ys-brown-dark: #2C2420;
–ys-brown: #4A3F37;
–ys-brown-medium: #7A6E65;
–ys-brown-light: #A99E95;
–ys-border: #E8DFD4;
–ys-border-light: #F0EAE2;
–ys-white: #FFFFFF;
–ys-success: #7D8E6B;
–ys-error: #C67B6B;
–ys-font-serif: ‘Cormorant Garamond’, ‘Noto Serif TC’, serif;
–ys-font-sans: ‘Noto Sans TC’, -apple-system, BlinkMacSystemFont, sans-serif;
}
/* ===== Reset ===== */
.ys-shop-page *,
.ys-shop-page *::before,
.ys-shop-page *::after {
box-sizing: border-box;
}
/* ===== 頁面容器 ===== */
.ys-shop-page {
background-color: var(–ys-cream);
font-family: var(–ys-font-sans);
color: var(–ys-brown-dark);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ===== Hero 區塊 ===== */
.ys-shop-hero {
position: relative;
padding: 160px 40px 100px;
text-align: center;
background: var(–ys-brown-dark);
overflow: hidden;
min-height: 70vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ys-shop-hero::before {
content: ”;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url(‘https://yscrystal.com/wp-content/uploads/2026/04/TT-153.webp’) 60% center/cover no-repeat;
opacity: 1;
filter: brightness(0.62) saturate(0.9);
pointer-events: none;
}
.ys-shop-hero-overlay {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 50% 42%, rgba(255, 245, 228, 0.08) 0%, rgba(255, 245, 228, 0) 32%),
rgba(0, 0, 0, 0.46);
pointer-events: none;
}
.ys-shop-particles {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.ys-sp {
position: absolute;
bottom: -12px;
width: var(–p-size, 4px);
height: var(–p-size, 4px);
border-radius: 50%;
background: rgba(240, 230, 208, 0.92);
box-shadow:
0 0 10px rgba(217, 196, 154, 0.52),
0 0 22px rgba(240, 230, 208, 0.24);
filter: blur(var(–p-blur, 0px));
opacity: 0;
animation: ysShopFloat linear infinite;
}
@keyframes ysShopFloat {
0% { opacity: 0; transform: translateY(0) scale(0.2); }
12% { opacity: 0.88; }
55% { opacity: 0.42; }
85% { opacity: 0.15; }
100% { opacity: 0; transform: translateY(-80vh) scale(1.7); }
}
.ys-shop-scroll-hint {
position: relative;
margin-top: 40px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.ys-shop-scroll-hint span {
font-family: var(–ys-font-sans);
font-size: 11px;
letter-spacing: 2px;
color: rgba(255,255,255,0.5);
}
.ys-scroll-dot {
animation: ysScrollDot 2s ease-in-out infinite;
}
@keyframes ysScrollDot {
0%, 100% { cy: 10; opacity: 0.7; }
50% { cy: 22; opacity: 0.3; }
}
.ys-shop-hero::after {
content: ”;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(–ys-gold);
}
.ys-hero-badge {
display: inline-block;
font-family: var(–ys-font-serif);
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(–ys-gold-light);
margin-bottom: 20px;
position: relative;
font-weight: 500;
}
.ys-shop-hero h1 {
font-family: var(–ys-font-serif);
font-size: clamp(32px, 5vw, 52px);
font-weight: 300;
letter-spacing: 8px;
color: var(–ys-white);
margin: 0 0 16px;
position: relative;
}
.ys-hero-sub {
font-family: var(–ys-font-sans);
font-size: 14px;
font-weight: 300;
letter-spacing: 2px;
color: rgba(255,255,255,0.7);
position: relative;
max-width: 500px;
margin: 0 auto;
}
/* ===== 金色裝飾分隔線 ===== */
.ys-gold-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 30px 0;
}
.ys-gold-divider::before,
.ys-gold-divider::after {
content: ”;
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(–ys-gold-light), transparent);
}
.ys-gold-divider svg {
width: 16px;
height: 16px;
fill: var(–ys-gold);
opacity: 0.6;
}
/* ===== 分類導航區 ===== */
.ys-shop-categories {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px 40px;
}
.ys-categories-grid {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.ys-category-card {
position: relative;
overflow: hidden;
min-width: 160px;
max-width: 220px;
flex: 1;
text-decoration: none;
color: var(–ys-brown-dark);
border: 1px solid var(–ys-border);
background: var(–ys-white);
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ys-category-card:hover {
border-color: var(–ys-gold-light);
box-shadow: 0 8px 30px rgba(44, 36, 32, 0.08);
transform: translateY(-3px);
}
.ys-category-card-img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
object-position: 60% center;
display: block;
filter: brightness(0.56) saturate(0.94);
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
}
.ys-category-card:hover .ys-category-card-img {
transform: scale(1.06);
filter: brightness(0.72) saturate(0.98);
}
.ys-category-card-body {
padding: 18px 16px;
text-align: center;
position: relative;
}
.ys-category-card-name {
font-family: var(–ys-font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 2px;
color: var(–ys-brown-dark);
margin: 0;
}
.ys-category-card-count {
font-family: var(–ys-font-serif);
font-size: 11px;
color: var(–ys-brown-light);
letter-spacing: 1px;
margin-top: 4px;
}
/* ===== 工具列（排序 + 結果數） ===== */
.ys-shop-toolbar {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px 30px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 16px;
}
.ys-shop-toolbar .woocommerce-result-count {
font-size: 13px;
color: var(–ys-brown-medium);
letter-spacing: 1px;
margin: 0;
}
.ys-shop-toolbar .woocommerce-ordering {
margin: 0;
}
.ys-shop-toolbar .woocommerce-ordering select {
padding: 10px 40px 10px 16px;
font-family: var(–ys-font-sans);
font-size: 13px;
color: var(–ys-brown);
background: var(–ys-white);
border: 1px solid var(–ys-border);
outline: none;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
cursor: pointer;
transition: border-color 0.3s;
background-image: url(“data:image/svg+xml,%3Csvg xmlns=’http://www.w3.org/2000/svg’ width=’12’ height=’12’ viewBox=’0 0 12 12’%3E%3Cpath fill=’%23A99E95′ d=’M6 8L1 3h10z’/%3E%3C/svg%3E”);
background-repeat: no-repeat;
background-position: right 14px center;
letter-spacing: 1px;
}
.ys-shop-toolbar .woocommerce-ordering select:focus {
border-color: var(–ys-gold);
}
/* ===== 視圖切換 ===== */
.ys-view-toggle {
display: flex;
gap: 8px;
align-items: center;
}
.ys-view-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(–ys-border);
cursor: pointer;
padding: 0;
transition: all 0.3s;
}
.ys-view-btn:hover,
.ys-view-btn.ys-active {
border-color: var(–ys-gold);
background: var(–ys-gold-pale);
}
.ys-view-btn svg {
width: 16px;
height: 16px;
stroke: var(–ys-brown-medium);
fill: none;
stroke-width: 1.5;
}
.ys-view-btn.ys-active svg {
stroke: var(–ys-gold-hover);
}
/* ===== 篩選側邊欄（桌面） ===== */
.ys-shop-layout {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
display: grid;
grid-template-columns: 260px 1fr;
gap: 50px;
align-items: start;
}
.ys-shop-sidebar {
position: sticky;
top: 30px;
background: var(–ys-white);
border: 1px solid var(–ys-border);
padding: 0;
box-shadow: 0 2px 16px rgba(44, 36, 32, 0.04);
}
.ys-sidebar-section {
padding: 24px;
border-bottom: 1px solid var(–ys-border-light);
}
.ys-sidebar-section:last-child {
border-bottom: none;
}
.ys-sidebar-title {
font-family: var(–ys-font-serif);
font-size: 14px;
font-weight: 500;
letter-spacing: 2px;
color: var(–ys-brown-dark);
margin: 0 0 16px;
text-transform: uppercase;
}
/* 價格範圍滑桿 */
.ys-price-range {
padding: 8px 0;
}
.ys-price-slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 2px;
background: var(–ys-border);
outline: none;
transition: background 0.3s;
}
.ys-price-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: var(–ys-gold);
border: 2px solid var(–ys-white);
box-shadow: 0 1px 4px rgba(0,0,0,0.15);
cursor: pointer;
border-radius: 50%;
}
.ys-price-display {
display: flex;
justify-content: space-between;
margin-top: 10px;
font-size: 12px;
color: var(–ys-brown-medium);
letter-spacing: 1px;
}
/* 篩選清單 */
.ys-filter-list {
list-style: none;
margin: 0;
padding: 0;
}
.ys-filter-list li {
margin-bottom: 0;
}
.ys-filter-list li a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
font-size: 13px;
color: var(–ys-brown-medium);
text-decoration: none;
border-bottom: 1px solid var(–ys-border-light);
transition: all 0.3s;
letter-spacing: 0.5px;
}
.ys-filter-list li:last-child a {
border-bottom: none;
}
.ys-filter-list li a:hover {
color: var(–ys-gold-hover);
padding-left: 6px;
}
.ys-filter-list li a .ys-count {
font-size: 11px;
color: var(–ys-brown-light);
background: var(–ys-milk-tea-light);
padding: 2px 8px;
min-width: 28px;
text-align: center;
}
.ys-filter-list li.ys-current a {
color: var(–ys-gold-hover);
font-weight: 500;
}
/* 清除篩選 */
.ys-clear-filters {
display: inline-block;
margin-top: 16px;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(–ys-brown-light);
text-decoration: none;
transition: color 0.3s;
}
.ys-clear-filters:hover {
color: var(–ys-gold-hover);
}
/* ===== 商品網格 ===== */
.ys-shop-content {
min-height: 400px;
}
/* WooCommerce 產品列表 */
.ys-shop-page ul.products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
list-style: none;
margin: 0;
padding: 0;
}
.ys-shop-page ul.products.columns-2 {
grid-template-columns: repeat(2, 1fr);
}
.ys-shop-page ul.products.columns-4 {
grid-template-columns: repeat(4, 1fr);
}
/* ===== 商品卡片 ===== */
.ys-shop-page ul.products li.product {
margin: 0;
padding: 0;
background: var(–ys-white);
border: 1px solid var(–ys-border);
overflow: hidden;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
}
.ys-shop-page ul.products li.product:hover {
border-color: var(–ys-gold-light);
box-shadow: 0 12px 40px rgba(44, 36, 32, 0.08);
transform: translateY(-4px);
}
/* 商品圖片 */
.ys-shop-page ul.products li.product a img,
.ys-shop-page ul.products li.product .attachment-woocommerce_thumbnail {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
object-position: 60% center;
display: block;
filter: brightness(0.55) saturate(0.92);
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s, filter 0.4s ease;
}
.ys-shop-page ul.products li.product:hover a img {
transform: scale(1.05);
filter: brightness(0.72) saturate(0.98);
}
/* 圖片容器 */
.ys-shop-page ul.products li.product a {
display: block;
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
}
.ys-shop-page ul.products li.product a::after {
content: ”;
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.18);
pointer-events: none;
transition: opacity 0.4s ease;
}
.ys-shop-page ul.products li.product:hover a::after {
opacity: 0.08;
}
/* 特價標籤 */
.ys-shop-page ul.products li.product .onsale {
position: absolute;
top: 16px;
left: 16px;
z-index: 2;
background: var(–ys-gold);
color: var(–ys-white);
font-family: var(–ys-font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 14px;
line-height: 1;
border-radius: 0;
min-height: auto;
min-width: auto;
}
/* 新品標籤（由 PHP 注入） */
.ys-shop-page ul.products li.product .ys-badge-new {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
background: var(–ys-brown-dark);
color: var(–ys-cream);
font-family: var(–ys-font-sans);
font-size: 10px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 14px;
line-height: 1;
}
/* 快速瀏覽按鈕（浮層） */
.ys-shop-page ul.products li.product .ys-quick-view {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(44, 36, 32, 0.85);
color: var(–ys-cream);
font-family: var(–ys-font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
padding: 14px;
opacity: 0;
transform: translateY(100%);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
cursor: pointer;
border: none;
width: 100%;
text-decoration: none;
display: block;
}
.ys-shop-page ul.products li.product:hover .ys-quick-view {
opacity: 1;
transform: translateY(0);
}
/* 商品資訊區 */
.ys-shop-page ul.products li.product .ys-product-info {
padding: 20px 20px 16px;
text-align: center;
}
.ys-shop-page ul.products li.product .woocommerce-loop-product__title,
.ys-shop-page ul.products li.product h2 {
font-family: var(–ys-font-sans);
font-size: 14px;
font-weight: 400;
letter-spacing: 1px;
color: var(–ys-brown-dark);
margin: 0 0 6px;
line-height: 1.5;
padding: 0;
}
/* 商品副標題（分類） */
.ys-shop-page ul.products li.product .ys-product-cat {
font-family: var(–ys-font-serif);
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(–ys-gold);
margin-bottom: 10px;
display: block;
}
/* 價格 */
.ys-shop-page ul.products li.product .price {
font-family: var(–ys-font-serif);
font-size: 18px;
font-weight: 400;
color: var(–ys-brown-dark);
letter-spacing: 1px;
margin: 0;
padding: 0;
}
.ys-shop-page ul.products li.product .price del {
color: var(–ys-brown-light);
font-size: 14px;
opacity: 0.6;
margin-right: 8px;
}
.ys-shop-page ul.products li.product .price ins {
text-decoration: none;
color: var(–ys-gold-hover);
}
/* 評分 */
.ys-shop-page ul.products li.product .star-rating {
font-size: 12px;
margin: 8px auto 0;
color: var(–ys-gold);
}
/* 加入購物車按鈕 */
.ys-shop-page ul.products li.product .button,
.ys-shop-page ul.products li.product .add_to_cart_button,
.ys-shop-page ul.products li.product .product_type_simple {
display: block;
width: calc(100% – 40px);
margin: 12px auto 20px;
padding: 12px 20px;
font-family: var(–ys-font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 3px;
text-transform: uppercase;
text-align: center;
color: var(–ys-gold-hover);
background: transparent;
border: 1px solid var(–ys-gold-light);
cursor: pointer;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
text-decoration: none;
border-radius: 0;
}
.ys-shop-page ul.products li.product .button:hover,
.ys-shop-page ul.products li.product .add_to_cart_button:hover {
background: var(–ys-gold);
color: var(–ys-white);
border-color: var(–ys-gold);
}
/* 已加入購物車 */
.ys-shop-page ul.products li.product .added_to_cart {
display: block;
text-align: center;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(–ys-success);
text-decoration: none;
margin: -8px auto 12px;
transition: color 0.3s;
}
.ys-shop-page ul.products li.product .added_to_cart:hover {
color: var(–ys-gold-hover);
}
/* ===== 空商店狀態 ===== */
.ys-empty-shop {
text-align: center;
padding: 80px 40px;
}
.ys-empty-shop-icon {
width: 80px;
height: 80px;
margin: 0 auto 30px;
opacity: 0.3;
}
.ys-empty-shop h3 {
font-family: var(–ys-font-serif);
font-size: 24px;
font-weight: 400;
letter-spacing: 3px;
color: var(–ys-brown-dark);
margin: 0 0 12px;
}
.ys-empty-shop p {
font-size: 14px;
color: var(–ys-brown-medium);
line-height: 1.8;
max-width: 400px;
margin: 0 auto;
}
/* ===== WooCommerce 通知 ===== */
.ys-shop-page .woocommerce-info,
.ys-shop-page .woocommerce-message {
background: var(–ys-milk-tea-light);
border: 1px solid var(–ys-border);
border-left: 3px solid var(–ys-gold);
padding: 20px 28px;
font-size: 14px;
color: var(–ys-brown);
margin-bottom: 24px;
line-height: 1.7;
}
.ys-shop-page .woocommerce-info::before,
.ys-shop-page .woocommerce-message::before {
color: var(–ys-gold);
}
.ys-shop-page .woocommerce-info a.button {
display: inline-block;
margin-top: 8px;
padding: 10px 28px;
font-family: var(–ys-font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(–ys-white);
background: var(–ys-gold);
border: none;
text-decoration: none;
cursor: pointer;
transition: all 0.4s;
}
.ys-shop-page .woocommerce-info a.button:hover {
background: var(–ys-gold-hover);
}
/* ===== 分頁 ===== */
.ys-shop-page .woocommerce-pagination,
.ys-shop-page nav.woocommerce-pagination {
margin-top: 50px;
padding-bottom: 60px;
text-align: center;
}
.ys-shop-page .woocommerce-pagination ul {
display: inline-flex;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
border: none;
}
.ys-shop-page .woocommerce-pagination ul li {
border: none;
}
.ys-shop-page .woocommerce-pagination ul li a,
.ys-shop-page .woocommerce-pagination ul li span {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
font-family: var(–ys-font-serif);
font-size: 14px;
color: var(–ys-brown-medium);
background: var(–ys-white);
border: 1px solid var(–ys-border);
text-decoration: none;
transition: all 0.3s;
}
.ys-shop-page .woocommerce-pagination ul li a:hover,
.ys-shop-page .woocommerce-pagination ul li span.current {
background: var(–ys-gold);
color: var(–ys-white);
border-color: var(–ys-gold);
}
/* ===== 頁尾裝飾 ===== */
.ys-shop-footer-decor {
text-align: center;
padding: 40px 0;
margin-top: 20px;
border-top: 1px solid var(–ys-border-light);
}
.ys-shop-footer-decor span {
font-family: var(–ys-font-serif);
font-size: 11px;
letter-spacing: 4px;
color: var(–ys-brown-light);
text-transform: uppercase;
}
/* ===== 隱藏 WC 預設雜項 ===== */
.ys-shop-page .screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
}
.ys-shop-page .woocommerce .clear {
display: none;
}
/* ===== 頁面進場動畫 ===== */
.ys-fade-in {
opacity: 0;
transform: translateY(20px);
animation: ysFadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.ys-fade-in-delay { animation-delay: 0.15s; }
.ys-fade-in-delay-2 { animation-delay: 0.3s; }
.ys-fade-in-delay-3 { animation-delay: 0.45s; }
@keyframes ysFadeIn {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 商品卡片滾動動畫 */
.ys-shop-page ul.products li.product {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out, border-color 0.5s, box-shadow 0.5s;
}
.ys-shop-page ul.products li.product.ys-visible {
opacity: 1;
transform: translateY(0);
}
/* ===== 載入進度條 ===== */
.ys-loading-bar {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(–ys-gold-light), var(–ys-gold), var(–ys-gold-light));
z-index: 9999;
transition: width 0.3s;
pointer-events: none;
}
.ys-loading-bar.ys-loaded {
width: 100%;
opacity: 0;
transition: width 0.3s, opacity 0.4s 0.3s;
}
/* ===== 手機篩選按鈕 ===== */
.ys-mobile-filter-btn {
display: none;
width: 100%;
padding: 14px;
font-family: var(–ys-font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(–ys-brown-dark);
background: var(–ys-white);
border: 1px solid var(–ys-border);
cursor: pointer;
text-align: center;
transition: all 0.3s;
margin-bottom: 20px;
}
.ys-mobile-filter-btn:hover {
border-color: var(–ys-gold);
}
.ys-mobile-filter-btn svg {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 8px;
stroke: var(–ys-gold);
}
/* ===== 連結統一樣式 ===== */
.ys-shop-page a:not(.button):not(.add_to_cart_button):not(.ys-category-card):not(.added_to_cart) {
color: var(–ys-gold-hover);
text-decoration: none;
transition: color 0.3s;
}
.ys-shop-page a:not(.button):not(.add_to_cart_button):not(.ys-category-card):not(.added_to_cart):hover {
color: var(–ys-brown-dark);
}
/* ===== 捲軸: 使用瀏覽器預設 ===== */
/* ===== 響應式 ===== */
@media (max-width: 1024px) {
.ys-shop-layout {
grid-template-columns: 220px 1fr;
gap: 30px;
}
.ys-shop-page ul.products {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.ys-shop-page ul.products.columns-4 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.ys-shop-hero {
padding: 120px 24px 70px;
min-height: 50vh;
}
.ys-shop-hero h1 {
letter-spacing: 4px;
}
.ys-shop-categories {
padding: 0 20px 30px;
}
.ys-categories-grid {
gap: 12px;
}
.ys-category-card {
min-width: 130px;
}
.ys-shop-toolbar {
padding: 0 20px 20px;
}
.ys-shop-layout {
grid-template-columns: 1fr;
padding: 0 20px;
gap: 0;
}
.ys-shop-sidebar {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9998;
overflow-y: auto;
padding-bottom: 80px;
}
.ys-shop-sidebar.ys-sidebar-open {
display: block;
}
.ys-mobile-filter-btn {
display: block;
}
.ys-sidebar-close {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
font-family: var(–ys-font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(–ys-brown-dark);
border-bottom: 1px solid var(–ys-border);
cursor: pointer;
background: none;
border-top: none;
border-left: none;
border-right: none;
width: 100%;
}
.ys-shop-page ul.products {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.ys-shop-page ul.products li.product .ys-product-info {
padding: 14px 14px 12px;
}
.ys-shop-page ul.products li.product .woocommerce-loop-product__title,
.ys-shop-page ul.products li.product h2 {
font-size: 12px;
}
.ys-shop-page ul.products li.product .price {
font-size: 15px;
}
.ys-shop-page ul.products li.product .button {
width: calc(100% – 28px);
padding: 10px 14px;
font-size: 10px;
letter-spacing: 2px;
margin: 8px auto 14px;
}
}
@media (max-width: 480px) {
.ys-categories-grid {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
justify-content: flex-start;
}
.ys-category-card {
min-width: 130px;
flex: 0 0 auto;
}
.ys-shop-page ul.products {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.ys-shop-page ul.products li.product .ys-quick-view {
display: none;
}
}
/* ===== 桌面隱藏行動版關閉按鈕 ===== */
@media (min-width: 769px) {
.ys-sidebar-close {
display: none;
}
}
/* ===== 行動篩選 overlay 背景 ===== */
.ys-sidebar-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(44, 36, 32, 0.4);
z-index: 9997;
}
.ys-sidebar-overlay.ys-show {
display: block;
}
精品商店
探索大自然的瑰寶，每一件皆為獨一無二的天然臻品
(function() {
/* 頁面載入進度條 */
var bar = document.getElementById(‘ysLoadingBar’);
if (bar) {
bar.style.width = ‘70%’;
var onReady = function() {
bar.classList.add(‘ys-loaded’);
setTimeout(function() {
if (bar.parentNode) {
bar.parentNode.removeChild(bar);
}
}, 800);
};
if (document.readyState === ‘complete’) {
onReady();
} else {
window.addEventListener(‘load’, onReady);
}
}
/* 商品卡片滾動進場動畫 */
var initProductAnimate = function() {
if (!(‘IntersectionObserver’ in window)) {
/* 不支援 Observer 時直接顯示所有商品 */
var all = document.querySelectorAll(‘.ys-shop-page ul.products li.product’);
all.forEach(function(el) { el.classList.add(‘ys-visible’); });
return;
}
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var delay = Array.prototype.indexOf.call(
entry.target.parentNode.children,
entry.target
) % 3;
entry.target.style.transitionDelay = (delay * 0.1) + ‘s’;
entry.target.classList.add(‘ys-visible’);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.08 });
var products = document.querySelectorAll(‘.ys-shop-page ul.products li.product’);
products.forEach(function(p) { observer.observe(p); });
};
var initHeroParticles = function() {
var pc = document.getElementById(‘ysShopParticles’);
if (!pc) return;
for (var i = 0; i < 34; i++) {
var d = document.createElement('div');
d.className = 'ys-sp';
d.style.left = Math.random() * 100 + '%';
d.style.setProperty('–p-size', (2 + Math.random() * 5) + 'px');
d.style.setProperty('–p-blur', (Math.random() * 1.5) + 'px');
d.style.animationDelay = Math.random() * 8 + 's';
d.style.animationDuration = (6 + Math.random() * 6) + 's';
pc.appendChild(d);
}
};
/* 行動版篩選面板 */
var initMobileFilter = function() {
var btn = document.querySelector('.ys-mobile-filter-btn');
var sidebar = document.querySelector('.ys-shop-sidebar');
var overlay = document.querySelector('.ys-sidebar-overlay');
var closeBtn = document.querySelector('.ys-sidebar-close');
if (!btn) return;
if (!sidebar) return;
btn.addEventListener('click', function() {
sidebar.classList.add('ys-sidebar-open');
if (overlay) overlay.classList.add('ys-show');
document.body.style.overflow = 'hidden';
});
var closeSidebar = function() {
sidebar.classList.remove('ys-sidebar-open');
if (overlay) overlay.classList.remove('ys-show');
document.body.style.overflow = '';
};
if (closeBtn) closeBtn.addEventListener('click', closeSidebar);
if (overlay) overlay.addEventListener('click', closeSidebar);
};
/* 初始化 */
var init = function() {
initHeroParticles();
initProductAnimate();
initMobileFilter();
};
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();