:root { --sk-rose: #C77DBA;
--sk-rose-dark: #A85D9C;
--sk-rose-light: #F5E6F3;
--sk-navy: #2D3748;
--sk-navy-light: #4A5568;
--sk-coral: #ED8936;
--sk-gold: #D69E2E;
--sk-gold-light: #F6E05E; --sk-white: #FFFFFF;
--sk-snow: #FAFBFC;
--sk-pearl: #F5F6F8;
--sk-silver: #E8EAED;
--sk-ash: #9CA3AF;
--sk-slate: #64748B;
--sk-charcoal: #374151;
--sk-ink: #1F2937; --sk-success: #10B981;
--sk-warning: #F59E0B;
--sk-error: #EF4444;
--sk-info: #3B82F6; --sk-font: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--sk-font-display: 'Playfair Display', Georgia, serif; --sk-text-xs: 0.75rem;
--sk-text-sm: 0.875rem;
--sk-text-base: 1rem;
--sk-text-lg: 1.125rem;
--sk-text-xl: 1.25rem;
--sk-text-2xl: 1.5rem;
--sk-text-3xl: 2rem;
--sk-text-4xl: 2.5rem; --sk-space-1: 0.25rem;
--sk-space-2: 0.5rem;
--sk-space-3: 0.75rem;
--sk-space-4: 1rem;
--sk-space-5: 1.25rem;
--sk-space-6: 1.5rem;
--sk-space-8: 2rem;
--sk-space-10: 2.5rem;
--sk-space-12: 3rem;
--sk-space-16: 4rem;
--sk-space-20: 5rem; --sk-radius-sm: 4px;
--sk-radius-md: 8px;
--sk-radius-lg: 12px;
--sk-radius-xl: 16px;
--sk-radius-2xl: 24px;
--sk-radius-full: 9999px; --sk-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--sk-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--sk-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--sk-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--sk-shadow-rose: 0 4px 14px 0 rgba(232, 160, 191, 0.35);
--sk-shadow-navy: 0 4px 14px 0 rgba(27, 54, 93, 0.25); --sk-ease: cubic-bezier(0.4, 0, 0.2, 1);
--sk-duration-fast: 150ms;
--sk-duration-normal: 300ms;
--sk-duration-slow: 500ms; --sk-container: 1280px;
--sk-header-height: 72px;
--sk-sidebar-width: 280px;
} *, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--sk-font);
font-size: var(--sk-text-base);
line-height: 1.6;
color: var(--sk-charcoal);
background: var(--sk-snow);
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--sk-navy);
text-decoration: none;
transition: color var(--sk-duration-fast) var(--sk-ease);
}
a:hover {
color: var(--sk-rose-dark);
}
ul, ol {
list-style: none;
}
button {
cursor: pointer;
font-family: inherit;
} .sk-container {
width: 100%;
max-width: var(--sk-container);
margin: 0 auto;
padding: 0 var(--sk-space-6);
}
.sk-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
} .sk-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--sk-header-height);
background: var(--sk-white);
box-shadow: var(--sk-shadow-sm);
z-index: 1000;
transition: all var(--sk-duration-normal) var(--sk-ease);
}
.sk-header.scrolled {
box-shadow: var(--sk-shadow-md);
}
.sk-header-inner {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
gap: var(--sk-space-8);
} .sk-logo-wrap {
flex-shrink: 0;
}
.sk-logo {
display: flex;
align-items: center;
gap: var(--sk-space-3);
font-family: var(--sk-font-display);
font-size: var(--sk-text-xl);
font-weight: 600;
color: var(--sk-navy);
}
.sk-logo img,
.sk-logo-wrap img,
.custom-logo {
max-height: calc(var(--sk-header-height) - 20px);
height: auto;
width: auto;
object-fit: contain;
}
.sk-logo:hover {
color: var(--sk-rose-dark);
} .sk-search-dropdown {
position: fixed;
top: var(--sk-header-height);
left: 0;
right: 0;
background: var(--sk-white);
padding: var(--sk-space-4);
box-shadow: var(--sk-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--sk-duration-fast) var(--sk-ease);
z-index: 999;
}
.sk-search-dropdown.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.sk-search-form {
display: flex;
align-items: center;
background: var(--sk-pearl);
border-radius: var(--sk-radius-full);
padding: var(--sk-space-2) var(--sk-space-4);
max-width: 600px;
margin: 0 auto;
transition: all var(--sk-duration-fast) var(--sk-ease);
}
.sk-search-form:focus-within {
background: var(--sk-white);
box-shadow: 0 0 0 2px var(--sk-rose);
}
.sk-search-input {
flex: 1;
border: none;
background: transparent;
padding: var(--sk-space-2);
font-size: var(--sk-text-sm);
color: var(--sk-charcoal);
outline: none;
}
.sk-search-input::placeholder {
color: var(--sk-ash);
}
.sk-search-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: linear-gradient(135deg, var(--sk-rose), var(--sk-rose-dark));
border: none;
border-radius: var(--sk-radius-full);
color: var(--sk-white);
transition: transform var(--sk-duration-fast) var(--sk-ease);
}
.sk-search-btn:hover {
transform: scale(1.05);
} .sk-nav {
display: flex;
align-items: center;
gap: var(--sk-space-6);
}
.sk-nav-menu {
display: flex;
align-items: center;
gap: var(--sk-space-2);
list-style: none;
margin: 0;
padding: 0;
}
.sk-nav-menu li a,
.sk-nav-link {
display: flex;
align-items: center;
padding: var(--sk-space-2) var(--sk-space-6);
font-size: var(--sk-text-sm);
font-weight: 500;
color: var(--sk-charcoal);
border-radius: var(--sk-radius-md);
transition: all var(--sk-duration-fast) var(--sk-ease);
white-space: nowrap;
}
.sk-nav-menu li a:hover,
.sk-nav-link:hover {
background: var(--sk-rose-light);
color: var(--sk-rose-dark);
} .sk-header-actions {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-header-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: transparent;
border: none;
border-radius: var(--sk-radius-full);
color: var(--sk-charcoal);
transition: all var(--sk-duration-fast) var(--sk-ease);
}
.sk-header-btn:hover {
background: var(--sk-rose-light);
color: var(--sk-rose-dark);
}
.sk-header-btn svg {
width: 22px;
height: 22px;
}
.sk-cart-count {
position: absolute;
top: 4px;
right: 4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--sk-coral);
color: var(--sk-white);
font-size: 11px;
font-weight: 600;
line-height: 18px;
text-align: center;
border-radius: var(--sk-radius-full);
} .sk-menu-toggle {
display: none;
} .sk-main {
min-height: calc(100vh - var(--sk-header-height));
padding-top: var(--sk-header-height);
}
.sk-page-header {
padding: var(--sk-space-10) 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
color: var(--sk-white);
text-align: center;
position: relative;
overflow: hidden;
}
.sk-page-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
opacity: 0.5;
}
.sk-page-header::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
animation: shine 6s ease-in-out infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes shine {
0%, 100% { transform: translate(-30%, -30%) rotate(0deg); }
50% { transform: translate(30%, 30%) rotate(180deg); }
}
.sk-page-header .sk-container {
position: relative;
z-index: 1;
}
.sk-page-header-content {
max-width: 700px;
margin: 0 auto;
}
.sk-page-subtitle {
font-size: var(--sk-text-base);
color: rgba(255, 255, 255, 0.85);
margin-bottom: var(--sk-space-3);
letter-spacing: 0.1em;
} .sk-shop-search {
margin: var(--sk-space-5) 0;
}
.sk-shop-search-box {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--sk-radius-full);
padding: var(--sk-space-1);
max-width: 400px;
margin: 0 auto;
transition: all 0.3s ease;
}
.sk-shop-search-box:focus-within {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
}
.sk-shop-search-box input {
flex: 1;
border: none;
background: transparent;
padding: var(--sk-space-2) var(--sk-space-4);
font-size: var(--sk-text-sm);
color: var(--sk-white);
outline: none;
}
.sk-shop-search-box input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.sk-shop-search-box button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border: none;
border-radius: var(--sk-radius-full);
color: var(--sk-white);
cursor: pointer;
transition: all 0.3s ease;
}
.sk-shop-search-box button:hover {
background: rgba(255, 255, 255, 0.3);
} .sk-category-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--sk-space-2);
margin-top: var(--sk-space-4);
}
.sk-cat-tag {
padding: var(--sk-space-1) var(--sk-space-4);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--sk-radius-full);
font-size: var(--sk-text-sm);
color: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
}
.sk-cat-tag:hover,
.sk-cat-tag.active {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.4);
color: var(--sk-white);
} .sk-header-deco {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.sk-deco-circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
}
.sk-deco-1 {
width: 300px;
height: 300px;
top: -100px;
right: -50px;
animation: float 8s ease-in-out infinite;
}
.sk-deco-2 {
width: 200px;
height: 200px;
bottom: -80px;
left: 10%;
animation: float 6s ease-in-out infinite reverse;
}
.sk-deco-3 {
width: 150px;
height: 150px;
top: 20%;
left: -30px;
animation: float 7s ease-in-out infinite 1s;
}
@keyframes float {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-20px) scale(1.05); }
}
.sk-page-title {
font-family: var(--sk-font-display);
font-size: var(--sk-text-3xl);
font-weight: 700;
margin-bottom: var(--sk-space-2);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
letter-spacing: 0.02em;
}
.sk-breadcrumb {
display: flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-2);
font-size: var(--sk-text-sm);
color: rgba(255, 255, 255, 0.85);
}
.sk-breadcrumb a {
color: rgba(255, 255, 255, 0.85);
transition: color 0.3s ease;
}
.sk-breadcrumb a:hover {
color: var(--sk-white);
} .sk-products {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sk-space-6);
padding: var(--sk-space-8) 0;
}
.sk-product-card {
background: var(--sk-white);
border-radius: var(--sk-radius-xl);
overflow: hidden;
transition: all var(--sk-duration-normal) var(--sk-ease);
}
.sk-product-card:hover {
transform: translateY(-4px);
box-shadow: var(--sk-shadow-lg);
}
.sk-product-image {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--sk-pearl);
}
.sk-product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--sk-duration-slow) var(--sk-ease);
}
.sk-product-card:hover .sk-product-image img {
transform: scale(1.05);
}
.sk-product-badge {
position: absolute;
top: var(--sk-space-3);
left: var(--sk-space-3);
padding: var(--sk-space-1) var(--sk-space-3);
background: var(--sk-coral);
color: var(--sk-white);
font-size: var(--sk-text-xs);
font-weight: 600;
border-radius: var(--sk-radius-full);
}
.sk-product-actions {
position: absolute;
bottom: var(--sk-space-3);
left: 50%;
transform: translateX(-50%) translateY(20px);
display: flex;
gap: var(--sk-space-2);
opacity: 0;
transition: all var(--sk-duration-normal) var(--sk-ease);
}
.sk-product-card:hover .sk-product-actions {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.sk-product-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--sk-white);
border: none;
border-radius: var(--sk-radius-full);
color: var(--sk-charcoal);
box-shadow: var(--sk-shadow-md);
transition: all var(--sk-duration-fast) var(--sk-ease);
}
.sk-product-action-btn:hover {
background: var(--sk-rose);
color: var(--sk-white);
}
.sk-product-info {
padding: var(--sk-space-4);
}
.sk-product-category {
font-size: var(--sk-text-xs);
color: var(--sk-ash);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--sk-space-1);
}
.sk-product-title {
font-size: var(--sk-text-base);
font-weight: 500;
color: var(--sk-charcoal);
margin-bottom: var(--sk-space-2);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sk-product-title a {
color: inherit;
}
.sk-product-title a:hover {
color: var(--sk-rose-dark);
}
.sk-product-price {
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.sk-price-current {
font-size: var(--sk-text-lg);
font-weight: 600;
color: var(--sk-rose-dark);
}
.sk-price-original {
font-size: var(--sk-text-sm);
color: var(--sk-ash);
text-decoration: line-through;
}  .sk-product-breadcrumb {
background: var(--sk-pearl);
padding: var(--sk-space-2) 0;
font-size: var(--sk-text-sm);
} .single-product .woocommerce-notices-wrapper:empty,
.single-product .woocommerce-notices-wrapper:not(:has(*)) {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
.single-product .woocommerce-notices-wrapper {
margin: 0;
}
.sk-product-breadcrumb .sk-breadcrumb {
justify-content: flex-start;
color: var(--sk-slate);
}
.sk-product-breadcrumb .sk-breadcrumb a {
color: var(--sk-slate);
}
.sk-product-breadcrumb .sk-breadcrumb a:hover {
color: var(--sk-rose-dark);
} .woocommerce.single-product div.product,
.single-product div.product {
display: grid;
grid-template-columns: 45% 55%;
gap: var(--sk-space-8);
padding: var(--sk-space-6) 0;
} .single-product div.product > div.images,
.single-product div.product > .woocommerce-product-gallery {
grid-column: 1;
grid-row: 1;
max-width: 100%;
overflow: hidden;
}
.single-product div.product > div.summary {
grid-column: 2;
grid-row: 1;
} .single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .upsells,
.single-product div.product > section {
grid-column: 1 / -1;
}
.single-product div.product div.images {
width: 100%;
position: relative;
padding: 0;
margin: 0;
}
.single-product div.product div.images .woocommerce-product-gallery {
width: 100% !important;
float: none !important;
margin: 0;
padding: 0;
}
.single-product div.product div.images figure.woocommerce-product-gallery__wrapper {
margin: 0;
}
.single-product div.product div.images img {
width: 100%;
border-radius: var(--sk-radius-xl);
} .single-product div.product div.images .flex-control-thumbs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: var(--sk-space-3);
padding: 0;
list-style: none;
}
.single-product div.product div.images .flex-control-thumbs li {
width: 70px;
height: 70px;
cursor: pointer;
border: 2px solid transparent;
border-radius: var(--sk-radius-md);
overflow: hidden;
transition: border-color 0.3s ease;
}
.single-product div.product div.images .flex-control-thumbs li:hover,
.single-product div.product div.images .flex-control-thumbs li.flex-active {
border-color: var(--sk-rose);
}
.single-product div.product div.images .flex-control-thumbs li img {
width: 100%;
height: 100%;
object-fit: cover;
} .single-product div.product div.summary {
width: 100%;
padding-top: var(--sk-space-4);
margin-top: 0;
}
.single-product div.product .product_title {
font-family: var(--sk-font-display);
font-size: var(--sk-text-2xl);
font-weight: 600;
color: var(--sk-ink);
margin-bottom: var(--sk-space-4);
line-height: 1.3;
}
.single-product div.product p.price,
.single-product div.product span.price {
font-size: var(--sk-text-2xl);
color: var(--sk-rose-dark);
font-weight: 600;
margin-bottom: var(--sk-space-4);
padding-bottom: var(--sk-space-4);
border-bottom: 1px solid var(--sk-silver);
}
.single-product div.product p.price del {
color: var(--sk-ash);
font-weight: 400;
font-size: var(--sk-text-lg);
}
.single-product div.product p.price ins {
text-decoration: none;
}
.single-product div.product .woocommerce-product-details__short-description {
font-size: var(--sk-text-base);
color: var(--sk-slate);
line-height: 1.7;
margin-bottom: var(--sk-space-6);
} .single-product div.product form.cart .variations {
width: 100%;
margin-bottom: var(--sk-space-4);
border-collapse: collapse;
}
.single-product div.product form.cart .variations tr {
display: flex;
align-items: center;
margin-bottom: var(--sk-space-3);
}
.single-product div.product form.cart .variations td.label {
padding: 0;
padding-right: var(--sk-space-4);
white-space: nowrap;
}
.single-product div.product form.cart .variations td.label label {
font-size: var(--sk-text-sm);
font-weight: 600;
color: var(--sk-charcoal);
}
.single-product div.product form.cart .variations td.value {
padding: 0;
flex: 1;
}
.single-product div.product form.cart .variations select {
width: 100%;
max-width: 280px;
padding: var(--sk-space-3) var(--sk-space-4);
border: 2px solid var(--sk-silver);
border-radius: var(--sk-radius-lg);
font-size: var(--sk-text-base);
color: var(--sk-charcoal);
background: var(--sk-white);
cursor: pointer;
transition: border-color 0.3s ease;
}
.single-product div.product form.cart .variations select:focus {
outline: none;
border-color: var(--sk-rose);
}
.single-product div.product form.cart .reset_variations {
display: inline-block;
margin-left: var(--sk-space-2);
font-size: var(--sk-text-sm);
color: var(--sk-slate);
cursor: pointer;
} .single-product div.product .woocommerce-variation-price {
margin-bottom: var(--sk-space-4);
}
.single-product div.product .woocommerce-variation-price .price {
font-size: var(--sk-text-2xl);
font-weight: 700;
color: var(--sk-rose-dark);
} .single-product div.product form.cart {
background: var(--sk-pearl);
padding: var(--sk-space-5);
border-radius: var(--sk-radius-xl);
margin-bottom: var(--sk-space-6);
}
.single-product div.product form.cart .single_variation_wrap {
width: 100%;
}
.single-product div.product form.cart .woocommerce-variation-add-to-cart {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-3);
align-items: center;
}
.single-product div.product form.cart div.quantity {
margin: 0;
}
.woocommerce .quantity .qty {
width: 80px;
padding: var(--sk-space-3);
border: 2px solid var(--sk-silver);
border-radius: var(--sk-radius-lg);
font-size: var(--sk-text-base);
text-align: center;
background: var(--sk-white);
}
.woocommerce .quantity .qty:focus {
outline: none;
border-color: var(--sk-rose);
}
.single-product div.product form.cart button.single_add_to_cart_button {
flex: 1;
min-width: 180px;
padding: var(--sk-space-4) var(--sk-space-6);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--sk-white);
font-size: var(--sk-text-base);
font-weight: 600;
border: none;
border-radius: var(--sk-radius-lg);
cursor: pointer;
transition: all 0.3s ease;
}
.single-product div.product form.cart button.single_add_to_cart_button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
} .single-product div.product .product_meta {
padding-top: var(--sk-space-4);
border-top: 1px solid var(--sk-silver);
font-size: var(--sk-text-sm);
color: var(--sk-slate);
}
.single-product div.product .product_meta > span {
display: block;
margin-bottom: var(--sk-space-2);
}
.single-product div.product .product_meta a {
color: var(--sk-rose-dark);
} .single-product div.product .woocommerce-tabs {
grid-column: 1 / -1;
grid-row: 2;
margin-top: var(--sk-space-6);
}
.single-product div.product .woocommerce-tabs ul.tabs {
display: flex;
gap: var(--sk-space-1);
list-style: none;
padding: 0;
margin: 0 0 var(--sk-space-6);
border-bottom: 2px solid var(--sk-silver);
}
.single-product div.product .woocommerce-tabs ul.tabs li {
margin: 0;
padding: 0;
border: none;
background: transparent;
}
.single-product div.product .woocommerce-tabs ul.tabs li a {
display: block;
padding: var(--sk-space-3) var(--sk-space-6);
font-size: var(--sk-text-sm);
font-weight: 500;
color: var(--sk-slate);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
transition: all 0.3s ease;
}
.single-product div.product .woocommerce-tabs ul.tabs li.active a,
.single-product div.product .woocommerce-tabs ul.tabs li a:hover {
color: var(--sk-rose-dark);
border-bottom-color: var(--sk-rose-dark);
}
.single-product div.product .woocommerce-tabs .panel {
padding: var(--sk-space-4) 0;
}
.single-product div.product .woocommerce-tabs .panel h2 {
font-size: var(--sk-text-xl);
font-weight: 600;
margin-bottom: var(--sk-space-4);
} .single-product div.product .related.products,
.single-product div.product .upsells.products {
grid-column: 1 / -1;
margin-top: var(--sk-space-6);
padding-top: var(--sk-space-6);
border-top: 1px solid var(--sk-silver);
}
.single-product div.product .related.products a.button,
.single-product div.product .upsells.products a.button,
.woocommerce a.button {
text-decoration: none;
}
.single-product div.product .related.products h2,
.single-product div.product .upsells.products h2 {
font-size: var(--sk-text-xl);
font-weight: 600;
margin-bottom: var(--sk-space-6);
} .woocommerce-cart .woocommerce {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-8);
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper {
width: 100%;
order: 0;
}
.woocommerce-cart .woocommerce > form {
flex: 1.5;
min-width: 0;
order: 1;
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-xl);
padding: var(--sk-space-5);
}
.woocommerce-cart .woocommerce > .cart-collaterals {
flex: 1;
min-width: 300px;
order: 2;
} .woocommerce table.shop_table.cart {
border: none;
border-collapse: collapse;
width: 100%;
}
.woocommerce table.shop_table.cart thead th {
background: var(--sk-pearl);
padding: var(--sk-space-3) var(--sk-space-4);
font-size: var(--sk-text-sm);
font-weight: 600;
color: var(--sk-charcoal);
border: none;
}
.woocommerce table.shop_table.cart tbody tr.cart_item {
border-bottom: 1px solid var(--sk-silver);
}
.woocommerce table.shop_table.cart tbody tr.cart_item:last-of-type {
border-bottom: none;
}
.woocommerce table.shop_table.cart td {
padding: var(--sk-space-4);
border: none;
vertical-align: middle;
}
.woocommerce table.shop_table.cart td.product-thumbnail {
width: 80px;
}
.woocommerce table.shop_table.cart td.product-thumbnail img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: var(--sk-radius-md);
border: 1px solid var(--sk-silver);
}
.woocommerce table.shop_table.cart td.product-name {
font-size: var(--sk-text-base);
}
.woocommerce table.shop_table.cart td.product-name a {
color: var(--sk-charcoal);
font-weight: 500;
text-decoration: none;
}
.woocommerce table.shop_table.cart td.product-name a:hover {
color: var(--sk-rose-dark);
}
.woocommerce table.shop_table.cart td.product-name .variation {
font-size: var(--sk-text-sm);
color: var(--sk-slate);
margin-top: var(--sk-space-1);
}
.woocommerce table.shop_table.cart td.product-quantity .qty {
width: 60px;
text-align: center;
padding: var(--sk-space-2);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-md);
}
.woocommerce table.shop_table.cart td.product-subtotal {
font-weight: 600;
color: var(--sk-rose-dark);
}
.woocommerce table.shop_table.cart td.product-remove a {
color: var(--sk-ash);
font-size: var(--sk-text-lg);
text-decoration: none;
}
.woocommerce table.shop_table.cart td.product-remove a:hover {
color: var(--sk-rose-dark);
} .woocommerce table.shop_table.cart td.actions {
padding: var(--sk-space-5) 0;
background: var(--sk-pearl);
border-radius: var(--sk-radius-lg);
}
.woocommerce table.shop_table.cart td.actions .coupon {
display: flex;
align-items: center;
gap: var(--sk-space-3);
margin-bottom: var(--sk-space-4);
padding: 0 var(--sk-space-4);
}
.woocommerce table.shop_table.cart td.actions .coupon label {
display: none;
}
.woocommerce table.shop_table.cart td.actions .coupon input {
flex: 1;
max-width: 200px;
padding: var(--sk-space-3) var(--sk-space-4);
border: 2px solid var(--sk-silver);
border-radius: var(--sk-radius-lg);
font-size: var(--sk-text-sm);
background: var(--sk-white);
transition: border-color 0.3s ease;
}
.woocommerce table.shop_table.cart td.actions .coupon input:focus {
outline: none;
border-color: var(--sk-rose);
}
.woocommerce table.shop_table.cart td.actions .coupon input::placeholder {
color: var(--sk-ash);
}
.woocommerce table.shop_table.cart td.actions .coupon button {
padding: var(--sk-space-3) var(--sk-space-5);
background: var(--sk-charcoal);
color: var(--sk-white);
border: none;
border-radius: var(--sk-radius-lg);
cursor: pointer;
font-size: var(--sk-text-sm);
font-weight: 500;
transition: all 0.3s ease;
}
.woocommerce table.shop_table.cart td.actions .coupon button:hover {
background: var(--sk-ink);
}
.woocommerce table.shop_table.cart td.actions > button[name="update_cart"] {
display: block;
margin: 0 var(--sk-space-4);
padding: var(--sk-space-3) var(--sk-space-6);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--sk-white);
border: none;
border-radius: var(--sk-radius-lg);
cursor: pointer;
font-size: var(--sk-text-sm);
font-weight: 600;
transition: all 0.3s ease;
}
.woocommerce table.shop_table.cart td.actions > button[name="update_cart"]:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.woocommerce table.shop_table.cart td.actions > button[name="update_cart"]:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
} .woocommerce .cart_totals {
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-xl);
padding: var(--sk-space-5);
}
.woocommerce .cart_totals > h2 {
font-size: var(--sk-text-lg);
font-weight: 600;
margin-bottom: var(--sk-space-4);
padding-bottom: var(--sk-space-3);
border-bottom: 1px solid var(--sk-silver);
}
.woocommerce .cart_totals table {
border: none;
width: 100%;
}
.woocommerce .cart_totals table th,
.woocommerce .cart_totals table td {
padding: var(--sk-space-3) 0;
border: none;
}
.woocommerce .cart_totals table th {
font-weight: 500;
color: var(--sk-slate);
}
.woocommerce .cart_totals table td {
text-align: right;
}
.woocommerce .cart_totals table .order-total th,
.woocommerce .cart_totals table .order-total td {
font-size: var(--sk-text-lg);
font-weight: 600;
color: var(--sk-rose-dark);
padding-top: var(--sk-space-4);
border-top: 1px solid var(--sk-silver);
}
.woocommerce .cart_totals .wc-proceed-to-checkout {
margin-top: var(--sk-space-4);
}
.woocommerce .cart_totals .wc-proceed-to-checkout a {
display: block;
text-align: center;
padding: var(--sk-space-4);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--sk-white);
font-weight: 600;
border-radius: var(--sk-radius-lg);
text-decoration: none;
transition: all 0.3s ease;
}
.woocommerce .cart_totals .wc-proceed-to-checkout a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
} .woocommerce .cart_totals .woocommerce-shipping-methods {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce .cart_totals .woocommerce-shipping-methods li {
margin-bottom: var(--sk-space-2);
}
.woocommerce .cart_totals .woocommerce-shipping-methods li label {
display: flex;
align-items: center;
gap: var(--sk-space-2);
cursor: pointer;
font-size: var(--sk-text-sm);
} @media (max-width: 1024px) {
.woocommerce-cart .woocommerce > form,
.woocommerce-cart .woocommerce > .cart-collaterals {
flex: 100%;
}
} .woocommerce-checkout .woocommerce {
max-width: 100%;
} .woocommerce-checkout .woocommerce-form-coupon-toggle {
margin-bottom: var(--sk-space-6);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
background: var(--sk-pearl);
border: none;
border-left: 4px solid var(--sk-rose);
padding: var(--sk-space-4);
border-radius: var(--sk-radius-md);
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
color: var(--sk-rose-dark);
font-weight: 500;
} .woocommerce-checkout form.checkout {
display: flex;
flex-wrap: wrap;
gap: var(--sk-space-8);
} .woocommerce-checkout #customer_details {
flex: 1.2;
min-width: 0;
} .woocommerce-checkout #order_review_wrapper,
.woocommerce-checkout #order_review {
flex: 1;
min-width: 350px;
} .woocommerce-checkout h3 {
font-size: var(--sk-text-lg);
font-weight: 600;
color: var(--sk-charcoal);
margin-bottom: var(--sk-space-5);
padding-bottom: var(--sk-space-3);
border-bottom: 2px solid var(--sk-silver);
} .woocommerce-checkout .woocommerce-billing-fields__field-wrapper,
.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper {
display: flex;
flex-wrap: wrap;
gap: 0 4%;
}
.woocommerce-checkout form .form-row {
margin-bottom: var(--sk-space-4);
}
.woocommerce-checkout form .form-row-first,
.woocommerce-checkout form .form-row-last {
width: 48% !important;
float: none !important;
}
.woocommerce-checkout form .form-row-wide {
width: 100% !important;
}
.woocommerce-checkout form .form-row label {
display: block;
font-size: var(--sk-text-sm);
font-weight: 500;
color: var(--sk-charcoal);
margin-bottom: var(--sk-space-2);
}
.woocommerce-checkout form .form-row label .required {
color: var(--sk-rose-dark);
}
.woocommerce-checkout form .form-row .input-text,
.woocommerce-checkout form .form-row select,
.woocommerce-checkout form .form-row textarea {
width: 100%;
padding: var(--sk-space-3) var(--sk-space-4);
border: 2px solid var(--sk-silver);
border-radius: var(--sk-radius-lg);
font-size: var(--sk-text-base);
background: var(--sk-white);
transition: border-color 0.3s ease;
}
.woocommerce-checkout form .form-row .input-text:focus,
.woocommerce-checkout form .form-row select:focus,
.woocommerce-checkout form .form-row textarea:focus {
outline: none;
border-color: var(--sk-rose);
} .woocommerce-checkout .select2-container--default .select2-selection--single {
height: auto;
padding: var(--sk-space-3) var(--sk-space-4);
border: 2px solid var(--sk-silver);
border-radius: var(--sk-radius-lg);
}
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 1.5;
padding: 0;
color: var(--sk-charcoal);
} .woocommerce-checkout form #billing_country_field,
.woocommerce-checkout form #shipping_country_field {
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.woocommerce-checkout form #billing_country_field > label,
.woocommerce-checkout form #shipping_country_field > label {
margin-bottom: 0;
white-space: nowrap;
} .woocommerce-checkout #order_review {
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-xl);
padding: var(--sk-space-5);
} .woocommerce-checkout .woocommerce-checkout-review-order-table {
border: none;
width: 100%;
margin-bottom: var(--sk-space-4);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
background: var(--sk-pearl);
padding: var(--sk-space-3);
font-size: var(--sk-text-sm);
font-weight: 600;
border: none;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tbody td,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
padding: var(--sk-space-3);
border: none;
border-bottom: 1px solid var(--sk-silver);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name {
font-size: var(--sk-text-sm);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total {
font-weight: 600;
color: var(--sk-rose-dark);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .order-total td {
font-size: var(--sk-text-lg);
font-weight: 600;
color: var(--sk-rose-dark);
border-top: none;
border-bottom: none;
} .woocommerce-checkout .woocommerce-checkout-review-order-table th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th,
.woocommerce-cart .cart_totals table th,
.woocommerce .cart_totals table th {
white-space: nowrap;
min-width: 80px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td,
.woocommerce-cart .cart_totals table td,
.woocommerce .cart_totals table td {
text-align: right;
} .woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping th,
.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot .shipping td,
.woocommerce .cart_totals table .shipping th,
.woocommerce .cart_totals table .shipping td {
border-bottom: none;
} .woocommerce-checkout .woocommerce-shipping-methods,
.woocommerce .cart_totals .woocommerce-shipping-methods {
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce-checkout .woocommerce-shipping-methods li,
.woocommerce .cart_totals .woocommerce-shipping-methods li {
margin-bottom: var(--sk-space-2);
padding: var(--sk-space-2) var(--sk-space-3);
background: var(--sk-pearl);
border-radius: var(--sk-radius-md);
transition: background 0.2s ease;
}
.woocommerce-checkout .woocommerce-shipping-methods li:hover,
.woocommerce .cart_totals .woocommerce-shipping-methods li:hover {
background: var(--sk-silver);
}
.woocommerce-checkout .woocommerce-shipping-methods li label,
.woocommerce .cart_totals .woocommerce-shipping-methods li label {
display: inline-flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center;
gap: var(--sk-space-2);
cursor: pointer;
font-size: var(--sk-text-sm);
margin: 0;
white-space: nowrap;
}
.woocommerce-checkout .woocommerce-shipping-methods li label input[type="radio"],
.woocommerce .cart_totals .woocommerce-shipping-methods li label input[type="radio"] {
margin: 0 10px 0 0 !important;
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: var(--sk-rose-dark);
} .woocommerce .cart_totals td[data-title="運送方式"],
.woocommerce-checkout td[data-title="運送方式"] {
min-width: 200px;
} .woocommerce-checkout #payment {
background: var(--sk-pearl);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-4);
margin-top: var(--sk-space-4);
}
.woocommerce-checkout #payment ul.payment_methods {
list-style: none;
padding: 0;
margin: 0 0 var(--sk-space-4);
border: none;
}
.woocommerce-checkout #payment ul.payment_methods li {
padding: var(--sk-space-3);
background: var(--sk-white);
border-radius: var(--sk-radius-md);
margin-bottom: var(--sk-space-2);
}
.woocommerce-checkout #payment ul.payment_methods li label {
font-weight: 500;
cursor: pointer;
}
.woocommerce-checkout #payment .payment_box {
background: transparent;
padding: var(--sk-space-3) 0 0;
font-size: var(--sk-text-sm);
color: var(--sk-slate);
} .woocommerce-checkout #place_order {
width: 100%;
padding: var(--sk-space-4);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--sk-white);
font-size: var(--sk-text-base);
font-weight: 600;
border: none;
border-radius: var(--sk-radius-lg);
cursor: pointer;
transition: all 0.3s ease;
}
.woocommerce-checkout #place_order:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
} @media (max-width: 1024px) {
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review_wrapper,
.woocommerce-checkout #order_review {
flex: 100%;
min-width: 100%;
}
.woocommerce-checkout form .form-row-first,
.woocommerce-checkout form .form-row-last {
width: 100% !important;
}
} .woocommerce-order-received .woocommerce {
max-width: 900px;
margin: 0 auto;
padding: var(--sk-space-6);
} .woocommerce-order-received .woocommerce-notice--success,
.woocommerce-order-received .woocommerce-thankyou-order-received {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--sk-white);
padding: var(--sk-space-6);
border-radius: var(--sk-radius-xl);
text-align: center;
font-size: var(--sk-text-xl);
font-weight: 600;
margin-bottom: var(--sk-space-6);
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.woocommerce-order-received .woocommerce-thankyou-order-received::before {
content: '✓';
display: block;
font-size: 48px;
margin-bottom: var(--sk-space-3);
} .woocommerce-order-received .woocommerce-order-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0;
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-xl);
padding: 0;
margin-bottom: var(--sk-space-6);
list-style: none;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.woocommerce-order-received .woocommerce-order-overview li {
text-align: center;
padding: var(--sk-space-5) var(--sk-space-4);
border-right: 1px solid var(--sk-silver);
background: var(--sk-white);
transition: background 0.3s ease;
}
.woocommerce-order-received .woocommerce-order-overview li:hover {
background: var(--sk-pearl);
}
.woocommerce-order-received .woocommerce-order-overview li:last-child {
border-right: none;
}
.woocommerce-order-received .woocommerce-order-overview li::before {
display: block;
font-size: 24px;
margin-bottom: var(--sk-space-2);
opacity: 0.6;
}
.woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__order::before {
content: '📋';
}
.woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__date::before {
content: '📅';
}
.woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__total::before {
content: '💰';
}
.woocommerce-order-received .woocommerce-order-overview li.woocommerce-order-overview__payment-method::before {
content: '💳';
}
.woocommerce-order-received .woocommerce-order-overview li strong {
display: block;
font-size: var(--sk-text-lg);
color: var(--sk-rose-dark);
margin-top: var(--sk-space-2);
font-weight: 600;
} .woocommerce-order-received h2,
.woocommerce-order-received .woocommerce-order-details__title {
font-size: var(--sk-text-xl);
font-weight: 600;
color: var(--sk-charcoal);
margin: var(--sk-space-8) 0 var(--sk-space-5);
padding-bottom: var(--sk-space-3);
border-bottom: 3px solid var(--sk-rose);
display: inline-block;
} .woocommerce-order-received .woocommerce-table--order-details {
width: 100%;
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-xl);
overflow: hidden;
margin-bottom: var(--sk-space-6);
border-collapse: collapse;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.woocommerce-order-received .woocommerce-table--order-details thead th {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: #ffffff !important;
padding: var(--sk-space-4) var(--sk-space-5);
text-align: left;
font-weight: 600;
font-size: var(--sk-text-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.woocommerce-order-received .woocommerce-table--order-details thead th:last-child {
text-align: right;
}
.woocommerce-order-received .woocommerce-table--order-details tbody td {
padding: var(--sk-space-4) var(--sk-space-5);
border-bottom: 1px solid var(--sk-silver);
vertical-align: middle;
background: var(--sk-white);
}
.woocommerce-order-received .woocommerce-table--order-details tbody td:last-child {
text-align: right;
font-weight: 600;
color: var(--sk-charcoal);
}
.woocommerce-order-received .woocommerce-table--order-details tbody tr:hover td {
background: var(--sk-pearl);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot th,
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
padding: var(--sk-space-4) var(--sk-space-5);
border-bottom: 1px solid var(--sk-silver);
vertical-align: middle;
background: var(--sk-white);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot th {
text-align: right;
color: var(--sk-charcoal);
font-weight: 600;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
text-align: right;
font-weight: 600;
color: var(--sk-charcoal);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
font-size: var(--sk-text-lg);
font-weight: 700;
border-bottom: none;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
padding: var(--sk-space-5);
border-top: 2px solid var(--sk-rose);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child th {
color: var(--sk-charcoal);
}
.woocommerce-order-received .woocommerce-table--order-details tfoot tr:last-child td {
color: var(--sk-rose-dark);
}
.woocommerce-order-received .woocommerce-table--order-details .product-name {
font-weight: 600;
color: var(--sk-charcoal);
}
.woocommerce-order-received .woocommerce-table--order-details .product-name .product-quantity {
color: var(--sk-rose-dark);
font-weight: 600;
background: var(--sk-pearl);
padding: 2px 8px;
border-radius: 4px;
margin-left: 8px;
}
.woocommerce-order-received .woocommerce-table--order-details .product-name a {
color: var(--sk-charcoal);
text-decoration: none;
}
.woocommerce-order-received .woocommerce-table--order-details .product-name a:hover {
color: var(--sk-rose-dark);
} .woocommerce-order-received .woocommerce-customer-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--sk-space-6);
margin-top: var(--sk-space-6);
}
.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-xl);
padding: var(--sk-space-6);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.woocommerce-order-received .woocommerce-customer-details address {
font-style: normal;
line-height: 2;
color: var(--sk-slate);
}
.woocommerce-order-received .woocommerce-customer-details address p {
margin: 0;
padding: var(--sk-space-2) 0;
border-bottom: 1px dashed var(--sk-silver);
}
.woocommerce-order-received .woocommerce-customer-details address p:last-child {
border-bottom: none;
}
.woocommerce-order-received .woocommerce-column__title {
font-size: var(--sk-text-lg);
font-weight: 600;
color: var(--sk-charcoal);
margin-bottom: var(--sk-space-4);
padding-bottom: var(--sk-space-3);
border-bottom: 2px solid var(--sk-rose);
display: flex;
align-items: center;
gap: var(--sk-space-2);
}
.woocommerce-order-received .woocommerce-column--billing-address .woocommerce-column__title::before {
content: '🏠';
}
.woocommerce-order-received .woocommerce-column--shipping-address .woocommerce-column__title::before {
content: '📦';
} .woocommerce-order-received .woocommerce-table--order-details tfoot .note td {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
font-size: var(--sk-text-sm);
line-height: 2;
white-space: pre-line;
border-left: 4px solid #ffc107;
}
.woocommerce-order-received .woocommerce-table--order-details tfoot .note th {
background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
} @media (max-width: 768px) {
.woocommerce-order-received .woocommerce {
padding: var(--sk-space-4);
}
.woocommerce-order-received .woocommerce-order-overview {
grid-template-columns: repeat(2, 1fr);
}
.woocommerce-order-received .woocommerce-order-overview li {
border-right: none;
border-bottom: 1px solid var(--sk-silver);
}
.woocommerce-order-received .woocommerce-order-overview li:nth-last-child(-n+2) {
border-bottom: none;
}
.woocommerce-order-received .woocommerce-customer-details {
grid-template-columns: 1fr;
}
.woocommerce-order-received .woocommerce-table--order-details thead th,
.woocommerce-order-received .woocommerce-table--order-details tbody td,
.woocommerce-order-received .woocommerce-table--order-details tfoot th,
.woocommerce-order-received .woocommerce-table--order-details tfoot td {
padding: var(--sk-space-3);
}
}
.sk-product-gallery {
position: sticky;
top: calc(var(--sk-header-height) + var(--sk-space-6));
}
.sk-gallery-main {
aspect-ratio: 1;
border-radius: var(--sk-radius-xl);
overflow: hidden;
background: var(--sk-white);
margin-bottom: var(--sk-space-4);
}
.sk-gallery-main img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sk-gallery-thumbs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sk-space-3);
}
.sk-gallery-thumb {
aspect-ratio: 1;
border-radius: var(--sk-radius-md);
overflow: hidden;
cursor: pointer;
border: 2px solid transparent;
transition: border-color var(--sk-duration-fast) var(--sk-ease);
}
.sk-gallery-thumb.active,
.sk-gallery-thumb:hover {
border-color: var(--sk-rose);
}
.sk-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sk-product-summary {
padding-top: var(--sk-space-4);
}
.sk-product-meta {
display: flex;
align-items: center;
gap: var(--sk-space-4);
margin-bottom: var(--sk-space-4);
}
.sk-product-sku {
font-size: var(--sk-text-sm);
color: var(--sk-ash);
}
.sk-product-stock {
display: inline-flex;
align-items: center;
gap: var(--sk-space-1);
padding: var(--sk-space-1) var(--sk-space-3);
background: rgba(16, 185, 129, 0.1);
color: var(--sk-success);
font-size: var(--sk-text-xs);
font-weight: 500;
border-radius: var(--sk-radius-full);
}
.sk-product-stock::before {
content: '';
width: 6px;
height: 6px;
background: var(--sk-success);
border-radius: 50%;
}
.sk-single-title {
font-family: var(--sk-font-display);
font-size: var(--sk-text-2xl);
font-weight: 600;
color: var(--sk-ink);
margin-bottom: var(--sk-space-4);
line-height: 1.3;
}
.sk-single-price {
display: flex;
align-items: baseline;
gap: var(--sk-space-3);
margin-bottom: var(--sk-space-6);
padding-bottom: var(--sk-space-6);
border-bottom: 1px solid var(--sk-silver);
}
.sk-single-price .sk-price-current {
font-size: var(--sk-text-3xl);
color: var(--sk-rose-dark);
}
.sk-single-price .sk-price-original {
font-size: var(--sk-text-xl);
}
.sk-product-excerpt {
font-size: var(--sk-text-base);
color: var(--sk-slate);
line-height: 1.7;
margin-bottom: var(--sk-space-6);
} .sk-variations {
margin-bottom: var(--sk-space-6);
}
.sk-variation-row {
margin-bottom: var(--sk-space-4);
}
.sk-variation-label {
display: block;
font-size: var(--sk-text-sm);
font-weight: 500;
color: var(--sk-charcoal);
margin-bottom: var(--sk-space-2);
}
.sk-variation-select {
width: 100%;
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-md);
font-size: var(--sk-text-base);
color: var(--sk-charcoal);
background: var(--sk-white);
cursor: pointer;
transition: border-color var(--sk-duration-fast) var(--sk-ease);
}
.sk-variation-select:focus {
outline: none;
border-color: var(--sk-rose);
} .sk-quantity {
display: inline-flex;
align-items: center;
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-md);
overflow: hidden;
}
.sk-qty-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--sk-pearl);
border: none;
color: var(--sk-charcoal);
font-size: var(--sk-text-lg);
transition: background var(--sk-duration-fast) var(--sk-ease);
}
.sk-qty-btn:hover {
background: var(--sk-rose-light);
}
.sk-qty-input {
width: 60px;
height: 44px;
border: none;
text-align: center;
font-size: var(--sk-text-base);
font-weight: 500;
color: var(--sk-charcoal);
}
.sk-qty-input:focus {
outline: none;
} .sk-add-to-cart {
display: flex;
gap: var(--sk-space-4);
margin-bottom: var(--sk-space-6);
}
.sk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sk-space-2);
padding: var(--sk-space-4) var(--sk-space-8);
font-size: var(--sk-text-base);
font-weight: 600;
border-radius: var(--sk-radius-md);
border: none;
cursor: pointer;
transition: all var(--sk-duration-fast) var(--sk-ease);
}
.sk-btn-primary {
flex: 1;
background: linear-gradient(135deg, var(--sk-rose), var(--sk-rose-dark));
color: var(--sk-white);
box-shadow: var(--sk-shadow-rose);
}
.sk-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(232, 160, 191, 0.45);
}
.sk-btn-secondary {
background: var(--sk-navy);
color: var(--sk-white);
box-shadow: var(--sk-shadow-navy);
}
.sk-btn-secondary:hover {
background: var(--sk-navy-light);
}
.sk-btn-outline {
background: transparent;
border: 2px solid var(--sk-silver);
color: var(--sk-charcoal);
}
.sk-btn-outline:hover {
border-color: var(--sk-rose);
color: var(--sk-rose-dark);
} .sk-product-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sk-space-4);
padding: var(--sk-space-6);
background: var(--sk-pearl);
border-radius: var(--sk-radius-lg);
margin-bottom: var(--sk-space-6);
}
.sk-feature {
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--sk-white);
border-radius: var(--sk-radius-md);
color: var(--sk-rose-dark);
}
.sk-feature-text {
font-size: var(--sk-text-sm);
color: var(--sk-charcoal);
} .sk-cart {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--sk-space-8);
padding: var(--sk-space-10) 0;
}
.sk-cart-items {
background: var(--sk-white);
border-radius: var(--sk-radius-xl);
overflow: hidden;
}
.sk-cart-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr auto;
gap: var(--sk-space-4);
padding: var(--sk-space-4) var(--sk-space-6);
background: var(--sk-pearl);
font-size: var(--sk-text-sm);
font-weight: 600;
color: var(--sk-slate);
}
.sk-cart-item {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr auto;
gap: var(--sk-space-4);
align-items: center;
padding: var(--sk-space-6);
border-bottom: 1px solid var(--sk-silver);
}
.sk-cart-item:last-child {
border-bottom: none;
}
.sk-cart-product {
display: flex;
gap: var(--sk-space-4);
}
.sk-cart-thumb {
width: 80px;
height: 80px;
border-radius: var(--sk-radius-md);
overflow: hidden;
flex-shrink: 0;
}
.sk-cart-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sk-cart-product-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.sk-cart-product-name {
font-weight: 500;
color: var(--sk-charcoal);
margin-bottom: var(--sk-space-1);
}
.sk-cart-product-meta {
font-size: var(--sk-text-sm);
color: var(--sk-ash);
}
.sk-cart-price,
.sk-cart-subtotal {
font-weight: 600;
color: var(--sk-charcoal);
}
.sk-cart-subtotal {
color: var(--sk-rose-dark);
}
.sk-cart-remove {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
color: var(--sk-ash);
border-radius: var(--sk-radius-full);
transition: all var(--sk-duration-fast) var(--sk-ease);
}
.sk-cart-remove:hover {
background: rgba(239, 68, 68, 0.1);
color: var(--sk-error);
} .sk-cart-summary {
position: sticky;
top: calc(var(--sk-header-height) + var(--sk-space-6));
background: var(--sk-white);
border-radius: var(--sk-radius-xl);
padding: var(--sk-space-6);
height: fit-content;
}
.sk-cart-summary-title {
font-family: var(--sk-font-display);
font-size: var(--sk-text-xl);
font-weight: 600;
color: var(--sk-ink);
margin-bottom: var(--sk-space-6);
padding-bottom: var(--sk-space-4);
border-bottom: 1px solid var(--sk-silver);
}
.sk-cart-totals {
margin-bottom: var(--sk-space-6);
}
.sk-cart-total-row {
display: flex;
justify-content: space-between;
padding: var(--sk-space-3) 0;
font-size: var(--sk-text-sm);
}
.sk-cart-total-row span:first-child {
color: var(--sk-slate);
}
.sk-cart-total-row.total {
padding-top: var(--sk-space-4);
margin-top: var(--sk-space-4);
border-top: 1px solid var(--sk-silver);
font-size: var(--sk-text-lg);
font-weight: 600;
}
.sk-cart-total-row.total span:last-child {
color: var(--sk-rose-dark);
font-size: var(--sk-text-xl);
}
.sk-checkout-btn {
width: 100%;
padding: var(--sk-space-4);
background: linear-gradient(135deg, var(--sk-rose), var(--sk-rose-dark));
color: var(--sk-white);
font-size: var(--sk-text-base);
font-weight: 600;
border: none;
border-radius: var(--sk-radius-md);
cursor: pointer;
box-shadow: var(--sk-shadow-rose);
transition: all var(--sk-duration-fast) var(--sk-ease);
}
.sk-checkout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(232, 160, 191, 0.45);
} .sk-checkout {
display: grid;
grid-template-columns: 1fr 420px;
gap: var(--sk-space-8);
padding: var(--sk-space-10) 0;
}
.sk-checkout-form {
background: var(--sk-white);
border-radius: var(--sk-radius-xl);
padding: var(--sk-space-8);
}
.sk-form-section {
margin-bottom: var(--sk-space-8);
}
.sk-form-section:last-child {
margin-bottom: 0;
}
.sk-form-title {
font-family: var(--sk-font-display);
font-size: var(--sk-text-lg);
font-weight: 600;
color: var(--sk-ink);
margin-bottom: var(--sk-space-6);
padding-bottom: var(--sk-space-3);
border-bottom: 1px solid var(--sk-silver);
}
.sk-form-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sk-space-4);
margin-bottom: var(--sk-space-4);
}
.sk-form-row.full {
grid-template-columns: 1fr;
}
.sk-form-group {
display: flex;
flex-direction: column;
}
.sk-form-label {
font-size: var(--sk-text-sm);
font-weight: 500;
color: var(--sk-charcoal);
margin-bottom: var(--sk-space-2);
}
.sk-form-label .required {
color: var(--sk-error);
}
.sk-form-input,
.sk-form-select {
padding: var(--sk-space-3) var(--sk-space-4);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-md);
font-size: var(--sk-text-base);
color: var(--sk-charcoal);
background: var(--sk-white);
transition: border-color var(--sk-duration-fast) var(--sk-ease);
}
.sk-form-input:focus,
.sk-form-select:focus {
outline: none;
border-color: var(--sk-rose);
}
.sk-form-textarea {
min-height: 100px;
resize: vertical;
} .sk-order-review {
position: sticky;
top: calc(var(--sk-header-height) + var(--sk-space-6));
background: var(--sk-white);
border-radius: var(--sk-radius-xl);
padding: var(--sk-space-6);
height: fit-content;
}
.sk-order-title {
font-family: var(--sk-font-display);
font-size: var(--sk-text-xl);
font-weight: 600;
color: var(--sk-ink);
margin-bottom: var(--sk-space-6);
}
.sk-order-items {
margin-bottom: var(--sk-space-6);
padding-bottom: var(--sk-space-6);
border-bottom: 1px solid var(--sk-silver);
}
.sk-order-item {
display: flex;
gap: var(--sk-space-4);
padding: var(--sk-space-3) 0;
}
.sk-order-item-thumb {
width: 60px;
height: 60px;
border-radius: var(--sk-radius-md);
overflow: hidden;
flex-shrink: 0;
}
.sk-order-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sk-order-item-info {
flex: 1;
}
.sk-order-item-name {
font-size: var(--sk-text-sm);
color: var(--sk-charcoal);
margin-bottom: var(--sk-space-1);
}
.sk-order-item-qty {
font-size: var(--sk-text-xs);
color: var(--sk-ash);
}
.sk-order-item-price {
font-weight: 600;
color: var(--sk-charcoal);
} .sk-payment-methods {
margin-bottom: var(--sk-space-6);
}
.sk-payment-method {
display: flex;
align-items: center;
gap: var(--sk-space-3);
padding: var(--sk-space-4);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-md);
margin-bottom: var(--sk-space-3);
cursor: pointer;
transition: all var(--sk-duration-fast) var(--sk-ease);
}
.sk-payment-method:hover,
.sk-payment-method.active {
border-color: var(--sk-rose);
background: var(--sk-rose-light);
}
.sk-place-order-btn {
width: 100%;
padding: var(--sk-space-5);
background: var(--sk-navy);
color: var(--sk-white);
font-size: var(--sk-text-lg);
font-weight: 600;
border: none;
border-radius: var(--sk-radius-md);
cursor: pointer;
box-shadow: var(--sk-shadow-navy);
transition: all var(--sk-duration-fast) var(--sk-ease);
}
.sk-place-order-btn:hover {
background: var(--sk-navy-light);
transform: translateY(-2px);
} .woocommerce-products-header,
.woocommerce-page .woocommerce > h1.page-title,
.woocommerce-page .woocommerce > .page-title,
.woocommerce .woocommerce-products-header__title,
.sk-shop-content > header.woocommerce-products-header,
.woocommerce-page .sk-shop-content > .page-title,
.woocommerce-page main .page-title,
body.woocommerce .page-title:not(.sk-page-title) {
display: none !important;
} .woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
margin: 0;
float: none !important;
}
.sk-shop-content {
padding: var(--sk-space-4) 0 var(--sk-space-8);
} .single-product .sk-shop-content {
padding-top: 0;
padding-bottom: var(--sk-space-6);
}
.single-product div.product {
padding-top: var(--sk-space-4);
}
.sk-shop-content::before,
.sk-shop-content::after {
content: '';
display: table;
clear: both;
}
.woocommerce-page .woocommerce-result-count,
.woocommerce-page .woocommerce-ordering {
display: inline-block;
vertical-align: middle;
}
.sk-shop-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--sk-space-3) var(--sk-space-4);
margin-bottom: var(--sk-space-4);
background: var(--sk-pearl);
border-radius: var(--sk-radius-lg);
}
.sk-toolbar-left,
.sk-toolbar-right {
display: flex;
align-items: center;
}
.sk-toolbar-left .woocommerce-result-count,
.sk-toolbar-right .woocommerce-ordering {
margin: 0;
}
.woocommerce .woocommerce-result-count {
font-size: var(--sk-text-sm);
color: var(--sk-slate);
line-height: 40px;
}
.woocommerce .woocommerce-ordering select {
padding: var(--sk-space-2) var(--sk-space-4);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-md);
font-size: var(--sk-text-sm);
color: var(--sk-charcoal);
background: var(--sk-white);
cursor: pointer;
min-width: 180px;
} .woocommerce nav.woocommerce-pagination {
margin: var(--sk-space-6) 0;
padding: var(--sk-space-4) 0;
}
.woocommerce nav.woocommerce-pagination ul {
display: flex;
justify-content: center;
align-items: center;
gap: var(--sk-space-2);
list-style: none;
padding: 0;
margin: 0;
border: none;
}
.woocommerce nav.woocommerce-pagination ul li {
border: none;
padding: 0;
margin: 0;
float: none;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 var(--sk-space-3);
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-md);
font-size: var(--sk-text-sm);
font-weight: 500;
color: var(--sk-charcoal);
text-decoration: none;
transition: all 0.3s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
background: var(--sk-pearl);
border-color: var(--sk-rose);
color: var(--sk-rose);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: transparent;
color: var(--sk-white);
font-weight: 600;
}
.woocommerce nav.woocommerce-pagination ul li .prev,
.woocommerce nav.woocommerce-pagination ul li .next {
font-size: var(--sk-text-lg);
}
.woocommerce nav.woocommerce-pagination ul li .prev:hover,
.woocommerce nav.woocommerce-pagination ul li .next:hover {
background: var(--sk-navy);
border-color: var(--sk-navy);
color: var(--sk-white);
} .nav-links,
.page-numbers {
display: flex;
justify-content: center;
align-items: center;
gap: var(--sk-space-2);
margin-top: var(--sk-space-8);
}
.page-numbers a,
.page-numbers span {
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 var(--sk-space-3);
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-md);
font-size: var(--sk-text-sm);
font-weight: 500;
color: var(--sk-charcoal);
text-decoration: none;
transition: all 0.3s ease;
}
.page-numbers a:hover {
background: var(--sk-pearl);
border-color: var(--sk-rose);
color: var(--sk-rose);
}
.page-numbers .current {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: transparent;
color: var(--sk-white);
font-weight: 600;
} .sk-shop-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--sk-space-4) 0;
margin-bottom: var(--sk-space-4);
border-bottom: 1px solid var(--sk-silver);
} .woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
gap: var(--sk-space-6);
list-style: none;
padding: 0;
margin: 0;
}
.woocommerce ul.products li.product {
width: 100% !important;
margin: 0 !important;
padding: 0;
float: none !important;
background: var(--sk-white);
border-radius: var(--sk-radius-lg);
overflow: hidden;
box-shadow: var(--sk-shadow-sm);
transition: all 0.3s ease;
}
.woocommerce ul.products li.product:hover {
transform: translateY(-4px);
box-shadow: var(--sk-shadow-lg);
}
.woocommerce ul.products li.product a img {
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
margin: 0;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: var(--sk-text-base);
font-weight: 500;
color: var(--sk-charcoal);
padding: var(--sk-space-3) var(--sk-space-4) 0;
margin: 0;
}
.woocommerce ul.products li.product .price {
color: var(--sk-rose);
font-weight: 600;
padding: var(--sk-space-2) var(--sk-space-4) var(--sk-space-4);
margin: 0;
}
.woocommerce ul.products li.product .price del {
color: var(--sk-ash);
font-weight: 400;
}
.woocommerce ul.products li.product .price ins {
text-decoration: none;
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
display: block;
width: calc(100% - var(--sk-space-8));
margin: 0 var(--sk-space-4) var(--sk-space-4);
padding: var(--sk-space-2) var(--sk-space-4);
background: var(--sk-navy);
color: var(--sk-white);
border: none;
border-radius: var(--sk-radius-md);
font-size: var(--sk-text-sm);
font-weight: 500;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
background: var(--sk-navy-light);
}
.woocommerce ul.products li.product .onsale {
position: absolute;
top: var(--sk-space-3);
left: var(--sk-space-3);
background: var(--sk-coral);
color: var(--sk-white);
padding: var(--sk-space-1) var(--sk-space-3);
border-radius: var(--sk-radius-md);
font-size: var(--sk-text-xs);
font-weight: 600;
margin: 0;
min-height: auto;
min-width: auto;
line-height: 1.5;
} @media (max-width: 1024px) {
.woocommerce ul.products {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.woocommerce ul.products {
grid-template-columns: repeat(2, 1fr);
gap: var(--sk-space-4);
}
}
@media (max-width: 480px) {
.woocommerce ul.products {
gap: var(--sk-space-3);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-size: var(--sk-text-sm);
padding: var(--sk-space-2) var(--sk-space-3) 0;
}
.woocommerce ul.products li.product .price {
font-size: var(--sk-text-sm);
padding: var(--sk-space-1) var(--sk-space-3) var(--sk-space-3);
}
.woocommerce ul.products li.product .button {
width: calc(100% - var(--sk-space-6));
margin: 0 var(--sk-space-3) var(--sk-space-3);
padding: var(--sk-space-2);
font-size: var(--sk-text-xs);
}
} .sk-footer {
background: var(--sk-ink);
color: var(--sk-white);
padding: var(--sk-space-12) 0 var(--sk-space-6);
}
.sk-footer-top {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: var(--sk-space-8);
margin-bottom: var(--sk-space-8);
align-items: start;
}
.sk-footer-widget {
display: flex;
flex-direction: column;
}
.sk-footer-brand {
padding-right: var(--sk-space-8);
}
.sk-footer-logo {
display: flex;
align-items: center;
gap: var(--sk-space-3);
font-family: var(--sk-font-display);
font-size: var(--sk-text-xl);
color: var(--sk-white);
margin-bottom: var(--sk-space-4);
}
.sk-footer-desc {
font-size: var(--sk-text-sm);
color: rgba(255, 255, 255, 0.6);
line-height: 1.7;
margin-bottom: var(--sk-space-6);
}
.sk-footer-social {
display: flex;
gap: var(--sk-space-3);
}
.sk-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--sk-radius-full);
color: var(--sk-white);
transition: all var(--sk-duration-fast) var(--sk-ease);
}
.sk-social-link:hover {
background: var(--sk-rose);
color: var(--sk-white);
}
.sk-footer-widget h4 {
font-size: var(--sk-text-base);
font-weight: 600;
color: var(--sk-gold);
margin-bottom: var(--sk-space-6);
padding-bottom: var(--sk-space-3);
border-bottom: 2px solid var(--sk-gold);
display: inline-block;
}
.sk-footer-links {
display: flex;
flex-direction: column;
gap: var(--sk-space-3);
}
.sk-footer-link {
font-size: var(--sk-text-sm);
color: rgba(255, 255, 255, 0.6);
transition: color var(--sk-duration-fast) var(--sk-ease);
}
.sk-footer-link:hover {
color: var(--sk-rose);
}
.sk-footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: var(--sk-space-8);
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: var(--sk-text-sm);
color: rgba(255, 255, 255, 0.5);
} .sk-mobile-nav {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--sk-white);
border-top: 1px solid var(--sk-silver);
padding: var(--sk-space-2) 0;
padding-bottom: env(safe-area-inset-bottom, var(--sk-space-2));
z-index: 1000;
}
.sk-mobile-nav-inner {
display: flex;
justify-content: space-around;
}
.sk-mobile-nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sk-space-1);
padding: var(--sk-space-2);
color: var(--sk-slate);
font-size: var(--sk-text-xs);
transition: color var(--sk-duration-fast) var(--sk-ease);
}
.sk-mobile-nav-item svg {
width: 22px;
height: 22px;
}
.sk-mobile-nav-item.active,
.sk-mobile-nav-item:hover {
color: var(--sk-rose-dark);
} .sk-mobile-product-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--sk-white);
border-top: 1px solid var(--sk-silver);
padding: var(--sk-space-3) var(--sk-space-4);
padding-bottom: calc(var(--sk-space-3) + env(safe-area-inset-bottom, 0));
z-index: 1001;
}
.sk-mobile-product-bar-inner {
display: flex;
align-items: center;
gap: var(--sk-space-3);
}
.sk-mobile-bar-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 50px;
color: var(--sk-slate);
font-size: var(--sk-text-xs);
text-decoration: none;
}
.sk-mobile-bar-icon svg {
width: 20px;
height: 20px;
margin-bottom: 2px;
}
.sk-mobile-bar-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 44px;
border-radius: var(--sk-radius-full);
font-size: var(--sk-text-sm);
font-weight: 600;
text-decoration: none;
}
.sk-mobile-bar-cart {
background: var(--sk-gold);
color: var(--sk-white);
}
.sk-mobile-bar-buy {
background: linear-gradient(135deg, var(--sk-rose), var(--sk-rose-dark));
color: var(--sk-white);
} @media (max-width: 1024px) {
.sk-products {
grid-template-columns: repeat(3, 1fr);
}
.single-product div.product {
grid-template-columns: 1fr;
gap: var(--sk-space-6);
}
.single-product div.product > div.images,
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > div.summary {
grid-column: 1;
}
.single-product div.product > div.images,
.single-product div.product > .woocommerce-product-gallery {
grid-row: 1;
}
.single-product div.product > div.summary {
grid-row: 2;
}
.sk-cart {
grid-template-columns: 1fr;
}
.sk-cart-summary {
position: static;
}
.sk-checkout {
grid-template-columns: 1fr;
}
.sk-order-review {
position: static;
}
.sk-footer-top {
grid-template-columns: repeat(2, 1fr);
gap: var(--sk-space-8);
}
} @media (max-width: 768px) {
:root {
--sk-header-height: 60px;
}
.sk-container {
padding: 0 var(--sk-space-4);
} .sk-nav-menu {
display: none;
}
.sk-menu-toggle {
display: flex;
} .sk-nav {
position: fixed;
top: 0;
right: -100%;
width: 300px;
height: 100vh;
background: linear-gradient(180deg, #fff 0%, #faf8ff 100%);
z-index: 1000;
transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -8px 0 30px rgba(0,0,0,0.2);
overflow-y: auto;
display: block !important;
align-items: unset !important;
justify-content: unset !important;
}
.sk-nav.active {
right: 0;
}
.sk-nav.active::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 70px;
background: linear-gradient(135deg, var(--sk-rose) 0%, #a855f7 100%);
}
.sk-nav.active::after {
content: '🌸 菜單';
position: absolute;
top: 24px;
left: 20px;
font-size: 18px;
font-weight: 600;
color: #fff;
z-index: 1;
}
.sk-nav.active .sk-nav-menu {
display: block !important;
padding: 80px 16px 30px !important;
list-style: none;
margin: 0 !important;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.sk-nav.active .sk-nav-menu li {
display: block;
margin-bottom: 6px;
border: none;
border-radius: 10px;
overflow: hidden;
}
.sk-nav.active .sk-nav-menu li a {
display: block;
padding: 14px 16px;
font-size: 15px;
font-weight: 500;
color: #374151;
background: #fff;
border-radius: 10px;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
text-align: left;
text-decoration: none;
}
.sk-nav.active .sk-nav-menu li a:hover,
.sk-nav.active .sk-nav-menu li.current-menu-item a {
background: linear-gradient(135deg, rgba(244,114,182,0.15) 0%, rgba(168,85,247,0.15) 100%);
color: var(--sk-rose);
padding-left: 20px;
} body.menu-open::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 999;
backdrop-filter: blur(2px);
}
body.menu-open {
overflow: hidden;
} .sk-products {
grid-template-columns: repeat(2, 1fr);
gap: var(--sk-space-4);
}
.sk-product-info {
padding: var(--sk-space-3);
}
.sk-product-title {
font-size: var(--sk-text-sm);
}
.sk-price-current {
font-size: var(--sk-text-base);
} .sk-gallery-thumbs,
.single-product div.product div.images .flex-control-thumbs {
grid-template-columns: repeat(4, 1fr);
gap: var(--sk-space-2);
}
.sk-single-title,
.single-product div.product .product_title {
font-size: var(--sk-text-xl);
}
.single-product div.product p.price,
.single-product div.product span.price {
font-size: var(--sk-text-xl);
}
.single-product div.product form.cart button.single_add_to_cart_button {
min-width: auto;
width: 100%;
}
.single-product div.product .woocommerce-tabs ul.tabs {
flex-wrap: wrap;
}
.single-product div.product .woocommerce-tabs ul.tabs li a {
padding: var(--sk-space-2) var(--sk-space-4);
font-size: var(--sk-text-xs);
}
.sk-single-price .sk-price-current {
font-size: var(--sk-text-2xl);
}
.sk-product-features {
grid-template-columns: 1fr;
}
.sk-add-to-cart {
flex-direction: column;
} .sk-cart-header {
display: none;
}
.sk-cart-item {
grid-template-columns: 80px 1fr;
grid-template-rows: auto auto;
gap: var(--sk-space-3);
}
.sk-cart-product {
grid-column: 1 / -1;
}
.sk-cart-price {
display: none;
}
.sk-cart-quantity {
grid-column: 1;
grid-row: 2;
}
.sk-cart-subtotal {
grid-column: 2;
grid-row: 2;
text-align: right;
}
.sk-cart-remove {
position: absolute;
top: var(--sk-space-4);
right: var(--sk-space-4);
} .sk-checkout-form {
padding: var(--sk-space-4);
}
.sk-form-row {
grid-template-columns: 1fr;
} .sk-footer-top {
grid-template-columns: 1fr;
gap: var(--sk-space-8);
}
.sk-footer-brand {
padding-right: 0;
}
.sk-footer-bottom {
flex-direction: column;
gap: var(--sk-space-4);
text-align: center;
} .sk-mobile-nav {
display: block;
}
.sk-main {
padding-bottom: 70px;
}
body.single-product .sk-mobile-nav {
display: none;
}
body.single-product .sk-mobile-product-bar {
display: block;
}
}
@media (max-width: 480px) {
.sk-products {
gap: var(--sk-space-3);
}
.sk-product-card {
border-radius: var(--sk-radius-lg);
}
.sk-product-info {
padding: var(--sk-space-2);
}
} @media (max-width: 768px) { .woocommerce.single-product div.product,
.single-product div.product {
display: block !important;
grid-template-columns: 1fr !important;
}
.single-product div.product > div.images,
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > div.summary {
grid-column: 1 !important;
width: 100% !important;
max-width: 100% !important;
} .single-product div.product div.images {
margin-bottom: var(--sk-space-6);
}
.single-product div.product div.images img {
border-radius: var(--sk-radius-lg);
} .single-product div.product div.images .flex-control-thumbs {
justify-content: flex-start;
}
.single-product div.product div.images .flex-control-thumbs li {
width: 60px;
height: 60px;
} .single-product div.product .product_title {
font-size: var(--sk-text-xl);
margin-bottom: var(--sk-space-3);
} .single-product div.product p.price,
.single-product div.product span.price {
font-size: var(--sk-text-xl);
padding-bottom: var(--sk-space-4);
margin-bottom: var(--sk-space-4);
} .single-product div.product .woocommerce-product-details__short-description {
font-size: var(--sk-text-sm);
margin-bottom: var(--sk-space-4);
} .single-product div.product form.cart {
padding: var(--sk-space-4);
}
.single-product div.product form.cart .variations tr {
flex-direction: column;
align-items: flex-start;
gap: var(--sk-space-2);
}
.single-product div.product form.cart .variations td.label {
padding-right: 0;
}
.single-product div.product form.cart .variations td.value {
width: 100%;
}
.single-product div.product form.cart .variations select {
max-width: 100%;
}
.single-product div.product form.cart .woocommerce-variation-add-to-cart {
flex-direction: column;
width: 100%;
}
.single-product div.product form.cart div.quantity {
width: 100%;
justify-content: center;
}
.single-product div.product form.cart button.single_add_to_cart_button {
width: 100%;
min-width: auto;
} .single-product div.product .woocommerce-tabs ul.tabs {
flex-wrap: wrap;
}
.single-product div.product .woocommerce-tabs ul.tabs li a {
padding: var(--sk-space-2) var(--sk-space-3);
font-size: var(--sk-text-sm);
}
.single-product div.product .woocommerce-tabs .panel {
padding: var(--sk-space-4);
} .single-product div.product .related.products,
.single-product div.product .upsells.products {
margin-top: var(--sk-space-6);
}
.single-product div.product .related.products h2,
.single-product div.product .upsells.products h2 {
font-size: var(--sk-text-lg);
} .woocommerce-product-gallery__trigger {
display: none !important;
} .single-product div.product div.images .woocommerce-product-gallery {
margin: 0 !important;
padding: 0 !important;
}
.single-product div.product div.images figure {
margin: 0 !important;
} .sk-breadcrumb {
font-size: var(--sk-text-xs);
padding: var(--sk-space-3) 0;
display: flex;
flex-wrap: wrap;
gap: 4px;
line-height: 1.6;
}
.sk-breadcrumb a {
color: var(--sk-slate);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
.sk-breadcrumb span:last-child {
color: var(--sk-charcoal);
font-weight: 500;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
.sk-breadcrumb .sk-breadcrumb-sep {
color: var(--sk-ash);
margin: 0 2px;
} .woocommerce-cart .woocommerce-cart-form {
overflow-x: auto;
}
.woocommerce-cart .shop_table {
display: block;
width: 100%;
}
.woocommerce-cart .shop_table thead {
display: none;
}
.woocommerce-cart .shop_table tbody {
display: block;
}
.woocommerce-cart .shop_table tbody tr {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
padding: var(--sk-space-3);
margin-bottom: var(--sk-space-2);
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-lg);
position: relative;
}
.woocommerce-cart .shop_table tbody tr td {
border: none !important;
padding: 4px !important;
} .woocommerce-cart .shop_table tbody tr td.product-remove {
position: absolute;
top: 6px;
right: 6px;
width: auto;
}
.woocommerce-cart .shop_table tbody tr td.product-remove a {
font-size: 16px;
color: var(--sk-ash);
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sk-pearl);
border-radius: 50%;
} .woocommerce-cart .shop_table tbody tr td.product-thumbnail {
width: 60px;
flex-shrink: 0;
}
.woocommerce-cart .shop_table tbody tr td.product-thumbnail img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: var(--sk-radius-md);
} .woocommerce-cart .shop_table tbody tr td.product-name {
flex: 1;
min-width: 0;
padding-right: 24px !important;
}
.woocommerce-cart .shop_table tbody tr td.product-name a {
font-size: 13px;
font-weight: 500;
color: var(--sk-charcoal);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.4;
} .woocommerce-cart .shop_table tbody tr td.product-price {
display: none !important;
} .woocommerce-cart .shop_table tbody tr td.product-quantity {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
width: auto !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.woocommerce-cart .shop_table tbody tr td.product-quantity::before {
content: '數量' !important;
font-size: 11px;
color: var(--sk-slate);
display: block;
text-align: center;
margin-bottom: 4px;
} .woocommerce-cart .shop_table tbody tr td.product-subtotal {
width: 100% !important;
margin-top: var(--sk-space-2);
padding-top: var(--sk-space-2) !important;
border-top: 1px dashed var(--sk-silver) !important;
display: flex !important;
justify-content: space-between !important;
align-items: center;
}
.woocommerce-cart .shop_table tbody tr td.product-subtotal::before {
content: '小計' !important;
font-size: 13px;
color: var(--sk-slate);
}
.woocommerce-cart .shop_table tbody tr td.product-subtotal bdi,
.woocommerce-cart .shop_table tbody tr td.product-subtotal .woocommerce-Price-amount {
font-weight: 600;
color: var(--sk-rose-dark);
font-size: 16px;
} .woocommerce-cart .shop_table tbody tr td.product-quantity .quantity {
display: flex;
align-items: center;
background: var(--sk-pearl);
border-radius: var(--sk-radius-md);
overflow: hidden;
}
.woocommerce-cart .shop_table tbody tr td.product-quantity .quantity input {
width: 32px;
padding: 4px;
font-size: 13px;
text-align: center;
border: none;
background: transparent;
}
.woocommerce-cart .shop_table tbody tr td.product-quantity .sk-qty-btn {
width: 26px;
height: 26px;
font-size: 14px;
background: transparent;
border: none;
} .woocommerce-cart .shop_table tbody tr.actions,
.woocommerce-cart .shop_table tbody tr.actions td,
.woocommerce-cart .shop_table tbody tr:last-child,
.woocommerce-cart .shop_table .actions {
display: none !important;
} .woocommerce-cart .shop_table .coupon:not(.sk-coupon-initialized),
.woocommerce-cart .woocommerce-cart-form > .coupon:not(.sk-coupon-initialized),
.woocommerce-cart .woocommerce-cart-form input#coupon_code:not(.sk-coupon-initialized input) {
display: none !important;
} .woocommerce-cart .woocommerce-cart-form > input[type="text"],
.woocommerce-cart .woocommerce-cart-form > p > input[type="text"] {
display: none !important;
} .woocommerce-cart .woocommerce-cart-form .coupon {
display: flex;
flex-direction: column;
gap: var(--sk-space-2);
margin-top: var(--sk-space-3);
}
.woocommerce-cart .woocommerce-cart-form .coupon .sk-coupon-toggle {
display: flex;
align-items: center;
gap: var(--sk-space-2);
padding: var(--sk-space-3);
cursor: pointer;
font-weight: 500;
font-size: 14px;
color: var(--sk-charcoal);
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-lg);
transition: background 0.3s ease;
}
.woocommerce-cart .woocommerce-cart-form .coupon .sk-coupon-toggle:hover {
background: var(--sk-pearl);
}
.woocommerce-cart .woocommerce-cart-form .coupon .sk-coupon-icon {
font-size: 16px;
}
.woocommerce-cart .woocommerce-cart-form .coupon .sk-coupon-arrow {
margin-left: auto;
font-size: 16px;
color: var(--sk-slate);
transition: transform 0.3s ease;
}
.woocommerce-cart .woocommerce-cart-form .coupon.sk-coupon-open .sk-coupon-arrow {
transform: rotate(90deg);
}
.woocommerce-cart .woocommerce-cart-form .coupon .sk-coupon-content {
display: none;
padding: var(--sk-space-3);
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-lg);
}
.woocommerce-cart .woocommerce-cart-form .coupon.sk-coupon-open .sk-coupon-content {
display: flex;
gap: var(--sk-space-2);
}
.woocommerce-cart .woocommerce-cart-form .coupon .sk-coupon-content input {
flex: 1;
padding: 10px 12px;
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-md);
font-size: 13px;
}
.woocommerce-cart .woocommerce-cart-form .coupon .sk-coupon-content button {
padding: 10px 16px;
background: var(--sk-charcoal);
color: var(--sk-white);
border: none;
border-radius: var(--sk-radius-md);
font-size: 13px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
} .woocommerce-cart .woocommerce-cart-form button[name="update_cart"] {
width: 100%;
padding: 12px;
margin-top: var(--sk-space-2);
background: var(--sk-charcoal);
color: var(--sk-white);
border: none;
border-radius: var(--sk-radius-lg);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.woocommerce-cart .woocommerce-cart-form button[name="update_cart"]:disabled {
background: var(--sk-ash);
cursor: not-allowed;
} .woocommerce-cart .cart_totals {
width: 100% !important;
float: none !important;
margin-top: var(--sk-space-3);
background: var(--sk-white);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-3);
border: 1px solid var(--sk-silver);
}
.woocommerce-cart .cart_totals h2 {
font-size: 16px;
font-weight: 600;
margin-bottom: var(--sk-space-3);
padding-bottom: var(--sk-space-2);
border-bottom: 1px solid var(--sk-silver);
}
.woocommerce-cart .cart_totals table {
margin: 0;
}
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table tbody {
display: block;
width: 100%;
}
.woocommerce-cart .cart_totals table tr {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 100%;
}
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
padding: 10px 0 !important;
border: none !important;
font-size: 14px;
}
.woocommerce-cart .cart_totals table th {
color: var(--sk-slate);
font-weight: 500;
text-align: left;
}
.woocommerce-cart .cart_totals table td {
text-align: right;
margin-left: auto;
} .woocommerce-cart .cart_totals .cart-subtotal {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
}
.woocommerce-cart .cart_totals .cart-subtotal th,
.woocommerce-cart .cart_totals .cart-subtotal td {
display: inline-block !important;
width: auto !important;
}
.woocommerce-cart .cart_totals .cart-subtotal td {
color: var(--sk-rose-dark);
font-weight: 600;
} .woocommerce-cart .cart_totals .shipping th {
padding-bottom: var(--sk-space-2) !important;
}
.woocommerce-cart .cart_totals .shipping td {
text-align: left;
}
.woocommerce-cart .cart_totals #shipping_method {
margin: 0;
padding: 0;
list-style: none;
}
.woocommerce-cart .cart_totals #shipping_method li {
margin-bottom: 8px;
padding: 10px 12px;
background: var(--sk-pearl);
border-radius: var(--sk-radius-md);
font-size: 13px;
display: flex;
align-items: center;
gap: 8px;
}
.woocommerce-cart .cart_totals #shipping_method li:last-child {
margin-bottom: 0;
}
.woocommerce-cart .cart_totals #shipping_method li label {
flex: 1;
cursor: pointer;
margin: 0;
}
.woocommerce-cart .cart_totals #shipping_method li input[type="radio"] {
margin: 0;
width: 16px;
height: 16px;
} .woocommerce-cart .cart_totals .shipping td > p,
.woocommerce-cart .cart_totals .woocommerce-shipping-destination {
margin-top: var(--sk-space-3);
padding: var(--sk-space-3);
background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);
border-radius: var(--sk-radius-md);
font-size: 13px;
line-height: 1.5;
color: var(--sk-charcoal);
border-left: 3px solid #667eea;
}
.woocommerce-cart .cart_totals .shipping td a {
display: inline-block;
margin-top: 8px;
color: #667eea;
font-size: 13px;
font-weight: 500;
} .woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
padding-top: var(--sk-space-3) !important;
border-top: 1px solid var(--sk-silver) !important;
font-weight: 600;
}
.woocommerce-cart .cart_totals .order-total td {
color: var(--sk-rose-dark);
font-size: 18px;
}
.woocommerce-cart .wc-proceed-to-checkout {
margin-top: var(--sk-space-3);
}
.woocommerce-cart .wc-proceed-to-checkout a {
font-size: 15px;
padding: 14px;
border-radius: var(--sk-radius-lg);
} .woocommerce-cart .cart-empty {
text-align: center;
padding: var(--sk-space-8) var(--sk-space-4);
background: var(--sk-white);
border-radius: var(--sk-radius-xl);
margin: var(--sk-space-4) 0;
}
.woocommerce-cart .cart-empty::before {
content: '🛒';
display: block;
font-size: 64px;
margin-bottom: var(--sk-space-4);
opacity: 0.5;
}
.woocommerce-cart .cart-empty.woocommerce-info {
font-size: 16px;
color: var(--sk-charcoal);
background: var(--sk-white);
border: none;
}
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
background: var(--sk-white);
border: 1px solid var(--sk-silver);
border-radius: var(--sk-radius-lg);
padding: var(--sk-space-3);
margin-bottom: var(--sk-space-3);
font-size: 13px;
line-height: 1.5;
}
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before {
display: none;
}
.woocommerce-cart .woocommerce-message a,
.woocommerce-cart .woocommerce-info a {
color: #667eea;
font-weight: 500;
}
.woocommerce-cart .return-to-shop {
text-align: center;
margin-top: var(--sk-space-4);
}
.woocommerce-cart .return-to-shop a.button {
display: inline-block;
padding: 14px 32px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--sk-white);
border-radius: var(--sk-radius-lg);
font-size: 15px;
font-weight: 500;
text-decoration: none;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
}  .sk-container {
max-width: 1200px;
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
} .sk-breadcrumb-wrap {
background: #f8f9fa;
border-bottom: 1px solid #eee;
}
.sk-breadcrumb-wrap .sk-breadcrumb {
padding-top: 12px;
padding-bottom: 12px;
} .sk-page-banner {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 48px 0;
text-align: center;
margin-bottom: 40px;
}
.sk-page-banner .sk-page-title {
font-size: 36px;
font-weight: 700;
color: #fff;
margin: 0 0 12px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.sk-page-banner .sk-page-desc {
font-size: 16px;
color: rgba(255,255,255,0.9);
margin: 0;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
} .sk-single-banner {
padding: 40px 0;
}
.sk-single-banner .sk-page-title {
font-size: 28px;
max-width: 800px;
margin: 0 auto 16px;
line-height: 1.4;
}
.sk-banner-cat {
margin-bottom: 12px;
}
.sk-banner-cat a {
display: inline-block;
padding: 4px 16px;
background: rgba(255,255,255,0.2);
color: #fff;
font-size: 13px;
border-radius: 20px;
text-decoration: none;
transition: background 0.2s;
}
.sk-banner-cat a:hover {
background: rgba(255,255,255,0.3);
}
.sk-banner-meta {
font-size: 14px;
color: rgba(255,255,255,0.85);
}
.sk-banner-meta .sk-meta-sep {
margin: 0 8px;
opacity: 0.6;
} .sk-list-page {
padding-bottom: 60px;
} .sk-posts-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
@media (min-width: 640px) {
.sk-posts-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.sk-posts-grid {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
} .sk-post-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 16px;
overflow: hidden;
border: 1px solid #eee;
transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
}
.sk-post-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0,0,0,0.12);
border-color: transparent;
} .sk-post-thumb {
display: block;
aspect-ratio: 16/10;
overflow: hidden;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.sk-post-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.sk-post-card:hover .sk-post-thumb img {
transform: scale(1.08);
} .sk-post-card:not(:has(.sk-post-thumb)) {
border-left: 4px solid var(--sk-rose);
}
.sk-post-body {
flex: 1;
display: flex;
flex-direction: column;
padding: 12px 16px;
}
.sk-post-cat {
margin-bottom: 4px;
}
.sk-post-cat a {
display: inline-block;
padding: 3px 10px;
font-size: 11px;
font-weight: 600;
color: var(--sk-rose);
background: rgba(233, 30, 99, 0.1);
border-radius: 20px;
text-decoration: none;
transition: all 0.2s;
}
.sk-post-cat a:hover {
background: var(--sk-rose);
color: #fff;
}
.sk-post-title {
font-size: 16px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 6px 0;
}
.sk-post-title a {
color: #1a1a1a;
text-decoration: none;
transition: color 0.2s;
}
.sk-post-title a:hover {
color: var(--sk-rose);
}
.sk-post-excerpt {
flex: 1;
font-size: 14px;
color: #666;
line-height: 1.7;
margin-bottom: 0;
}
.sk-post-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 8px;
border-top: 1px solid #f0f0f0;
margin-top: 8px;
}
.sk-post-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #999;
}
.sk-post-views::before {
content: '·';
margin-right: 6px;
color: #ddd;
}
.sk-read-more {
display: inline-flex;
align-items: center;
font-size: 14px;
font-weight: 600;
color: var(--sk-rose);
text-decoration: none;
transition: all 0.2s;
}
.sk-read-more:hover {
color: #c2185b;
transform: translateX(4px);
}
.sk-no-posts {
text-align: center;
padding: 80px 20px;
color: #888;
font-size: 16px;
} .sk-content {
padding: 40px 20px;
}
.sk-posts {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
max-width: 960px;
margin: 0 auto;
}
@media (min-width: 768px) {
.sk-posts {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
.sk-post-content {
padding: 24px;
}
.sk-post-header {
margin-bottom: 12px;
}
.sk-post-author {
color: #666;
}
.sk-post-tags-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.sk-post-tags-list a {
display: inline-block;
padding: 3px 10px;
font-size: 12px;
color: var(--sk-rose);
background: rgba(233, 30, 99, 0.08);
border-radius: 12px;
text-decoration: none;
margin-right: 4px;
transition: all 0.2s;
}
.sk-post-cat a:hover {
background: var(--sk-rose);
color: #fff;
}
.sk-post-tags-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.sk-post-tags-list a {
display: inline-block;
padding: 2px 8px;
font-size: 12px;
color: #666;
background: #f5f5f5;
border-radius: 4px;
text-decoration: none;
transition: all 0.2s;
}
.sk-post-tags-list a:hover {
background: #e0e0e0;
color: #333;
}
.sk-post-excerpt {
font-size: 14px;
color: #666;
line-height: 1.7;
margin-bottom: 16px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sk-read-more {
font-size: 14px;
font-weight: 500;
color: var(--sk-rose);
text-decoration: none;
}
.sk-read-more:hover {
text-decoration: underline;
} .navigation.pagination {
margin-top: 24px;
padding-bottom: 20px;
text-align: center;
}
@media (max-width: 768px) {
.navigation.pagination {
margin-top: 0px;
padding-bottom: 0px;
}
.sk-list-page {
padding-bottom: 4px;
}
.sk-posts-grid {
gap: 16px;
}
.sk-page-banner {
padding: 24px 0;
margin-bottom: 20px;
}
.sk-page-banner .sk-page-title {
font-size: 24px;
}
.sk-page-banner .sk-page-desc {
font-size: 14px;
}
}
.navigation.pagination .nav-links {
display: inline-flex;
gap: 8px;
}
.navigation.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 12px;
background: #fff;
border: 1px solid #eee;
border-radius: 8px;
font-size: 14px;
color: #333;
text-decoration: none;
transition: all 0.2s;
}
.navigation.pagination .page-numbers:hover {
border-color: var(--sk-rose);
color: var(--sk-rose);
}
.navigation.pagination .page-numbers.current {
background: var(--sk-rose);
border-color: var(--sk-rose);
color: #fff;
} .sk-single-post {
width: 90%;
max-width: 900px;
margin: 0 auto;
padding: 0 0 48px;
}
.sk-post-featured {
margin-bottom: 28px;
border-radius: 12px;
overflow: hidden;
}
.sk-post-featured img {
width: 100%;
height: auto;
}
.sk-post-body {
background: #fff;
border-radius: 12px;
padding: 36px 40px;
border: 1px solid rgba(0,0,0,0.06);
margin-bottom: 28px;
}
.sk-post-body h2 {
font-size: 22px;
font-weight: 600;
margin: 32px 0 16px;
color: #1a1a1a;
padding-bottom: 8px;
border-bottom: 2px solid var(--sk-rose-light);
}
.sk-post-body h2:first-child {
margin-top: 0;
}
.sk-post-body h3 {
font-size: 18px;
font-weight: 600;
margin: 24px 0 12px;
color: #1a1a1a;
}
.sk-post-body h4 {
font-size: 16px;
font-weight: 600;
margin: 20px 0 10px;
color: #333;
}
.sk-post-body p {
font-size: 16px;
line-height: 1.9;
margin-bottom: 20px;
color: #444;
}
.sk-post-body ul,
.sk-post-body ol {
margin: 20px 0;
padding-left: 24px;
}
.sk-post-body li {
margin-bottom: 8px;
line-height: 1.8;
color: #444;
}
.sk-post-body img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 24px 0;
}
.sk-post-body blockquote {
margin: 24px 0;
padding: 20px 24px;
background: #fafafa;
border-left: 3px solid var(--sk-rose);
border-radius: 0 8px 8px 0;
color: #555;
}
.sk-post-body blockquote p {
margin: 0;
}
.sk-post-body a {
color: var(--sk-rose);
text-decoration: none;
border-bottom: 1px solid transparent;
}
.sk-post-body a:hover {
border-bottom-color: var(--sk-rose);
}
.sk-post-body pre {
background: #2d2d2d;
color: #f8f8f2;
padding: 20px;
border-radius: 8px;
overflow-x: auto;
font-size: 14px;
line-height: 1.6;
margin: 20px 0;
}
.sk-post-body code {
background: #f5f5f5;
padding: 2px 6px;
border-radius: 4px;
font-size: 14px;
color: #e83e8c;
}
.sk-post-body pre code {
background: none;
padding: 0;
color: inherit;
} .sk-post-tags {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 16px 20px;
background: #fafafa;
border-radius: 8px;
margin-bottom: 32px;
}
.sk-tags-label {
font-size: 14px;
color: #666;
}
.sk-post-tags a {
display: inline-block;
padding: 4px 12px;
background: #fff;
border: 1px solid #eee;
border-radius: 20px;
font-size: 13px;
color: #666;
text-decoration: none;
transition: all 0.2s;
}
.sk-post-tags a:hover {
border-color: var(--sk-rose);
color: var(--sk-rose);
} .sk-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 32px;
}
.sk-post-nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 20px;
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 12px;
text-decoration: none;
transition: border-color 0.2s;
}
.sk-post-nav-item:hover {
border-color: var(--sk-rose);
}
.sk-post-nav-item.sk-next {
text-align: right;
flex-direction: row-reverse;
}
.sk-nav-arrow {
font-size: 20px;
color: var(--sk-rose);
flex-shrink: 0;
}
.sk-nav-info {
flex: 1;
min-width: 0;
}
.sk-nav-label {
display: block;
font-size: 12px;
color: #999;
margin-bottom: 4px;
}
.sk-nav-title {
display: block;
font-size: 14px;
font-weight: 500;
color: #333;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .sk-post-comments {
background: #fff;
border-radius: 12px;
padding: 32px;
border: 1px solid rgba(0,0,0,0.06);
} @media (max-width: 768px) {
.sk-content {
padding: 24px 16px;
}
.sk-post-content {
padding: 20px;
}
.sk-breadcrumb {
padding: 10px 8px;
font-size: 12px;
justify-content: flex-start;
}
.sk-breadcrumb-wrap .sk-breadcrumb {
padding: 8px;
}
.sk-single-post {
width: 100%;
padding: 0 8px 20px;
}
.sk-single-post .sk-post-header {
margin-bottom: 16px;
}
.sk-single-post .sk-post-title {
font-size: 20px;
}
.sk-post-featured {
margin-bottom: 16px;
border-radius: 8px;
}
.sk-post-body {
padding: 12px;
margin-bottom: 12px;
border-radius: 6px;
}
.sk-post-body h2 {
font-size: 18px;
margin: 24px 0 12px;
}
.sk-post-body h3 {
font-size: 16px;
}
.sk-post-body p {
font-size: 15px;
margin-bottom: 16px;
}
.sk-post-tags {
padding: 12px 16px;
margin-bottom: 20px;
}
.sk-related-posts {
margin-bottom: 20px;
}
.sk-related-title {
font-size: 16px;
margin-bottom: 16px;
}
.sk-post-nav {
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 16px;
}
.sk-post-nav-item {
padding: 12px;
overflow: hidden;
}
.sk-post-nav-item.sk-next {
text-align: left;
flex-direction: row;
}
.sk-nav-info {
overflow: hidden;
}
.sk-nav-title {
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sk-post-comments {
padding: 20px;
}
.sk-single-banner {
padding: 24px 0;
}
.sk-single-banner .sk-page-title {
font-size: 20px;
padding: 0 16px;
}
.sk-banner-meta {
font-size: 12px;
}
} .sk-auto-link {
color: var(--sk-rose);
text-decoration: none;
border-bottom: 1px dashed var(--sk-rose);
transition: all 0.2s;
}
.sk-auto-link:hover {
border-bottom-style: solid;
} .sk-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-size: 13px;
color: #666;
} .sk-container > .sk-breadcrumb {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 16px 0;
justify-content: flex-start;
}
.sk-breadcrumb a {
color: #666;
text-decoration: none;
transition: color 0.2s;
}
.sk-breadcrumb a:hover {
color: var(--sk-rose);
}
.sk-breadcrumb-sep {
margin: 0 8px;
color: #bbb;
font-size: 12px;
}
.sk-breadcrumb > span:last-child {
color: #333;
font-weight: 500;
} .sk-related-posts {
margin-bottom: 24px;
}
.sk-related-title {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin-bottom: 20px;
padding-bottom: 12px;
border-bottom: 2px solid #f0f0f0;
}
.sk-related-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (min-width: 640px) {
.sk-related-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.sk-related-item {
display: flex;
gap: 12px;
padding: 12px;
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 10px;
text-decoration: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
.sk-related-item:hover {
border-color: var(--sk-rose);
box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.sk-related-thumb {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 8px;
overflow: hidden;
}
.sk-related-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sk-related-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.sk-related-item-title {
display: block;
font-size: 14px;
font-weight: 500;
color: #333;
line-height: 1.4;
margin-bottom: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sk-related-date {
font-size: 12px;
color: #999;
} .sk-post-reading,
.sk-post-views {
color: #999;
}
@media (max-width: 640px) {
.sk-related-grid {
grid-template-columns: 1fr;
}
.sk-post-meta-top {
flex-wrap: wrap;
gap: 8px;
}
}