/* =========================================================
* PlaySphere Cosmetics Template 26 - Frontend CSS
* Product: prod_16812 (Pink x Dark Flat Style)
* Prefix: ap29-
* ========================================================= */
/* =========================================================
* 1. CSS Variables & Reset -- 化妆品色板
* ========================================================= */
:root {
--ap29-color-pink: #FFC23C;
--ap29-color-pink-deep: #4A90D9;
--ap29-color-pink-soft: #FFF4D6;
--ap29-color-dark: #2E4372;
--ap29-color-gray: #817F8A;
--ap29-color-gray-light: #E8E8E8;
--ap29-color-gray-bg: #F3F5F7;
--ap29-color-white: #FFFFFF;
--ap29-font-head: 'Montserrat', 'Playfair Display', Georgia, serif;
--ap29-font-body: 'Open Sans', 'Roboto', system-ui, sans-serif;
--ap29-container: 1200px;
--ap29-gap: 20px;
--ap29-radius: 0px;
--ap29-shadow: none;
--ap29-transition: 0.25s ease;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
text-transform: none;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--ap29-font-body);
color: var(--ap29-color-dark);
line-height: 1.6;
background: var(--ap29-color-white);
text-transform: none;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
color: var(--ap29-color-dark);
text-decoration: none;
transition: color var(--ap29-transition);
cursor: pointer;
}
a:hover {
color: var(--ap29-color-pink);
}
a:active {
color: var(--ap29-color-pink-deep);
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--ap29-font-head);
font-weight: 600;
color: var(--ap29-color-dark);
letter-spacing: -0.3px;
line-height: 1.25;
text-transform: none;
margin: 0 0 0.8em;
}
h1 { font-size: 40px; }
h2 { font-size: 32px; }
h3 { font-size: 22px; }
h4 { font-size: 18px; }
h5 { font-size: 15px; }
h6 { font-size: 13px; }
h1 em, h2 em, h3 em, h4 em {
color: var(--ap29-color-pink);
font-style: normal;
}
p {
margin: 0 0 1em;
color: var(--ap29-color-gray);
}
img {
max-width: 100%;
height: auto;
display: block;
}
ul, ol {
list-style: none;
}
button,
input,
select,
textarea,
.elementor-button,
.woocommerce-button {
font-family: var(--ap29-font-body);
font-size: 14px;
color: var(--ap29-color-dark);
cursor: pointer;
border: none;
background: none;
outline: none;
text-transform: none;
}
input, select, textarea {
cursor: text;
}
button,
input[type="submit"],
.elementor-button {
border-radius: var(--ap29-radius);
box-shadow: var(--ap29-shadow);
transition: background var(--ap29-transition),
color var(--ap29-transition),
border-color var(--ap29-transition),
transform var(--ap29-transition);
}
button:hover,
input[type="submit"]:hover,
.elementor-button:hover {
transform: translateY(-1px);
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
padding: 12px 16px;
border: 1px solid var(--ap29-color-gray-light);
background: var(--ap29-color-white);
color: var(--ap29-color-dark);
transition: border-color var(--ap29-transition);
border-radius: var(--ap29-radius);
width: 100%;
max-width: 100%;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
border-color: var(--ap29-color-pink);
}
hr {
border: none;
border-top: 1px solid var(--ap29-color-gray-light);
margin: 30px 0;
}
/* =========================================================
* 2. Elementor 框架
* ========================================================= */
#page.site {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--ap29-color-white);
overflow-x: hidden;
}
#content.site-content {
flex: 1;
padding-top: 0;
width: 100%;
}
.elementor-section {
width: 100%;
padding: 80px 0;
position: relative;
display: block;
box-sizing: border-box;
}
.elementor-section.elementor-section-boxed > .elementor-container {
max-width: var(--ap29-container);
}
.elementor-container {
max-width: var(--ap29-container);
width: 100%;
margin: 0 auto;
padding: 0 20px;
display: block;
box-sizing: border-box;
}
.elementor-row {
display: flex;
flex-wrap: wrap;
width: 100%;
margin: 0 calc(-1 * var(--ap29-gap) / 2);
box-sizing: border-box;
}
.elementor-column {
padding: 0 calc(var(--ap29-gap) / 2);
box-sizing: border-box;
position: relative;
min-height: 1px;
}
.elementor-column-wrap {
width: 100%;
position: relative;
display: flex;
}
.elementor-widget-wrap {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.elementor-col-100 { width: 100%; }
.elementor-col-75 { width: 75%; }
.elementor-col-66 { width: 66.6666%; }
.elementor-col-50 { width: 50%; }
.elementor-col-33 { width: 33.3333%; }
.elementor-col-25 { width: 25%; }
.elementor-col-20 { width: 20%; }
.elementor-col-16 { width: 16.6666%; }
/* --- Elementor Buttons (Flat style) --- */
.elementor-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 32px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
font-weight: 600;
font-size: 14px;
line-height: 1.2;
text-transform: none;
letter-spacing: 0.3px;
border: 1px solid var(--ap29-color-pink);
}
.elementor-button:hover {
background: var(--ap29-color-pink-deep);
color: var(--ap29-color-white);
border-color: var(--ap29-color-pink-deep);
}
.elementor-button:active {
background: #E55A84;
}
.elementor-button.elementor-size-sm {
padding: 10px 20px;
font-size: 12px;
}
.elementor-button.elementor-size-xs {
padding: 8px 16px;
font-size: 11px;
}
.elementor-button.elementor-size-lg {
padding: 18px 40px;
font-size: 16px;
}
/* --- Responsive: Tablet (≤ 900px) --- */
@media (max-width: 900px) {
.elementor-col-25,
.elementor-col-33,
.elementor-col-50,
.elementor-col-66,
.elementor-col-75 {
width: 100%;
}
.elementor-col-20 { width: 33.3333%; }
.elementor-section { padding: 50px 0; }
h1 { font-size: 32px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }
}
/* --- Responsive: Mobile (≤ 600px) --- */
@media (max-width: 600px) {
.elementor-col-20,
.elementor-col-16 {
width: 50%;
}
.elementor-section { padding: 35px 0; }
h1 { font-size: 26px; }
h2 { font-size: 22px; }
}
/* --- Responsive: Small Mobile (≤ 480px) --- */
@media (max-width: 480px) {
.elementor-col-20,
.elementor-col-16 {
width: 100%;
}
.elementor-container { padding: 0 14px; }
.elementor-row { margin: 0 -7px; }
.elementor-column { padding: 0 7px; }
.elementor-button { padding: 12px 24px; }
}
/* =========================================================
* 3. Site Header -- #masthead.site-header
* ========================================================= */
#masthead.site-header {
width: 100%;
position: relative;
z-index: 1000;
background: var(--ap29-color-white);
border-bottom: 1px solid var(--ap29-color-gray-light);
}
#masthead.site-header.header-sticky,
#masthead.site-header.is-sticky {
position: sticky;
top: 0;
box-shadow: 0 1px 8px rgba(46, 67, 114, 0.04);
}
/* --- (3a) Topbar --- */
.ap29-topbar {
width: 100%;
background: var(--ap29-color-dark);
color: var(--ap29-color-white);
font-size: 11px;
padding: 10px 0;
line-height: 1.4;
letter-spacing: 0.3px;
}
.ap29-topbar a {
color: var(--ap29-color-white);
opacity: 0.85;
}
.ap29-topbar a:hover {
color: var(--ap29-color-pink);
opacity: 1;
}
.ap29-topbar__inner {
max-width: var(--ap29-container);
width: 100%;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.ap29-topbar__col {
display: flex;
align-items: center;
gap: 14px;
flex: 1;
}
.ap29-topbar__col.ap29-topbar__col--left { justify-content: flex-start; }
.ap29-topbar__col.ap29-topbar__col--center { justify-content: center; }
.ap29-topbar__col.ap29-topbar__col--right { justify-content: flex-end; }
.ap29-topbar__item {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.ap29-topbar__dot {
display: inline-block;
width: 3px;
height: 3px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
vertical-align: middle;
}
.ap29-topbar__col--center .ap29-topbar__dot {
margin: 0 4px;
}
/* --- (3b) Header Main --- */
.ap29-header-main {
width: 100%;
background: var(--ap29-color-white);
padding: 18px 0;
}
.ap29-header-main__inner {
max-width: var(--ap29-container);
width: 100%;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: 20px;
}
/* --- Logo --- */
.jet-logo {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--ap29-color-dark);
font-family: var(--ap29-font-head);
font-size: 28px;
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1;
}
.jet-logo__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-radius: 50%;
font-size: 16px;
font-weight: 700;
}
.jet-logo__text {
color: var(--ap29-color-dark);
}
.jet-logo:hover .jet-logo__text {
color: var(--ap29-color-pink);
}
.jet-logo:hover .jet-logo__icon {
background: var(--ap29-color-pink-deep);
}
/* --- Main Navigation --- */
.ap29-nav {
display: flex;
align-items: center;
justify-content: center;
}
.ap29-nav__list {
display: flex;
align-items: center;
gap: 0;
list-style: none;
}
.ap29-nav__item {
position: relative;
}
.ap29-nav__link {
display: inline-block;
padding: 12px 18px;
font-size: 13px;
font-weight: 600;
color: var(--ap29-color-dark);
letter-spacing: 0.2px;
text-transform: none;
position: relative;
}
.ap29-nav__link::after {
content: '';
position: absolute;
left: 18px;
right: 18px;
bottom: 6px;
height: 2px;
background: var(--ap29-color-pink);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--ap29-transition);
}
.ap29-nav__link:hover,
.ap29-nav__item.is-active > .ap29-nav__link,
.ap29-nav__item.current-menu-item > .ap29-nav__link {
color: var(--ap29-color-pink);
}
.ap29-nav__link:hover::after,
.ap29-nav__item.is-active > .ap29-nav__link::after,
.ap29-nav__item.current-menu-item > .ap29-nav__link::after {
transform: scaleX(1);
}
/* --- Dropdown (has-children) --- */
.ap29-nav__item.has-children > .ap29-nav__link {
padding-right: 28px;
}
.ap29-nav__item.has-children > .ap29-nav__link::before {
content: '\203A';
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%) rotate(90deg);
font-size: 14px;
line-height: 1;
font-weight: 700;
transition: transform var(--ap29-transition);
}
.ap29-nav__item.has-children:hover > .ap29-nav__link::before {
transform: translateY(-50%) rotate(90deg) translateX(2px);
}
.ap29-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
padding: 12px 0;
background: var(--ap29-color-white);
border: 1px solid var(--ap29-color-gray-light);
box-shadow: 0 8px 24px rgba(46, 67, 114, 0.06);
visibility: hidden;
opacity: 0;
transform: translateY(10px);
transition: opacity var(--ap29-transition),
transform var(--ap29-transition),
visibility var(--ap29-transition);
z-index: 1001;
}
.ap29-nav__item.has-children:hover > .ap29-dropdown {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.ap29-dropdown__item {
position: relative;
}
.ap29-dropdown__link {
display: block;
padding: 9px 22px;
font-size: 13px;
color: var(--ap29-color-dark);
white-space: nowrap;
transition: background var(--ap29-transition),
color var(--ap29-transition),
padding-left var(--ap29-transition);
}
.ap29-dropdown__link:hover {
background: var(--ap29-color-pink-soft);
color: var(--ap29-color-pink-deep);
padding-left: 26px;
}
/* --- Multi-level Sub-dropdown --- */
.ap29-dropdown .ap29-dropdown {
top: -13px;
left: 100%;
transform: translateX(-10px);
}
.ap29-dropdown .ap29-dropdown__item.has-children > .ap29-dropdown__link::after {
content: '\203A';
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 13px;
font-weight: 700;
color: var(--ap29-color-gray);
}
.ap29-dropdown .ap29-dropdown__item.has-children:hover > .ap29-dropdown__link::after {
color: var(--ap29-color-pink);
}
.ap29-dropdown .ap29-dropdown__item.has-children:hover > .ap29-dropdown {
visibility: visible;
opacity: 1;
transform: translateX(0);
}
/* --- Header Right: Icons --- */
.ap29-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.ap29-icon-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
color: var(--ap29-color-dark);
border: 1px solid transparent;
cursor: pointer;
transition: background var(--ap29-transition),
color var(--ap29-transition),
border-color var(--ap29-transition);
}
.ap29-icon-btn:hover {
background: var(--ap29-color-pink-soft);
color: var(--ap29-color-pink);
border-color: var(--ap29-color-pink-soft);
}
.ap29-icon-btn:active {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
}
.ap29-icon-btn__icon {
font-size: 17px;
line-height: 1;
}
.jet-search {
position: relative;
}
.jet-blocks-cart {
position: relative;
}
.jet-blocks-cart__count {
position: absolute;
top: 4px;
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-radius: 50%;
font-size: 10px;
font-weight: 700;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px var(--ap29-color-white);
z-index: 2;
}
.ap29-icon-btn.jet-blocks-cart:hover .jet-blocks-cart__count {
background: var(--ap29-color-pink-deep);
}
/* --- (3c) Mobile Header --- */
.ap29-header__mobile-toggle {
display: none;
}
/* --- (3d) Mobile Drawer --- */
.ap29-overlay {
position: fixed;
inset: 0;
background: rgba(46, 67, 114, 0.55);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: opacity var(--ap29-transition),
visibility var(--ap29-transition);
}
.ap29-overlay.is-open {
opacity: 1;
visibility: visible;
}
.ap29-mobile-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 320px;
max-width: 90vw;
background: var(--ap29-color-white);
z-index: 9999;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s ease;
overflow: hidden;
}
.ap29-mobile-drawer.is-open {
transform: translateX(0);
}
.ap29-mobile-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--ap29-color-gray-light);
background: var(--ap29-color-pink-soft);
}
.ap29-mobile-drawer__close {
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ap29-color-white);
color: var(--ap29-color-dark);
border: 1px solid var(--ap29-color-gray-light);
cursor: pointer;
font-size: 18px;
font-weight: 700;
transition: background var(--ap29-transition),
color var(--ap29-transition);
}
.ap29-mobile-drawer__close:hover {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-color: var(--ap29-color-pink);
}
.ap29-mobile-drawer__body {
flex: 1;
overflow-y: auto;
padding: 16px 20px;
}
.ap29-mobile-nav__list {
display: flex;
flex-direction: column;
}
.ap29-mobile-nav__item {
border-bottom: 1px solid var(--ap29-color-gray-light);
}
.ap29-mobile-nav__link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 4px;
font-size: 14px;
font-weight: 600;
color: var(--ap29-color-dark);
}
.ap29-mobile-nav__link:hover {
color: var(--ap29-color-pink);
}
.ap29-mobile-nav__toggle {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ap29-color-gray-bg);
color: var(--ap29-color-dark);
cursor: pointer;
font-weight: 700;
transition: background var(--ap29-transition),
color var(--ap29-transition);
}
.ap29-mobile-nav__toggle:hover {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
}
.ap29-mobile-drawer__footer {
padding: 16px 20px;
border-top: 1px solid var(--ap29-color-gray-light);
background: var(--ap29-color-gray-bg);
}
/* --- Header Responsive --- */
@media (max-width: 900px) {
.ap29-topbar__col--center .ap29-topbar__dot {
display: none;
}
.ap29-topbar__inner {
flex-direction: column;
gap: 6px;
text-align: center;
}
.ap29-topbar__col {
justify-content: center !important;
flex-wrap: wrap;
}
.ap29-header-main__inner {
grid-template-columns: 1fr auto 1fr;
gap: 12px;
}
.ap29-nav {
display: none;
}
.ap29-header__mobile-toggle {
display: inline-flex;
}
}
@media (max-width: 600px) {
.ap29-topbar {
font-size: 10px;
padding: 8px 0;
}
.ap29-header-main {
padding: 14px 0;
}
.jet-logo {
font-size: 22px;
}
.jet-logo__icon {
width: 28px;
height: 28px;
font-size: 13px;
}
.ap29-icon-btn {
width: 34px;
height: 34px;
}
}
@media (max-width: 480px) {
.ap29-topbar__col--right {
display: none;
}
}
/* =========================================================
* 4. Home Sections (按首页顺序)
* ========================================================= */
/* ----- 4.1 ap29-slider-section Hero Slider ----- */
.ap29-slider-section {
padding: 40px 0 60px;
background: linear-gradient(180deg, var(--ap29-color-pink-soft) 0%, var(--ap29-color-white) 100%);
}
.jet-slider {
position: relative;
width: 100%;
overflow: hidden;
}
.jet-slider__slides {
position: relative;
width: 100%;
}
.jet-slider__slide {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 60px;
padding: 40px 0;
}
.jet-slider__content {
max-width: 520px;
padding-left: 20px;
}
.jet-slider__label {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ap29-color-pink);
margin-bottom: 18px;
padding: 6px 14px;
background: var(--ap29-color-white);
border: 1px solid var(--ap29-color-pink-soft);
}
.jet-slider__title {
font-family: var(--ap29-font-head);
font-size: 56px;
line-height: 1.1;
margin: 0 0 20px;
color: var(--ap29-color-dark);
font-weight: 700;
letter-spacing: -1px;
}
.jet-slider__title em {
color: var(--ap29-color-pink);
font-style: normal;
}
.jet-slider__subtitle {
font-size: 14px;
line-height: 1.8;
color: var(--ap29-color-gray);
margin: 20px 0 32px;
max-width: 440px;
}
.jet-slider__button-wrap {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.jet-slider__button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 32px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3px;
border: 1px solid var(--ap29-color-pink);
transition: background var(--ap29-transition),
border-color var(--ap29-transition),
color var(--ap29-transition);
text-transform: none;
}
.jet-slider__button:hover {
background: var(--ap29-color-pink-deep);
border-color: var(--ap29-color-pink-deep);
color: var(--ap29-color-white);
}
.jet-slider__button:active {
background: #E55A84;
}
.jet-slider__button.is-ghost {
background: transparent;
color: var(--ap29-color-dark);
border-color: var(--ap29-color-dark);
}
.jet-slider__button.is-ghost:hover {
background: var(--ap29-color-dark);
color: var(--ap29-color-white);
border-color: var(--ap29-color-dark);
}
.jet-slider__image {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.jet-slider__image img {
width: 100%;
height: auto;
max-width: 560px;
object-fit: cover;
display: block;
margin-left: auto;
}
/* Slider Dots */
.jet-slider__dots {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-top: 30px;
}
.jet-slider__dot {
width: 10px;
height: 10px;
padding: 0;
background: var(--ap29-color-gray-light);
border: none;
cursor: pointer;
text-indent: -9999px;
transition: background var(--ap29-transition),
transform var(--ap29-transition),
width var(--ap29-transition);
}
.jet-slider__dot:hover {
background: var(--ap29-color-pink-soft);
transform: scale(1.2);
}
.jet-slider__dot.is-active,
.jet-slider__dot.active {
background: var(--ap29-color-pink);
width: 28px;
}
/* Slider Arrows */
.jet-slider__arrows {
position: absolute;
inset: 0;
pointer-events: none;
}
.jet-slider__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
background: var(--ap29-color-white);
color: var(--ap29-color-dark);
border: 1px solid var(--ap29-color-gray-light);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: 700;
pointer-events: auto;
transition: background var(--ap29-transition),
color var(--ap29-transition),
border-color var(--ap29-transition);
z-index: 10;
}
.jet-slider__arrow:hover {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-color: var(--ap29-color-pink);
}
.jet-slider__arrow--prev { left: 20px; }
.jet-slider__arrow--next { right: 20px; }
@media (max-width: 900px) {
.jet-slider__slide {
grid-template-columns: 1fr;
gap: 30px;
padding: 20px 0;
}
.jet-slider__content {
order: 2;
padding-left: 0;
text-align: center;
max-width: 100%;
}
.jet-slider__subtitle { max-width: 100%; }
.jet-slider__button-wrap { justify-content: center; }
.jet-slider__image { order: 1; }
.jet-slider__image img { margin: 0 auto; }
.jet-slider__title { font-size: 40px; }
.jet-slider__arrow { width: 40px; height: 40px; }
.jet-slider__arrow--prev { left: 0; }
.jet-slider__arrow--next { right: 0; }
}
@media (max-width: 600px) {
.ap29-slider-section { padding: 20px 0 40px; }
.jet-slider__title { font-size: 28px; }
.jet-slider__label { font-size: 10px; margin-bottom: 12px; letter-spacing: 1.5px; }
.jet-slider__subtitle { font-size: 13px; margin: 14px 0 22px; }
.jet-slider__button { padding: 13px 24px; font-size: 13px; }
.jet-slider__arrow { display: none; }
.jet-slider__dots { margin-top: 20px; }
}
/* ----- 4.2 ap29-banners-section 4 Banner (Sarah effect) ----- */
.ap29-banners-section {
padding: 20px 0 80px;
}
.ap29-banners__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ap29-gap);
}
.jet-banner {
position: relative;
overflow: hidden;
display: block;
background: var(--ap29-color-gray-bg);
border-radius: var(--ap29-radius);
}
.jet-banner img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
transition: transform 0.55s ease;
}
/* Sarah effect: scale image on hover */
.jet-banner.jet-effect-sarah:hover img {
transform: scale(1.05);
}
.jet-banner__content {
position: absolute;
left: 30px;
bottom: 30px;
right: 30px;
z-index: 2;
color: var(--ap29-color-white);
pointer-events: none;
}
.jet-banner__label {
display: inline-block;
font-size: 11px;
letter-spacing: 2px;
font-weight: 700;
color: var(--ap29-color-white);
background: var(--ap29-color-pink);
padding: 5px 12px;
margin-bottom: 10px;
text-transform: uppercase;
}
.jet-banner__title {
font-family: var(--ap29-font-head);
font-size: 28px;
line-height: 1.2;
font-weight: 700;
color: var(--ap29-color-white);
margin: 0 0 6px;
}
.jet-banner__subtitle {
font-size: 13px;
color: var(--ap29-color-white);
opacity: 0.9;
margin: 0;
line-height: 1.5;
}
.jet-banner__action {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 12px;
font-weight: 700;
color: var(--ap29-color-white);
letter-spacing: 0.5px;
text-transform: none;
pointer-events: auto;
position: relative;
padding-bottom: 3px;
}
.jet-banner__action::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1.5px;
background: var(--ap29-color-white);
transform-origin: left;
transform: scaleX(0.3);
transition: transform 0.3s ease;
}
.jet-banner:hover .jet-banner__action::after {
transform: scaleX(1);
}
.jet-banner:hover .jet-banner__title {
color: var(--ap29-color-pink);
}
@media (max-width: 900px) {
.ap29-banners-section { padding: 0 0 50px; }
}
@media (max-width: 600px) {
.ap29-banners__grid { grid-template-columns: 1fr; }
.jet-banner__content { left: 20px; bottom: 20px; right: 20px; }
.jet-banner__title { font-size: 22px; }
.ap29-banners-section { padding: 0 0 35px; }
}
/* ----- 4.3 ap29-tabs-section Tabs + Products ----- */
.ap29-tabs-section {
padding: 60px 0 80px;
background: var(--ap29-color-white);
}
.ap29-section-head {
width: 100%;
text-align: center;
margin-bottom: 50px;
}
.ap29-section-head__label {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ap29-color-pink);
margin-bottom: 10px;
}
.ap29-section-head__title {
font-family: var(--ap29-font-head);
font-size: 32px;
line-height: 1.2;
font-weight: 700;
margin: 0 0 10px;
}
.ap29-section-head__subtitle {
font-size: 14px;
color: var(--ap29-color-gray);
max-width: 560px;
margin: 0 auto;
}
/* --- Tabs Controls --- */
.jet-tabs {
width: 100%;
}
.jet-tabs__control-list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0;
list-style: none;
padding: 0;
margin: 0 0 36px;
border-bottom: 1px solid var(--ap29-color-gray-light);
}
.jet-tabs__control-item {
position: relative;
padding: 18px 30px;
font-size: 14px;
font-weight: 700;
color: var(--ap29-color-gray);
cursor: pointer;
letter-spacing: 0.2px;
text-transform: none;
transition: color var(--ap29-transition);
white-space: nowrap;
}
.jet-tabs__control-item::after {
content: '';
position: absolute;
left: 20px;
right: 20px;
bottom: -1px;
height: 2px;
background: var(--ap29-color-pink);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--ap29-transition);
}
.jet-tabs__control-item:hover {
color: var(--ap29-color-pink);
}
.jet-tabs__control-item.active-tab,
.jet-tabs__control-item.is-active {
color: var(--ap29-color-dark);
}
.jet-tabs__control-item.active-tab::after,
.jet-tabs__control-item.is-active::after {
transform: scaleX(1);
}
/* --- Products Listing --- */
.jet-woo-products {
width: 100%;
}
.jet-woo-products__listing {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
list-style: none;
padding: 0;
margin: 0;
}
.jet-woo-products__item {
position: relative;
display: flex;
flex-direction: column;
background: var(--ap29-color-white);
transition: transform var(--ap29-transition);
}
.jet-woo-products__item:hover {
transform: translateY(-4px);
}
.jet-woo-products__item-inner {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
.jet-woo-product-thumbnail {
position: relative;
width: 100%;
overflow: hidden;
background: var(--ap29-color-gray-bg);
display: block;
aspect-ratio: 4/5;
}
.jet-woo-product-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease, opacity 0.4s ease;
display: block;
}
.jet-woo-products__item:hover .jet-woo-product-thumbnail img {
transform: scale(1.05);
}
/* Secondary image swap */
.jet-woo-product-thumbnail img.jet-woo-product-thumbnail-img--secondary {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.jet-woo-products__item:hover .jet-woo-product-thumbnail img.jet-woo-product-thumbnail-img--secondary {
opacity: 1;
}
.jet-woo-products__item:hover .jet-woo-product-thumbnail img.jet-woo-product-thumbnail-img--primary {
opacity: 0;
}
/* Badges */
.jet-woo-product-badges {
position: absolute;
top: 12px;
left: 12px;
display: flex;
flex-direction: column;
gap: 6px;
z-index: 3;
}
.jet-woo-product-badge {
display: inline-block;
padding: 4px 10px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1.4;
color: var(--ap29-color-white);
background: var(--ap29-color-pink);
text-transform: uppercase;
}
.jet-woo-product-badge.is-onsale { background: var(--ap29-color-pink); }
.jet-woo-product-badge.is-new { background: var(--ap29-color-dark); }
.jet-woo-product-badge.is-hot { background: #E53935; }
/* Action buttons (quick view, wishlist, compare) */
.jet-woo-products-cqw-wrapper {
position: absolute;
right: 12px;
top: 12px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 3;
}
.jet-woo-products-cqw-btn {
width: 36px;
height: 36px;
background: var(--ap29-color-white);
color: var(--ap29-color-dark);
border: 1px solid var(--ap29-color-gray-light);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
opacity: 0;
transform: translateX(10px);
transition: opacity var(--ap29-transition),
transform var(--ap29-transition),
background var(--ap29-transition),
color var(--ap29-transition),
border-color var(--ap29-transition);
}
.jet-woo-products__item:hover .jet-woo-products-cqw-btn {
opacity: 1;
transform: translateX(0);
}
.jet-woo-products-cqw-btn:hover {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-color: var(--ap29-color-pink);
}
.jet-woo-products-cqw-btn.is-active,
.jet-woo-products-cqw-btn.added {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-color: var(--ap29-color-pink);
opacity: 1;
transform: translateX(0);
}
/* Product info */
.jet-woo-product-info {
padding: 18px 4px 8px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.jet-woo-product-categories {
font-size: 11px;
color: var(--ap29-color-gray);
letter-spacing: 0.5px;
text-transform: none;
}
.jet-woo-product-categories a {
color: var(--ap29-color-gray);
}
.jet-woo-product-categories a:hover {
color: var(--ap29-color-pink);
}
.jet-woo-product-title {
font-family: var(--ap29-font-head);
font-size: 15px;
line-height: 1.4;
font-weight: 600;
margin: 8px 0 6px;
color: var(--ap29-color-dark);
}
.jet-woo-product-title a {
color: var(--ap29-color-dark);
}
.jet-woo-product-title a:hover {
color: var(--ap29-color-pink);
}
.jet-woo-product-rating {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 6px;
color: #F6B500;
font-size: 12px;
}
.jet-woo-product-rating__empty {
color: var(--ap29-color-gray-light);
}
.jet-woo-product-price {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
font-size: 15px;
margin: 4px 0 12px;
}
.jet-woo-product-price del {
color: var(--ap29-color-gray);
font-size: 12px;
font-weight: 400;
text-decoration: line-through;
}
.jet-woo-product-price ins {
color: var(--ap29-color-pink);
font-weight: 700;
font-size: 16px;
text-decoration: none;
}
/* Hover: add to cart button */
.hovered-content {
margin-top: auto;
opacity: 0;
transform: translateY(8px);
transition: opacity var(--ap29-transition),
transform var(--ap29-transition);
}
.jet-woo-products__item:hover .hovered-content {
opacity: 1;
transform: translateY(0);
}
.jet-woo-product-button,
.woocommerce-loop-product__add-to-cart {
display: block;
width: 100%;
padding: 10px 16px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
text-align: center;
border: 1px solid var(--ap29-color-pink);
text-transform: none;
transition: background var(--ap29-transition),
border-color var(--ap29-transition),
color var(--ap29-transition);
cursor: pointer;
}
.jet-woo-product-button:hover,
.woocommerce-loop-product__add-to-cart:hover {
background: var(--ap29-color-pink-deep);
border-color: var(--ap29-color-pink-deep);
color: var(--ap29-color-white);
}
.jet-woo-product-button.added {
background: var(--ap29-color-dark);
border-color: var(--ap29-color-dark);
}
@media (max-width: 1100px) {
.jet-woo-products__listing {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
.ap29-tabs-section { padding: 30px 0 50px; }
.ap29-section-head { margin-bottom: 30px; }
.jet-woo-products__listing {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
/* Tabs控制条：超出换行，不要横向滚动条（用户明确要求） */
.jet-tabs__control-list {
overflow-x: visible;
justify-content: center;
flex-wrap: wrap;
padding-bottom: 0;
}
.jet-tabs__control-item { padding: 14px 20px; font-size: 13px; }
.jet-woo-products-cqw-btn {
opacity: 1;
transform: translateX(0);
}
.hovered-content {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 600px) {
.ap29-tabs-section { padding: 20px 0 35px; }
.jet-woo-products__listing {
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.jet-woo-product-info { padding: 12px 2px 6px; }
.jet-woo-product-title { font-size: 13px; }
.jet-woo-product-price ins { font-size: 14px; }
.ap29-section-head__title { font-size: 24px; }
}
@media (max-width: 420px) {
.jet-woo-products__listing {
grid-template-columns: 1fr;
}
}
/* ----- 4.4 ap29-categories-section 6 Category Cards ----- */
.ap29-categories-section {
padding: 80px 0;
background: var(--ap29-color-gray-bg);
}
.ap29-categories-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--ap29-gap);
}
.ap29-category-card {
position: relative;
overflow: hidden;
display: block;
background: var(--ap29-color-dark);
cursor: pointer;
}
.ap29-category-card__img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
opacity: 0.92;
transition: opacity 0.4s ease,
transform 0.55s ease;
}
.ap29-category-card:hover .ap29-category-card__img {
opacity: 0.75;
transform: scale(1.06);
}
.ap29-category-card__overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 40px 20px 24px;
background: linear-gradient(to top, rgba(46,67,114,0.75) 0%, rgba(46,67,114,0) 100%);
z-index: 2;
transition: background var(--ap29-transition);
}
.ap29-category-card:hover .ap29-category-card__overlay {
background: linear-gradient(to top, rgba(255,194,60,0.88) 0%, rgba(255,194,60,0) 100%);
}
.ap29-category-card__count {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--ap29-color-white);
opacity: 0.9;
display: block;
margin-bottom: 6px;
}
.ap29-category-card__name {
font-family: var(--ap29-font-head);
font-size: 20px;
font-weight: 700;
color: var(--ap29-color-white);
text-align: left;
margin: 0;
line-height: 1.2;
}
.ap29-category-card__name em {
font-style: normal;
}
.ap29-category-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
font-size: 12px;
font-weight: 700;
color: var(--ap29-color-white);
letter-spacing: 0.3px;
text-transform: none;
transform: translateX(-6px);
opacity: 0;
transition: opacity var(--ap29-transition),
transform var(--ap29-transition);
}
.ap29-category-card:hover .ap29-category-card__link {
opacity: 1;
transform: translateX(0);
}
@media (max-width: 900px) {
.ap29-categories-section { padding: 50px 0; }
.ap29-categories-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.ap29-categories-section { padding: 35px 0; }
.ap29-categories-grid { grid-template-columns: 1fr; }
.ap29-category-card__img { height: 220px; }
}
/* ----- 4.5 ap29-services-section 4 Icon Boxes ----- */
.ap29-services-section {
padding: 70px 0;
background: var(--ap29-color-gray-bg);
}
.ap29-services-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.elementor-icon-box-wrapper {
text-align: center;
padding: 20px 15px;
transition: transform var(--ap29-transition),
background var(--ap29-transition);
position: relative;
}
.elementor-icon-box-wrapper:hover {
transform: translateY(-4px);
}
.elementor-icon-box-icon {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto 18px;
}
.elementor-icon-box-icon .icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-radius: 50%;
transition: background var(--ap29-transition),
transform var(--ap29-transition);
}
.elementor-icon-box-wrapper:hover .icon-circle {
background: var(--ap29-color-pink-deep);
transform: scale(1.08);
}
.elementor-icon {
font-size: 24px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
.elementor-icon-box-content {
text-align: center;
}
.elementor-icon-box-title {
font-family: var(--ap29-font-head);
font-size: 15px;
font-weight: 700;
line-height: 1.3;
margin: 18px 0 8px;
color: var(--ap29-color-dark);
text-transform: none;
}
.elementor-icon-box-title a {
color: inherit;
}
.elementor-icon-box-title a:hover {
color: var(--ap29-color-pink);
}
.elementor-icon-box-description {
font-size: 12px;
line-height: 1.6;
color: var(--ap29-color-gray);
margin: 0;
}
@media (max-width: 900px) {
.ap29-services-section { padding: 50px 0; }
.ap29-services-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.elementor-icon-box-wrapper { padding: 15px 10px; }
}
@media (max-width: 480px) {
.ap29-services-grid { grid-template-columns: 1fr; }
}
/* ----- 4.6 ap29-brands-section Popular Brands ----- */
.ap29-brands-section {
padding: 60px 0;
background: var(--ap29-color-gray-bg);
border-top: 1px solid var(--ap29-color-gray-light);
border-bottom: 1px solid var(--ap29-color-gray-light);
}
.brands-list {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 12px;
align-items: center;
}
.brands-list__item {
display: block;
text-align: center;
padding: 14px 8px;
transition: transform var(--ap29-transition);
}
.brands-list__item-img {
height: 50px;
width: auto;
max-width: 100%;
margin: 0 auto;
object-fit: contain;
opacity: 0.5;
filter: grayscale(100%);
transition: opacity var(--ap29-transition),
filter var(--ap29-transition),
transform var(--ap29-transition);
}
.brands-list__item:hover .brands-list__item-img {
opacity: 1;
filter: grayscale(0%);
transform: translateY(-3px);
}
.brands-list__item:active .brands-list__item-img {
opacity: 1;
filter: grayscale(0%);
transform: translateY(-1px);
}
@media (max-width: 900px) {
.ap29-brands-section { padding: 40px 0; }
.brands-list { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
@media (max-width: 480px) {
.brands-list { grid-template-columns: repeat(2, 1fr); }
.brands-list__item-img { height: 40px; }
}
/* ----- 4.7 ap29-double-banners-section 2 Banners (Bubba effect) ----- */
.ap29-double-banners-section {
padding: 80px 0;
background: var(--ap29-color-white);
}
.ap29-double-banners__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--ap29-gap);
}
.jet-banner.jet-effect-bubba {
position: relative;
overflow: hidden;
}
.jet-banner.jet-effect-bubba img {
width: 100%;
height: 300px;
object-fit: cover;
transition: transform 0.5s ease;
}
.jet-banner.jet-effect-bubba:hover img {
transform: scale(1.08);
}
.jet-banner.jet-effect-bubba::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(46,67,114,0.55) 0%, rgba(46,67,114,0) 60%);
z-index: 1;
opacity: 0.6;
transition: opacity var(--ap29-transition),
background var(--ap29-transition);
}
/* Bubba effect: dark overlay on hover + content emerge */
.jet-banner.jet-effect-bubba::after {
content: '';
position: absolute;
inset: 0;
background: rgba(46, 67, 114, 0.3);
z-index: 1;
opacity: 0;
transition: opacity var(--ap29-transition);
}
.jet-banner.jet-effect-bubba:hover::after {
opacity: 1;
}
.jet-banner.jet-effect-bubba .jet-banner__content {
top: 50%;
left: 0;
right: 0;
bottom: auto;
transform: translateY(-50%);
text-align: center;
pointer-events: none;
z-index: 3;
opacity: 0;
transition: opacity 0.35s ease;
}
.jet-banner.jet-effect-bubba:hover .jet-banner__content {
opacity: 1;
}
.jet-banner.jet-effect-bubba .jet-banner__title {
font-size: 32px;
transform: translateY(10px);
transition: transform 0.4s ease;
}
.jet-banner.jet-effect-bubba:hover .jet-banner__title {
transform: translateY(0);
}
.jet-banner.jet-effect-bubba .jet-banner__subtitle {
font-size: 14px;
margin-top: 10px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.4s ease 0.05s, transform 0.4s ease 0.05s;
}
.jet-banner.jet-effect-bubba:hover .jet-banner__subtitle {
opacity: 0.9;
transform: translateY(0);
}
.jet-banner.jet-effect-bubba .jet-banner__action {
pointer-events: auto;
margin-top: 18px;
display: inline-flex;
transform: translateY(10px);
opacity: 0;
transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s, background var(--ap29-transition);
padding: 10px 24px;
border: 1.5px solid var(--ap29-color-white);
}
.jet-banner.jet-effect-bubba:hover .jet-banner__action {
opacity: 1;
transform: translateY(0);
}
.jet-banner.jet-effect-bubba .jet-banner__action:hover {
background: var(--ap29-color-pink);
border-color: var(--ap29-color-pink);
}
.jet-banner.jet-effect-bubba .jet-banner__action::after {
display: none;
}
@media (max-width: 900px) {
.ap29-double-banners-section { padding: 50px 0; }
.ap29-double-banners__grid { grid-template-columns: 1fr; }
.jet-banner.jet-effect-bubba .jet-banner__content { opacity: 1; }
.jet-banner.jet-effect-bubba::after { opacity: 0.5; }
.jet-banner.jet-effect-bubba .jet-banner__title { transform: translateY(0); }
.jet-banner.jet-effect-bubba .jet-banner__subtitle { opacity: 0.9; transform: translateY(0); }
.jet-banner.jet-effect-bubba .jet-banner__action { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
.ap29-double-banners-section { padding: 35px 0; }
.jet-banner.jet-effect-bubba img { height: 240px; }
.jet-banner.jet-effect-bubba .jet-banner__title { font-size: 24px; }
}
/* ----- 4.8 ap29-blog-section Blog Updates 3 columns ----- */
.ap29-blog-section {
padding: 80px 0;
background: var(--ap29-color-gray-bg);
}
.jet-posts.col-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.jet-posts__item {
background: var(--ap29-color-white);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform var(--ap29-transition);
}
.jet-posts__item:hover {
transform: translateY(-6px);
}
.post-thumbnail {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
display: block;
background: var(--ap29-color-gray-light);
}
.post-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.jet-posts__item:hover .post-thumbnail img {
transform: scale(1.05);
}
.post-date-badge {
position: absolute;
left: 14px;
bottom: 14px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
padding: 6px 12px;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
z-index: 2;
}
.post-content {
padding: 22px 22px 26px;
flex: 1;
display: flex;
flex-direction: column;
}
.jet-posts__terms-link {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
color: var(--ap29-color-pink);
text-transform: uppercase;
margin: 0 0 6px;
}
.jet-posts__terms-link:hover {
color: var(--ap29-color-pink-deep);
}
.entry-title {
font-family: var(--ap29-font-head);
font-size: 18px;
font-weight: 700;
line-height: 1.35;
margin: 0 0 10px;
color: var(--ap29-color-dark);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.entry-title a {
color: inherit;
}
.entry-title a:hover {
color: var(--ap29-color-pink);
}
.post-excerpt {
font-size: 13px;
line-height: 1.7;
color: var(--ap29-color-gray);
margin: 0 0 14px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.post-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: auto;
padding-top: 12px;
border-top: 1px solid var(--ap29-color-gray-light);
font-size: 11px;
color: var(--ap29-color-gray);
}
.post-meta__item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.post-meta__sep {
color: var(--ap29-color-gray-light);
}
.post-meta a {
color: var(--ap29-color-gray);
}
.post-meta a:hover {
color: var(--ap29-color-pink);
}
.ap29-blog__view-all {
text-align: center;
margin-top: 44px;
}
@media (max-width: 900px) {
.ap29-blog-section { padding: 50px 0; }
.jet-posts.col-row { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
.ap29-blog-section { padding: 35px 0; }
.post-thumbnail { height: 200px; }
.post-content { padding: 18px 16px 22px; }
.entry-title { font-size: 16px; }
}
/* ----- 4.9 ap29-promo-section 3 Promo Boxes ----- */
.ap29-promo-section {
padding: 30px 0;
background: var(--ap29-color-white);
border-top: 1px solid var(--ap29-color-gray-light);
border-bottom: 1px solid var(--ap29-color-gray-light);
}
.ap29-promo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: center;
}
.ap29-promo-box {
display: flex;
align-items: center;
gap: 16px;
padding: 10px 8px;
transition: background var(--ap29-transition),
padding-left var(--ap29-transition);
}
.ap29-promo-box:hover {
background: var(--ap29-color-pink-soft);
padding-left: 14px;
}
.ap29-promo-box__icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background: var(--ap29-color-pink-soft);
color: var(--ap29-color-pink-deep);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: background var(--ap29-transition),
color var(--ap29-transition),
transform var(--ap29-transition);
}
.ap29-promo-box:hover .ap29-promo-box__icon {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
transform: rotate(-5deg) scale(1.05);
}
.ap29-promo-box__title {
font-family: var(--ap29-font-head);
font-size: 14px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 2px;
color: var(--ap29-color-dark);
text-transform: none;
}
.ap29-promo-box__desc {
font-size: 12px;
color: var(--ap29-color-gray);
margin: 0;
line-height: 1.5;
}
@media (max-width: 900px) {
.ap29-promo-section { padding: 26px 0; }
.ap29-promo-grid { grid-template-columns: 1fr; gap: 10px; }
}
/* ----- 4.10 ap29-instagram-section Instagram Gallery ----- */
.ap29-instagram-section {
padding: 80px 0;
background: var(--ap29-color-white);
}
.jet-instagram-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 0;
width: 100%;
}
.jet-instagram-gallery__item {
position: relative;
display: block;
}
.jet-instagram-gallery__img-wrap {
position: relative;
overflow: hidden;
aspect-ratio: 1 / 1;
width: 100%;
background: var(--ap29-color-gray-bg);
}
.jet-instagram-gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.jet-instagram-gallery__img-wrap:hover .jet-instagram-gallery__img {
transform: scale(1.1);
}
.jet-instagram-gallery__overlay {
position: absolute;
inset: 0;
background: rgba(255, 194, 60, 0.75);
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
z-index: 2;
color: var(--ap29-color-white);
}
.jet-instagram-gallery__img-wrap:hover .jet-instagram-gallery__overlay {
display: flex;
animation: ap29-fade-in 0.25s ease;
}
@keyframes ap29-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.jet-instagram-gallery__icon {
width: 50px;
height: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ap29-color-white);
color: var(--ap29-color-pink);
border-radius: 50%;
font-size: 20px;
transform: scale(0.85);
animation: ap29-pop-in 0.3s ease forwards;
}
@keyframes ap29-pop-in {
to { transform: scale(1); }
}
.jet-instagram-gallery__meta {
display: flex;
gap: 18px;
font-size: 13px;
color: var(--ap29-color-white);
font-weight: 600;
animation: ap29-slide-up 0.3s ease forwards;
}
@keyframes ap29-slide-up {
from { transform: translateY(6px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.jet-instagram-gallery__meta-item {
display: inline-flex;
align-items: center;
gap: 5px;
}
@media (max-width: 900px) {
.ap29-instagram-section { padding: 50px 0; }
}
@media (max-width: 600px) {
.ap29-instagram-section { padding: 35px 0; }
.jet-instagram-gallery {
grid-template-columns: repeat(2, 1fr);
}
}
/* ----- 4.11 ap29-subscribe-section Email Subscribe ----- */
.ap29-subscribe-section {
padding: 70px 0;
background: var(--ap29-color-gray-bg);
}
.ap29-subscribe__inner {
max-width: 680px;
margin: 0 auto;
text-align: center;
padding: 0 20px;
}
.ap29-subscribe__label {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ap29-color-pink);
margin-bottom: 10px;
}
.ap29-subscribe__title {
font-family: var(--ap29-font-head);
font-size: 32px;
font-weight: 700;
line-height: 1.2;
margin: 0 0 10px;
color: var(--ap29-color-dark);
}
.ap29-subscribe__title em {
color: var(--ap29-color-pink);
font-style: normal;
}
.ap29-subscribe__subtitle {
font-size: 14px;
line-height: 1.6;
color: var(--ap29-color-gray);
margin: 0 auto;
}
.jet-subscribe-form {
display: flex;
width: 100%;
max-width: 500px;
margin: 24px auto 0;
border: 1px solid var(--ap29-color-gray-light);
background: var(--ap29-color-white);
transition: border-color var(--ap29-transition);
}
.jet-subscribe-form:focus-within {
border-color: var(--ap29-color-pink);
}
.jet-subscribe-form__input {
flex: 1;
min-width: 0;
padding: 14px 18px;
border: none;
background: transparent;
color: var(--ap29-color-dark);
font-size: 14px;
outline: none;
}
.jet-subscribe-form__input::placeholder {
color: var(--ap29-color-gray);
opacity: 0.8;
}
.jet-subscribe-form__submit {
padding: 14px 32px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3px;
border: none;
cursor: pointer;
transition: background var(--ap29-transition);
text-transform: none;
white-space: nowrap;
flex-shrink: 0;
}
.jet-subscribe-form__submit:hover {
background: var(--ap29-color-pink-deep);
}
.jet-subscribe-form__submit:active {
background: #E55A84;
}
.ap29-subscribe__notice {
margin-top: 14px;
font-size: 11px;
color: var(--ap29-color-gray);
opacity: 0.85;
}
@media (max-width: 600px) {
.ap29-subscribe-section { padding: 40px 0; }
.ap29-subscribe__title { font-size: 24px; }
.jet-subscribe-form {
flex-direction: column;
border: none;
background: transparent;
gap: 10px;
}
.jet-subscribe-form:focus-within { border: none; }
.jet-subscribe-form__input {
border: 1px solid var(--ap29-color-gray-light);
background: var(--ap29-color-white);
width: 100%;
}
.jet-subscribe-form__submit { width: 100%; }
}
/* =========================================================
* 4.b List Page Hero (Breadcrumb + Title) ap29-list-hero
* ========================================================= */
.ap29-list-hero {
position: relative;
padding: 54px 24px 48px;
background: linear-gradient(135deg, #2E4372 0%, #3A5690 50%, #466BA8 100%);
overflow: hidden;
border-bottom: 3px solid #FFC23C;
}
.ap29-list-hero-inner {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
}
.ap29-list-hero-deco {
position: absolute;
z-index: 1;
pointer-events: none;
user-select: none;
}
.ap29-list-hero-wave { top: -4px; right: 2%; opacity: 0.9; }
.ap29-list-hero-orbit {
bottom: -24px; left: -20px; opacity: 0.95;
animation: ap29Spin 28s linear infinite;
}
@keyframes ap29Spin {
from { transform: rotate(0deg); transform-origin: center; }
to { transform: rotate(360deg); transform-origin: center; }
}
.ap29-list-breadcrumb {
display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0;
padding: 8px 18px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 194, 60, 0.3);
border-radius: 999px;
backdrop-filter: blur(6px);
font-size: 12.5px; color: #FFF4D6; margin-bottom: 20px;
font-family: var(--ap29-font-body, 'Open Sans', sans-serif);
line-height: 1;
}
.ap29-list-breadcrumb__item { display: inline-flex; align-items: center; color: #B8C4DC; }
.ap29-list-breadcrumb__item a { color: #FFF4D6; text-decoration: none; transition: color 0.2s; padding: 3px 2px; border-radius: 4px; }
.ap29-list-breadcrumb__item a:hover { color: #FFC23C; }
.ap29-list-breadcrumb__item--home a { display: inline-flex; align-items: center; gap: 7px; color: #FFC23C; font-weight: 700; }
.ap29-list-breadcrumb__item--home a:hover { color: #fff; }
.ap29-list-breadcrumb__item--home a i { font-size: 12px; }
.ap29-list-breadcrumb__sep { display: inline-flex; align-items: center; padding: 0 8px; color: #FFC23C; opacity: 0.75; font-size: 9px; }
.ap29-list-breadcrumb__item--current { color: #fff; font-weight: 600; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap29-list-hero-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ap29-list-hero-title { font-size: clamp(28px, 4.2vw, 46px); font-weight: 800; color: #fff; margin: 0 0 8px; letter-spacing: -0.5px; line-height: 1.15; text-shadow: 0 2px 14px rgba(0,0,0,0.28); position: relative; padding-bottom: 14px; }
.ap29-list-hero-title::after { content: ""; position: absolute; left: 2px; bottom: 0; width: 80px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, #FFC23C 0%, #FFE08A 100%); box-shadow: 0 0 12px rgba(255,194,60,0.45); }
.ap29-list-hero-sub { display: inline-flex; align-items: center; gap: 8px; color: #B8C4DC; font-size: 14px; letter-spacing: 0.3px; font-weight: 500; }
.ap29-list-hero-sub i { color: #FFC23C; font-size: 13px; }
.ap29-list-hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: linear-gradient(135deg, #FFC23C 0%, #4A90D9 100%); color: #fff; font-weight: 700; font-size: 13px; border-radius: 999px; box-shadow: 0 6px 16px rgba(255,194,60,0.4); letter-spacing: 0.3px; white-space: nowrap; flex-shrink: 0; }
.ap29-list-hero-chip i { font-size: 14px; }
@media (max-width: 768px) {
.ap29-list-hero { padding: 40px 18px 36px; }
.ap29-list-hero-wave { display: none; }
.ap29-list-hero-orbit { transform: scale(0.75); transform-origin: left bottom; bottom: -16px; }
.ap29-list-breadcrumb { padding: 7px 14px; font-size: 11.5px; margin-bottom: 16px; }
.ap29-list-breadcrumb__item--current { max-width: 190px; }
.ap29-list-hero-title-row { align-items: flex-start; flex-direction: column; gap: 18px; }
.ap29-list-hero-chip { padding: 9px 16px; font-size: 12.5px; }
}
@media (max-width: 480px) {
.ap29-list-hero-orbit { display: none; }
.ap29-list-breadcrumb__item--home a span { display: none; }
.ap29-list-breadcrumb__item--home a::after { content: "Home"; }
}
/* =========================================================
* 5. List/Shop Page -- ap29-list-main-section
* ========================================================= */
.ap29-list-main-section {
padding: 40px 0 80px;
background: var(--ap29-color-white);
}
.ap29-list-main-section .elementor-container {
display: flex;
flex-wrap: wrap;
gap: 0;
align-items: flex-start;
}
.ap29-list__sidebar.col-sidebar {
width: 25%;
padding-right: 20px;
position: sticky;
top: 20px;
align-self: flex-start;
}
.ap29-list__content.col-content {
width: 75%;
padding-left: 0;
}
/* --- Page / Breadcrumb --- */
.ap29-page-header {
background: var(--ap29-color-pink-soft);
padding: 40px 0;
text-align: center;
}
.ap29-page-header__title {
font-family: var(--ap29-font-head);
font-size: 32px;
font-weight: 700;
margin: 0 0 10px;
color: var(--ap29-color-dark);
}
.ap29-breadcrumb {
font-size: 12px;
color: var(--ap29-color-gray);
}
.ap29-breadcrumb a {
color: var(--ap29-color-gray);
}
.ap29-breadcrumb a:hover {
color: var(--ap29-color-pink);
}
.ap29-breadcrumb__sep {
margin: 0 8px;
color: var(--ap29-color-gray-light);
}
/* --- Shop Toolbar --- */
.ap29-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
margin-bottom: 24px;
border-bottom: 1px solid var(--ap29-color-gray-light);
flex-wrap: wrap;
}
.ap29-shop-toolbar__count {
font-size: 13px;
color: var(--ap29-color-gray);
}
.ap29-shop-toolbar__count strong {
color: var(--ap29-color-dark);
font-weight: 700;
}
.ap29-shop-toolbar__order {
display: inline-flex;
align-items: center;
gap: 10px;
}
.ap29-shop-toolbar__order label {
font-size: 13px;
color: var(--ap29-color-gray);
}
.ap29-shop-toolbar__order select,
select.orderby {
padding: 10px 36px 10px 14px;
border: 1px solid var(--ap29-color-gray-light);
background: var(--ap29-color-white) url("data:image/svg+xml;utf8,") no-repeat right 12px center;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
font-size: 13px;
color: var(--ap29-color-dark);
cursor: pointer;
transition: border-color var(--ap29-transition);
min-width: 180px;
}
.ap29-shop-toolbar__order select:hover,
select.orderby:hover {
border-color: var(--ap29-color-gray);
}
.ap29-shop-toolbar__order select:focus,
select.orderby:focus {
border-color: var(--ap29-color-pink);
outline: none;
}
/* --- Sidebar Filter --- */
.ap29-filter {
width: 100%;
}
.ap29-filter-group {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid var(--ap29-color-gray-light);
}
.ap29-filter-group:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.ap29-filter-group__title {
font-family: var(--ap29-font-head);
font-size: 14px;
font-weight: 700;
margin: 0 0 16px;
color: var(--ap29-color-dark);
text-transform: none;
display: flex;
align-items: center;
justify-content: space-between;
}
.ap29-filter-group__toggle {
display: none;
width: 26px;
height: 26px;
align-items: center;
justify-content: center;
background: var(--ap29-color-gray-bg);
color: var(--ap29-color-dark);
cursor: pointer;
font-weight: 700;
font-size: 13px;
transition: background var(--ap29-transition),
color var(--ap29-transition),
transform var(--ap29-transition);
}
.ap29-filter-group__toggle:hover {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
}
.ap29-filter-list {
list-style: none;
padding: 0;
margin: 0;
}
.ap29-filter-item {
margin-bottom: 8px;
}
.ap29-filter-checkbox {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--ap29-color-gray);
cursor: pointer;
padding: 2px 0;
transition: color var(--ap29-transition);
user-select: none;
}
.ap29-filter-checkbox input[type="checkbox"],
.ap29-filter-checkbox input[type="radio"] {
width: 15px;
height: 15px;
accent-color: var(--ap29-color-pink);
cursor: pointer;
flex-shrink: 0;
}
.ap29-filter-checkbox:hover {
color: var(--ap29-color-pink);
}
.ap29-filter-checkbox.is-checked {
color: var(--ap29-color-pink-deep);
font-weight: 600;
}
.ap29-filter-checkbox__count {
margin-left: auto;
font-size: 11px;
color: var(--ap29-color-gray);
opacity: 0.8;
}
.ap29-filter-checkbox:hover .ap29-filter-checkbox__count,
.ap29-filter-checkbox.is-checked .ap29-filter-checkbox__count {
color: var(--ap29-color-pink);
opacity: 1;
}
/* --- Color Swatch filter --- */
.ap29-filter-swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.ap29-swatch {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--ap29-color-gray-light);
cursor: pointer;
position: relative;
transition: transform var(--ap29-transition),
border-color var(--ap29-transition);
}
.ap29-swatch:hover {
transform: scale(1.15);
}
.ap29-swatch.is-active {
border-color: var(--ap29-color-pink);
box-shadow: 0 0 0 2px var(--ap29-color-pink-soft);
}
/* --- Price Filter --- */
.ap29-filter-price {
display: flex;
flex-direction: column;
gap: 12px;
}
.ap29-filter-price__inputs {
display: flex;
align-items: center;
gap: 10px;
}
.ap29-filter-price__input {
width: 100%;
padding: 9px 10px;
border: 1px solid var(--ap29-color-gray-light);
font-size: 12px;
color: var(--ap29-color-dark);
text-align: center;
transition: border-color var(--ap29-transition);
}
.ap29-filter-price__input:focus {
border-color: var(--ap29-color-pink);
outline: none;
}
.ap29-filter-price__dash {
color: var(--ap29-color-gray);
font-weight: 700;
}
.ap29-filter-price__slider {
position: relative;
width: 100%;
height: 4px;
background: var(--ap29-color-gray-light);
margin: 6px 0 2px;
}
.ap29-filter-price__slider-range {
position: absolute;
left: 10%;
right: 20%;
height: 100%;
background: var(--ap29-color-pink);
}
.ap29-filter-price__slider-handle {
position: absolute;
top: 50%;
width: 14px;
height: 14px;
background: var(--ap29-color-pink);
border: 2px solid var(--ap29-color-white);
border-radius: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.ap29-filter-price__slider-handle--min { left: 10%; }
.ap29-filter-price__slider-handle--max { right: 20%; transform: translate(50%, -50%); }
.ap29-filter-price__submit {
width: 100%;
padding: 10px;
background: var(--ap29-color-dark);
color: var(--ap29-color-white);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: background var(--ap29-transition);
text-transform: none;
margin-top: 2px;
}
.ap29-filter-price__submit:hover {
background: var(--ap29-color-pink);
}
/* --- Products (same as home, but 4-col default) --- */
.ap29-list__content .jet-woo-products__listing {
grid-template-columns: repeat(3, 1fr);
}
/* --- Pagination --- */
.jet-smart-filters-pagination {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4px;
margin: 40px 0 0;
list-style: none;
padding: 0;
}
.jet-smart-filters-pagination .page-item {
display: inline-flex;
align-items: center;
justify-content: center;
}
.jet-smart-filters-pagination .page-item a,
.jet-smart-filters-pagination .page-item span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 12px;
border: 1px solid var(--ap29-color-gray-light);
background: var(--ap29-color-white);
color: var(--ap29-color-dark);
font-size: 13px;
font-weight: 600;
transition: background var(--ap29-transition),
color var(--ap29-transition),
border-color var(--ap29-transition);
}
.jet-smart-filters-pagination .page-item a:hover {
background: var(--ap29-color-pink-soft);
color: var(--ap29-color-pink);
border-color: var(--ap29-color-pink-soft);
}
.jet-smart-filters-pagination .page-item.active a,
.jet-smart-filters-pagination .page-item.active span,
.jet-smart-filters-pagination .page-item.is-active a {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-color: var(--ap29-color-pink);
}
.jet-smart-filters-pagination .page-item.disabled span {
opacity: 0.4;
cursor: not-allowed;
}
@media (max-width: 900px) {
.ap29-list-main-section { padding: 30px 0 50px; }
.ap29-list__sidebar.col-sidebar {
width: 100%;
padding-right: 0;
position: static;
order: 2;
margin-top: 30px;
}
.ap29-list__content.col-content {
width: 100%;
padding-left: 0;
order: 1;
}
.ap29-list__content .jet-woo-products__listing {
grid-template-columns: repeat(2, 1fr);
}
.ap29-filter-group__toggle { display: inline-flex; }
.ap29-filter-group__body {
display: none;
}
.ap29-filter-group.is-open .ap29-filter-group__body {
display: block;
}
.ap29-filter-group.is-open .ap29-filter-group__toggle {
transform: rotate(180deg);
}
}
@media (max-width: 600px) {
.ap29-list-main-section { padding: 20px 0 35px; }
.ap29-list__content .jet-woo-products__listing {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.ap29-shop-toolbar {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 14px 0;
}
.ap29-shop-toolbar__order {
justify-content: space-between;
}
.ap29-shop-toolbar__order select,
select.orderby {
flex: 1;
min-width: 0;
}
}
@media (max-width: 420px) {
.ap29-list__content .jet-woo-products__listing {
grid-template-columns: 1fr;
}
}
/* =========================================================
* 6. Product Detail -- ap29-product-main-section
* ========================================================= */
.ap29-product-main-section {
padding: 40px 0 80px;
background: var(--ap29-color-white);
}
.ap29-product-gallery {
width: 50%;
padding-right: 10px;
}
.ap29-product-summary {
width: 50%;
padding-left: 40px;
}
/* --- (6a) Gallery --- */
.flex-viewport {
width: 100%;
overflow: hidden;
border: 1px solid var(--ap29-color-gray-light);
background: var(--ap29-color-gray-bg);
}
.flex-viewport img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.flex-control-thumbs {
list-style: none;
padding: 0;
margin: 12px 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
.flex-control-thumbs li {
width: 100%;
}
.flex-control-thumbs img {
width: 100%;
height: 80px;
object-fit: cover;
border: 1px solid var(--ap29-color-gray-light);
cursor: pointer;
transition: border-color var(--ap29-transition),
opacity var(--ap29-transition),
transform var(--ap29-transition);
opacity: 0.85;
}
.flex-control-thumbs img:hover {
border-color: var(--ap29-color-pink);
opacity: 1;
transform: translateY(-2px);
}
.flex-control-thumbs li.flex-active img {
border-color: var(--ap29-color-pink);
box-shadow: 0 0 0 2px var(--ap29-color-pink-soft);
opacity: 1;
}
/* --- (6b) Summary --- */
.product_title.entry-title {
font-family: var(--ap29-font-head);
font-size: 28px;
font-weight: 700;
line-height: 1.25;
margin: 0 0 16px;
color: var(--ap29-color-dark);
}
.ap29-product-summary .jet-woo-product-rating {
margin-bottom: 10px;
font-size: 13px;
}
.ap29-product-summary .price {
font-size: 24px;
margin: 16px 0 20px;
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
}
.ap29-product-summary .price del {
color: var(--ap29-color-gray);
font-size: 16px;
font-weight: 400;
text-decoration: line-through;
}
.ap29-product-summary .price ins {
color: var(--ap29-color-pink);
font-weight: 700;
font-size: 24px;
text-decoration: none;
}
.product-stock {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
background: var(--ap29-color-pink-soft);
color: var(--ap29-color-pink-deep);
margin-bottom: 16px;
}
.product-stock.is-out {
background: #FCE4E4;
color: #E53935;
}
.product-excerpt {
font-size: 14px;
line-height: 1.8;
color: var(--ap29-color-gray);
margin: 20px 0 30px;
}
/* --- Cart Form --- */
form.cart {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 22px 0;
margin: 0 0 10px;
border-top: 1px solid var(--ap29-color-gray-light);
border-bottom: 1px solid var(--ap29-color-gray-light);
}
form.cart .quantity {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--ap29-color-gray-light);
height: 48px;
overflow: hidden;
}
form.cart .quantity .qty-btn {
width: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--ap29-color-white);
color: var(--ap29-color-dark);
cursor: pointer;
font-size: 16px;
font-weight: 700;
border: none;
transition: background var(--ap29-transition),
color var(--ap29-transition);
}
form.cart .quantity .qty-btn:hover {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
}
form.cart .quantity input.input-text.qty {
width: 60px;
text-align: center;
border: none;
border-left: 1px solid var(--ap29-color-gray-light);
border-right: 1px solid var(--ap29-color-gray-light);
padding: 0;
font-size: 14px;
font-weight: 600;
color: var(--ap29-color-dark);
background: var(--ap29-color-white);
height: 100%;
outline: none;
-moz-appearance: textfield;
}
form.cart .quantity input.input-text.qty::-webkit-outer-spin-button,
form.cart .quantity input.input-text.qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.single_add_to_cart_button {
flex: 1;
min-width: 200px;
padding: 14px 32px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3px;
border: 1px solid var(--ap29-color-pink);
cursor: pointer;
transition: background var(--ap29-transition),
border-color var(--ap29-transition),
color var(--ap29-transition);
text-transform: none;
height: 48px;
}
.single_add_to_cart_button:hover {
background: var(--ap29-color-pink-deep);
border-color: var(--ap29-color-pink-deep);
color: var(--ap29-color-white);
}
.single_add_to_cart_button:active {
background: #E55A84;
border-color: #E55A84;
}
.single_add_to_cart_button.added {
background: var(--ap29-color-dark);
border-color: var(--ap29-color-dark);
}
.single_add_to_cart_button.loading {
opacity: 0.7;
pointer-events: none;
}
/* --- Compare / Wishlist --- */
.ap29-product-extra-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 10px 0 0;
}
.ap29-extra-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 14px;
border: 1px solid var(--ap29-color-gray-light);
background: var(--ap29-color-white);
color: var(--ap29-color-dark);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
cursor: pointer;
transition: background var(--ap29-transition),
color var(--ap29-transition),
border-color var(--ap29-transition);
text-transform: none;
}
.ap29-extra-btn:hover {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-color: var(--ap29-color-pink);
}
.ap29-extra-btn.is-active {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-color: var(--ap29-color-pink);
}
/* --- Product Meta --- */
.product_meta {
font-size: 12px;
color: var(--ap29-color-gray);
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid var(--ap29-color-gray-light);
line-height: 2;
}
.product_meta .sku_wrapper,
.product_meta .posted_in,
.product_meta .tagged_as {
display: block;
}
.product_meta .sku,
.product_meta a {
color: var(--ap29-color-dark);
font-weight: 600;
}
.product_meta a:hover {
color: var(--ap29-color-pink);
}
/* --- (6c) Tabs (Description / Attributes / Reviews) --- */
.ap29-product-tabs-section {
padding: 40px 0 80px;
background: var(--ap29-color-white);
border-top: 1px solid var(--ap29-color-gray-light);
}
.jet-single-tabs,
.woocommerce-tabs {
width: 100%;
}
.woocommerce-tabs ul.tabs {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0;
padding: 0;
margin: 0 0 0;
border-bottom: 1px solid var(--ap29-color-gray-light);
list-style: none;
}
.woocommerce-tabs ul.tabs li {
position: relative;
padding: 18px 30px;
font-size: 14px;
font-weight: 700;
color: var(--ap29-color-gray);
cursor: pointer;
letter-spacing: 0.2px;
text-transform: none;
transition: color var(--ap29-transition);
white-space: nowrap;
}
.woocommerce-tabs ul.tabs li::after {
content: '';
position: absolute;
left: 20px;
right: 20px;
bottom: -1px;
height: 2px;
background: var(--ap29-color-pink);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--ap29-transition);
}
.woocommerce-tabs ul.tabs li:hover {
color: var(--ap29-color-pink);
}
.woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs li.is-active {
color: var(--ap29-color-dark);
}
.woocommerce-tabs ul.tabs li.active::after,
.woocommerce-tabs ul.tabs li.is-active::after {
transform: scaleX(1);
}
.woocommerce-tabs .panel {
padding: 30px 0;
display: none;
}
.woocommerce-tabs .panel.is-active,
.woocommerce-tabs .panel.active {
display: block;
animation: ap29-fade-in 0.3s ease;
}
.woocommerce-tabs .panel h2 {
font-family: var(--ap29-font-head);
font-size: 22px;
font-weight: 700;
margin: 0 0 20px;
color: var(--ap29-color-dark);
line-height: 1.3;
}
.woocommerce-tabs .panel p {
font-size: 14px;
line-height: 1.8;
color: var(--ap29-color-gray);
margin: 0 0 1em;
}
.woocommerce-tabs .panel ul,
.woocommerce-tabs .panel ol {
margin: 0 0 1em 24px;
color: var(--ap29-color-gray);
line-height: 1.8;
font-size: 14px;
}
.woocommerce-tabs .panel ul { list-style: disc; }
.woocommerce-tabs .panel ol { list-style: decimal; }
.woocommerce-product-attributes {
width: 100%;
border-collapse: collapse;
margin: 0;
}
.woocommerce-product-attributes th,
.woocommerce-product-attributes td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--ap29-color-gray-light);
font-size: 13px;
vertical-align: top;
}
.woocommerce-product-attributes th {
width: 30%;
color: var(--ap29-color-dark);
font-weight: 700;
background: var(--ap29-color-gray-bg);
}
.woocommerce-product-attributes td {
color: var(--ap29-color-gray);
}
.woocommerce-product-attributes a {
color: var(--ap29-color-dark);
}
.woocommerce-product-attributes a:hover {
color: var(--ap29-color-pink);
}
/* --- Reviews --- */
#reviews .ap29-review-list {
margin: 0 0 40px;
padding: 0;
list-style: none;
}
.ap29-review-item {
padding: 22px 0;
border-bottom: 1px solid var(--ap29-color-gray-light);
display: flex;
gap: 18px;
}
.ap29-review-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
background: var(--ap29-color-pink-soft);
color: var(--ap29-color-pink-deep);
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 18px;
}
.ap29-review-body {
flex: 1;
}
.ap29-review-meta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 8px;
}
.ap29-review-author {
font-weight: 700;
color: var(--ap29-color-dark);
font-size: 14px;
}
.ap29-review-date {
font-size: 11px;
color: var(--ap29-color-gray);
}
.ap29-review-text {
font-size: 13px;
color: var(--ap29-color-gray);
line-height: 1.7;
margin: 8px 0 0;
}
/* --- Review Form --- */
#review_form {
padding-top: 24px;
border-top: 1px solid var(--ap29-color-gray-light);
}
#review_form .comment-reply-title {
font-family: var(--ap29-font-head);
font-size: 20px;
font-weight: 700;
margin: 0 0 20px;
color: var(--ap29-color-dark);
}
.comment-form-rating {
margin-bottom: 16px;
}
.comment-form-rating label {
display: block;
font-size: 13px;
font-weight: 700;
margin-bottom: 6px;
color: var(--ap29-color-dark);
}
.ap29-stars {
display: inline-flex;
gap: 6px;
flex-direction: row-reverse;
}
.ap29-stars input {
display: none;
}
.ap29-stars label {
font-size: 22px;
color: var(--ap29-color-gray-light);
cursor: pointer;
transition: color var(--ap29-transition);
}
.ap29-stars label:hover,
.ap29-stars label:hover ~ label,
.ap29-stars input:checked ~ label {
color: #F6B500;
}
.comment-form p.comment-form-comment,
.comment-form p.comment-form-author,
.comment-form p.comment-form-email {
margin-bottom: 16px;
}
.comment-form label {
display: block;
font-size: 13px;
font-weight: 700;
margin-bottom: 6px;
color: var(--ap29-color-dark);
}
.comment-form textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--ap29-color-gray-light);
font-size: 14px;
line-height: 1.6;
color: var(--ap29-color-dark);
resize: vertical;
min-height: 140px;
border-radius: var(--ap29-radius);
transition: border-color var(--ap29-transition);
font-family: inherit;
}
.comment-form textarea:focus {
border-color: var(--ap29-color-pink);
outline: none;
}
.comment-form input[type="text"],
.comment-form input[type="email"] {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--ap29-color-gray-light);
border-radius: var(--ap29-radius);
transition: border-color var(--ap29-transition);
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus {
border-color: var(--ap29-color-pink);
outline: none;
}
.form-submit {
margin-top: 10px;
}
.form-submit .submit {
padding: 14px 32px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.3px;
border: 1px solid var(--ap29-color-pink);
cursor: pointer;
transition: background var(--ap29-transition),
border-color var(--ap29-transition);
text-transform: none;
}
.form-submit .submit:hover {
background: var(--ap29-color-pink-deep);
border-color: var(--ap29-color-pink-deep);
}
/* --- (6d) Related Products --- */
.ap29-related-section {
padding: 20px 0 80px;
background: var(--ap29-color-white);
}
.ap29-related-section h2 {
font-family: var(--ap29-font-head);
font-size: 24px;
font-weight: 700;
margin: 0 0 30px;
color: var(--ap29-color-dark);
line-height: 1.3;
}
.ap29-related-section .swiper-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
list-style: none;
padding: 0;
margin: 0;
}
.ap29-related-section .swiper-slide {
width: 100% !important;
}
/* Swiper nav buttons (related) */
.ap29-related-nav {
position: relative;
}
.ap29-related-nav .swiper-button-prev,
.ap29-related-nav .swiper-button-next {
position: absolute;
top: -62px;
width: 38px;
height: 38px;
background: var(--ap29-color-white);
border: 1px solid var(--ap29-color-gray-light);
color: var(--ap29-color-dark);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
font-weight: 700;
transition: background var(--ap29-transition),
color var(--ap29-transition),
border-color var(--ap29-transition);
}
.ap29-related-nav .swiper-button-prev { right: 52px; left: auto; }
.ap29-related-nav .swiper-button-next { right: 0; }
.ap29-related-nav .swiper-button-prev:hover,
.ap29-related-nav .swiper-button-next:hover {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
border-color: var(--ap29-color-pink);
}
@media (max-width: 900px) {
.ap29-product-gallery {
width: 100%;
padding-right: 0;
margin-bottom: 30px;
}
.ap29-product-summary {
width: 100%;
padding-left: 0;
}
.ap29-product-main-section { padding: 20px 0 50px; }
.product_title.entry-title { font-size: 24px; }
.ap29-product-tabs-section { padding: 20px 0 50px; }
/* 详情页描述Tabs（Description/Additional info）：同样不要横条，超了就换行 */
.woocommerce-tabs ul.tabs {
overflow-x: visible;
flex-wrap: wrap;
justify-content: center;
}
.woocommerce-tabs ul.tabs li { padding: 14px 20px; font-size: 13px; }
/* 数量选择 + 加购按钮：小屏全宽堆叠，拇指区更大（601-900px提前生效） */
form.cart {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
form.cart .quantity {
width: 100%;
justify-content: center;
}
form.cart .quantity input.input-text.qty {
flex: 1;
}
.single_add_to_cart_button {
width: 100%;
min-width: 0;
}
.ap29-related-section { padding: 10px 0 50px; }
.ap29-related-section .swiper-wrapper {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
}
@media (max-width: 600px) {
.ap29-product-main-section { padding: 15px 0 35px; }
.product_title.entry-title { font-size: 22px; }
form.cart {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
form.cart .quantity {
width: 100%;
justify-content: center;
}
form.cart .quantity input.input-text.qty {
flex: 1;
}
.single_add_to_cart_button {
width: 100%;
min-width: 0;
}
.flex-control-thumbs img { height: 64px; }
.woocommerce-tabs .panel { padding: 20px 0; }
.woocommerce-product-attributes th {
width: 40%;
font-size: 12px;
padding: 10px;
}
.woocommerce-product-attributes td {
font-size: 12px;
padding: 10px;
}
.ap29-related-section { padding: 10px 0 35px; }
.ap29-related-section h2 { font-size: 20px; margin-bottom: 20px; }
.ap29-related-section .swiper-wrapper {
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.ap29-related-nav .swiper-button-prev,
.ap29-related-nav .swiper-button-next {
display: none;
}
}
@media (max-width: 420px) {
.ap29-related-section .swiper-wrapper {
grid-template-columns: 1fr;
}
}
/* =========================================================
* 7. Footer -- #colophon.site-footer
* ========================================================= */
#colophon.site-footer {
width: 100%;
background: var(--ap29-color-dark);
color: var(--ap29-color-white);
margin-top: auto;
}
/* --- (7a) Footer Top (4 columns) --- */
.ap29-footer-top {
padding: 68px 0 38px;
border-bottom: 1px solid #2A2930;
}
.ap29-footer-top .elementor-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
margin: 0;
}
.ap29-footer-top .elementor-column {
padding: 0;
}
.ap29-footer-widget__title {
font-family: var(--ap29-font-head);
font-size: 14px;
font-weight: 700;
color: var(--ap29-color-white);
letter-spacing: 0.5px;
margin: 0 0 24px;
padding-bottom: 10px;
border-bottom: 1px solid #2A2930;
text-transform: uppercase;
line-height: 1.3;
}
/* --- Column 1: About --- */
.ap29-footer-about {
max-width: 320px;
}
.ap29-footer-about__logo {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ap29-font-head);
font-size: 20px;
font-weight: 700;
color: var(--ap29-color-pink);
margin-bottom: 16px;
line-height: 1;
}
.ap29-footer-about__logo .jet-logo__icon {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
width: 28px;
height: 28px;
font-size: 13px;
}
.ap29-footer-about__desc {
font-size: 12px;
line-height: 1.8;
color: var(--ap29-color-white);
opacity: 0.7;
margin: 0 0 20px;
}
.ap29-footer-social {
display: flex;
align-items: center;
gap: 14px;
margin-top: 6px;
}
.ap29-footer-social__link {
width: 34px;
height: 34px;
background: #2A2930;
color: var(--ap29-color-white);
opacity: 0.7;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
transition: background var(--ap29-transition),
color var(--ap29-transition),
opacity var(--ap29-transition),
transform var(--ap29-transition);
}
.ap29-footer-social__link:hover {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
opacity: 1;
transform: translateY(-2px);
}
.ap29-footer-social__link:active {
transform: translateY(0);
}
/* --- Columns 2-4: Link lists --- */
.ap29-footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.ap29-footer-list li {
margin: 10px 0;
}
.ap29-footer-list a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #817F8A;
line-height: 1.4;
transition: color var(--ap29-transition),
padding-left var(--ap29-transition);
}
.ap29-footer-list a::before {
content: '';
display: inline-block;
width: 4px;
height: 4px;
background: var(--ap29-color-pink);
border-radius: 50%;
opacity: 0;
transform: translateX(-6px);
transition: opacity var(--ap29-transition),
transform var(--ap29-transition);
flex-shrink: 0;
}
.ap29-footer-list a:hover {
color: var(--ap29-color-pink);
padding-left: 2px;
}
.ap29-footer-list a:hover::before {
opacity: 1;
transform: translateX(0);
}
/* --- Recent Posts (with thumbnails) --- */
.ap29-recent-posts {
list-style: none;
padding: 0;
margin: 0;
}
.ap29-recent-post {
display: flex;
gap: 12px;
margin: 14px 0;
transition: transform var(--ap29-transition);
}
.ap29-recent-post:hover {
transform: translateX(4px);
}
.ap29-recent-post__thumb {
width: 64px;
height: 64px;
flex-shrink: 0;
overflow: hidden;
background: #2A2930;
}
.ap29-recent-post__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.ap29-recent-post:hover .ap29-recent-post__thumb img {
transform: scale(1.1);
}
.ap29-recent-post__body {
flex: 1;
min-width: 0;
}
.ap29-recent-post__title {
font-family: var(--ap29-font-head);
font-size: 13px;
line-height: 1.4;
font-weight: 600;
margin: 0 0 4px;
color: var(--ap29-color-white);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ap29-recent-post__title a {
color: inherit;
}
.ap29-recent-post__title a:hover {
color: var(--ap29-color-pink);
}
.ap29-recent-post__date {
font-size: 11px;
color: #817F8A;
}
/* --- Footer Mini Subscribe (collections column fallback) --- */
.ap29-footer-subscribe .jet-subscribe-form {
max-width: 100%;
margin: 16px 0 0;
flex-direction: column;
gap: 10px;
border: none;
background: transparent;
}
.ap29-footer-subscribe .jet-subscribe-form__input {
width: 100%;
padding: 10px 14px;
background: #2A2930;
color: var(--ap29-color-white);
border: 1px solid #2A2930;
font-size: 12px;
}
.ap29-footer-subscribe .jet-subscribe-form__input:focus {
border-color: var(--ap29-color-pink);
background: #242328;
}
.ap29-footer-subscribe .jet-subscribe-form__input::placeholder {
color: #817F8A;
opacity: 0.8;
}
.ap29-footer-subscribe .jet-subscribe-form__submit {
width: 100%;
padding: 10px 14px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: background var(--ap29-transition);
}
.ap29-footer-subscribe .jet-subscribe-form__submit:hover {
background: var(--ap29-color-pink-deep);
}
/* --- (7b) Footer Bottom --- */
.ap29-footer-bottom {
padding: 24px 0;
border-top: 1px solid #2A2930;
}
.ap29-footer-bottom .elementor-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: center;
gap: 20px;
margin: 0;
}
.ap29-footer-bottom .elementor-column {
padding: 0;
display: flex;
align-items: center;
}
.ap29-footer-bottom .elementor-column:nth-child(1) { justify-content: flex-start; }
.ap29-footer-bottom .elementor-column:nth-child(2) { justify-content: center; }
.ap29-footer-bottom .elementor-column:nth-child(3) { justify-content: flex-end; }
.ap29-copyright {
font-size: 12px;
line-height: 1.6;
color: #817F8A;
margin: 0;
}
.ap29-copyright a {
color: var(--ap29-color-pink);
}
.ap29-copyright a:hover {
color: var(--ap29-color-pink-deep);
text-decoration: underline;
}
.ap29-footer-bottom-menu {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px;
}
.ap29-footer-bottom-menu a {
font-size: 12px;
color: #817F8A;
transition: color var(--ap29-transition);
}
.ap29-footer-bottom-menu a:hover {
color: var(--ap29-color-pink);
}
.ap29-payment-icons {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 10px;
}
.ap29-payment-icon {
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
padding: 2px 8px;
background: var(--ap29-color-white);
color: var(--ap29-color-dark);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
min-width: 42px;
opacity: 0.9;
transition: opacity var(--ap29-transition),
transform var(--ap29-transition);
}
.ap29-payment-icon:hover {
opacity: 1;
transform: translateY(-2px);
}
.ap29-payment-icon.is-visa { background: #1A1F71; color: #F7B600; }
.ap29-payment-icon.is-master { background: #FFF; color: #EB001B; border: 1px solid var(--ap29-color-gray-light); }
.ap29-payment-icon.is-paypal { background: #003087; color: #009CDE; }
.ap29-payment-icon.is-amex { background: #2E77BC; color: #FFF; }
.ap29-payment-icon.is-apple { background: #000; color: #FFF; border: 1px solid #333; }
@media (max-width: 1024px) {
.ap29-footer-top .elementor-row {
grid-template-columns: repeat(2, 1fr);
gap: 40px 30px;
}
}
@media (max-width: 900px) {
.ap29-footer-top { padding: 50px 0 30px; }
.ap29-footer-bottom .elementor-row {
grid-template-columns: 1fr;
gap: 16px;
text-align: center;
}
.ap29-footer-bottom .elementor-column {
justify-content: center !important;
}
.ap29-payment-icons { justify-content: center; }
}
@media (max-width: 600px) {
.ap29-footer-top { padding: 40px 0 24px; }
.ap29-footer-top .elementor-row {
grid-template-columns: 1fr;
gap: 32px;
}
.ap29-footer-bottom { padding: 20px 0; }
.ap29-footer-bottom-menu { justify-content: center; }
}
/* =========================================================
* 8. Misc 杂项
* ========================================================= */
/* --- (8a) Toast Notification --- */
.ap29-toast {
position: fixed;
bottom: 28px;
right: 28px;
z-index: 99999;
min-width: 280px;
max-width: 360px;
background: var(--ap29-color-dark);
color: var(--ap29-color-white);
padding: 14px 20px;
display: none;
align-items: center;
gap: 10px;
border-left: 3px solid var(--ap29-color-pink);
font-size: 13px;
line-height: 1.5;
box-shadow: 0 12px 30px rgba(46, 67, 114, 0.22);
animation: none;
border-radius: 0;
}
.ap29-toast.is-show,
.ap29-toast.show {
display: flex;
animation: ap29-toast-in 0.35s ease forwards;
}
@keyframes ap29-toast-in {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.ap29-toast.is-leaving {
animation: ap29-toast-out 0.3s ease forwards;
}
@keyframes ap29-toast-out {
to {
opacity: 0;
transform: translateX(40px);
}
}
.ap29-toast__icon {
flex-shrink: 0;
width: 26px;
height: 26px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
}
.ap29-toast.is-success .ap29-toast__icon { background: #4CAF50; }
.ap29-toast.is-error .ap29-toast__icon { background: #E53935; }
.ap29-toast.is-warning .ap29-toast__icon { background: #FF9800; }
.ap29-toast.is-info .ap29-toast__icon { background: var(--ap29-color-pink); }
.ap29-toast__body {
flex: 1;
min-width: 0;
}
.ap29-toast__title {
font-size: 13px;
font-weight: 700;
margin: 0 0 2px;
color: var(--ap29-color-white);
line-height: 1.3;
}
.ap29-toast__msg {
font-size: 12px;
color: var(--ap29-color-white);
opacity: 0.85;
margin: 0;
line-height: 1.5;
}
.ap29-toast__close {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
color: var(--ap29-color-white);
opacity: 0.6;
cursor: pointer;
border: none;
font-size: 16px;
font-weight: 700;
padding: 0;
transition: opacity var(--ap29-transition),
color var(--ap29-transition),
transform var(--ap29-transition);
flex-shrink: 0;
}
.ap29-toast__close:hover {
opacity: 1;
color: var(--ap29-color-pink);
transform: rotate(90deg);
}
/* --- (8b) Back to Top --- */
.ap29-back-to-top {
position: fixed;
bottom: 28px;
left: 28px;
width: 46px;
height: 46px;
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 9998;
opacity: 0;
visibility: hidden;
transform: translateY(16px);
transition: opacity var(--ap29-transition),
visibility var(--ap29-transition),
transform var(--ap29-transition),
background var(--ap29-transition);
border: none;
font-size: 18px;
font-weight: 700;
}
.ap29-back-to-top.is-show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ap29-back-to-top:hover {
background: var(--ap29-color-pink-deep);
transform: translateY(-3px);
}
.ap29-back-to-top:active {
background: #E55A84;
transform: translateY(0);
}
/* --- (8c) Scrollbar (webkit only, subtle) --- */
@media (min-width: 901px) {
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--ap29-color-gray-bg);
}
::-webkit-scrollbar-thumb {
background: var(--ap29-color-gray-light);
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
background: var(--ap29-color-pink);
}
}
/* --- (8d) Text selection --- */
::selection {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
}
::-moz-selection {
background: var(--ap29-color-pink);
color: var(--ap29-color-white);
}
/* --- (8e) Screen Reader / Utility --- */
.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.ap29-hidden {
display: none !important;
}
.ap29-visually-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.ap29-divider {
width: 60px;
height: 2px;
background: var(--ap29-color-pink);
margin: 18px auto;
display: block;
}
/* no uppercase for buttons / headings in body (enforce) */
body button,
body .elementor-button,
body h1, body h2, body h3, body h4, body h5, body h6,
body .jet-slider__title,
body .jet-banner__title,
body .jet-woo-product-title,
body .entry-title,
body .product_title {
text-transform: none;
}
/* --- (8f) Final responsive safety --- */
@media (max-width: 900px) {
body { font-size: 13.5px; }
}
@media (max-width: 480px) {
.ap29-toast {
left: 14px;
right: 14px;
bottom: 14px;
min-width: calc(100% - 28px);
max-width: calc(100% - 28px);
}
.ap29-back-to-top {
left: 14px;
bottom: 14px;
width: 42px;
height: 42px;
}
}
/* ============================================================
* Header + Footer 整洁化补丁 v26-cleanup
* 解决：col-33 垂直堆叠 / 内联style混乱 / heading下划线 / row缺失
* ============================================================ */
/* ---------- [A] Header 顶部栏 Topbar ---------- */
.ap29-topbar {
padding: 10px 0 !important;
background-color: var(--ap29-color-dark);
color: var(--ap29-color-white);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ap29-topbar .elementor-column.elementor-col-100 {
width: 100%;
}
.ap29-topbar-inner {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
width: 100%;
}
.ap29-topbar-item {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
letter-spacing: 0.3px;
color: rgba(255, 255, 255, 0.82);
font-family: var(--ap29-font-body);
text-transform: none;
}
.ap29-topbar-item i {
color: var(--ap29-color-pink);
font-size: 12px;
}
.ap29-topbar-dot {
width: 3px;
height: 3px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.25);
display: inline-block;
}
@media (max-width: 768px) {
.ap29-topbar-hide-mobile { display: none !important; }
.ap29-topbar-dot.ap29-topbar-hide-mobile { display: none !important; }
.ap29-topbar-inner { gap: 10px; }
}
/* ---------- [B] Header 主区 section (v26 统一语义：不要 nowrap / overflow / 固定百分比，避免横向滚动条) ---------- */
/* 说明：
* 1) 整个 header 三层（col-left / col-center / col-right）的容器全部 overflow:visible，
* 防止裁剪 dropdown 子菜单（经验 #835488）。
* 2) Logo/Icon 区用 auto 宽度吃最小必要空间；Nav 区 flex:1 吃剩余空间；
* 这样"很多目录"时就自然 wrap，不会出现横向滚动条。
* 3) 以下这块会与下方 T1-v2 里的 media query 形成闭环：
* - L4409-L4542 旧代码会被后续覆盖/失效，这里重写让它们不产生冲突。
*/
.ap29-header-section {
padding: 20px 0 !important;
background-color: var(--ap29-color-white);
border-bottom: 1px solid var(--ap29-color-gray-light);
position: sticky;
top: 0;
z-index: 100;
overflow: visible !important;
}
.ap29-header-section .elementor-container {
width: 100%;
overflow: visible !important;
}
.ap29-header-section .elementor-row--header {
display: flex;
flex-wrap: nowrap; /* 三列（Logo/Nav/Icon）始终在一行；内部 nav-list 才换行 */
align-items: center;
width: 100%;
margin: 0 calc(-1 * var(--ap29-gap) / 2);
gap: 0;
overflow: visible !important;
}
.ap29-header-section .elementor-row--header > .elementor-column {
padding: 0 calc(var(--ap29-gap) / 2);
position: relative;
min-height: 1px;
box-sizing: border-box;
}
/* 左 Logo：用自适应宽度，不再固定 20% */
.ap29-header-section .elementor-row--header > .elementor-col-33.ap29-col-left {
width: auto !important;
flex: 0 0 auto !important;
max-width: none !important;
padding-right: 14px;
overflow: visible !important;
}
.ap29-header-section .elementor-row--header > .ap29-col-left {
display: flex;
align-items: center;
}
/* 中 导航：弹性吃剩余空间；内部 wrap 换行；必须 overflow:visible 防止裁剪下拉 */
.ap29-header-section .elementor-row--header > .elementor-col-33.ap29-col-center {
width: auto !important;
flex: 1 1 auto !important;
max-width: none !important;
overflow: visible !important;
}
.ap29-header-section .elementor-row--header > .ap29-col-center {
display: flex;
align-items: center;
justify-content: center;
overflow: visible !important; /* 关键：取消旧版 overflow:hidden */
}
/* 右 按钮区：自适应宽度，不再固定 22% */
.ap29-header-section .elementor-row--header > .elementor-col-33.ap29-col-right {
width: auto !important;
flex: 0 0 auto !important;
max-width: none !important;
padding-left: 14px;
overflow: visible !important;
}
.ap29-header-section .elementor-row--header > .ap29-col-right {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
}
.elementor-widget-wrap {
display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center;
position: relative;
}
.ap29-col-center .elementor-widget-wrap {
justify-content: center;
overflow: visible !important;
}
.ap29-col-right .elementor-widget-wrap {
justify-content: flex-end;
gap: 14px;
width: auto;
overflow: visible !important;
}
/* 导航 menu：取消一切 nowrap / overflow，允许换行居中；两行之间 row-gap:4px 对齐整齐 */
.ap29-nav-list {
gap: 0 !important;
justify-content: center !important;
flex-wrap: wrap !important;
overflow: visible !important;
}
.ap29-nav-link {
padding: 10px 13px !important;
font-size: 13.5px !important;
white-space: nowrap;
}
.ap29-nav-item.current > .ap29-nav-link::after {
left: 13px !important;
right: 13px !important;
}
.ap29-col-center .ap29-nav {
width: 100%;
overflow: visible !important;
}
/* 旧的 ≤1400 / ≤1250 媒体查询废弃（会造成隐藏logo文字/固定col百分比冲突），
* 在 T1-v2（文件末尾）统一接管。 */
@media (max-width: 1400px) { /* 占位，不做任何事，避免继承旧行为 */ }
@media (max-width: 1250px) { /* 占位，不做任何事 */ }
/* ---------- [C] Header Logo ---------- */
.jet-logo__link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ap29-color-dark);
font-family: var(--ap29-font-head);
font-weight: 700;
font-size: 26px;
line-height: 1;
text-decoration: none;
transition: transform var(--ap29-transition);
text-transform: none;
}
.jet-logo__link:hover {
color: var(--ap29-color-dark);
transform: translateY(-1px);
}
.jet-logo__mark i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 8px;
background-color: var(--ap29-color-pink-soft);
color: var(--ap29-color-pink);
font-size: 18px;
}
.jet-logo__name {
letter-spacing: -0.3px;
}
/* ---------- [D] Header 主菜单 nav ---------- */
.ap29-nav {
width: 100%;
}
.ap29-nav-list {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.ap29-nav-item {
position: relative;
}
.ap29-nav-link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 13px;
font-size: 14px;
font-family: var(--ap29-font-body);
font-weight: 500;
color: var(--ap29-color-dark);
text-decoration: none;
transition: color var(--ap29-transition);
border-radius: 0;
text-transform: none;
position: relative;
}
.ap29-nav-link i {
font-size: 12px;
}
.ap29-nav-link:hover {
color: var(--ap29-color-pink);
}
.ap29-nav-item.current > .ap29-nav-link {
color: var(--ap29-color-pink);
}
.ap29-nav-item.current > .ap29-nav-link::after {
content: "";
position: absolute;
bottom: 0;
left: 13px;
right: 13px;
height: 2px;
background-color: var(--ap29-color-pink);
}
.ap29-nav-arrow {
display: inline-flex;
align-items: center;
margin-left: 3px;
}
.ap29-nav-arrow i {
font-size: 9px;
transition: transform var(--ap29-transition);
color: var(--ap29-color-gray);
}
.ap29-nav-item.has-children:hover > .ap29-nav-link .ap29-nav-arrow i {
transform: rotate(180deg);
color: var(--ap29-color-pink);
}
/* Dropdown 子菜单 */
.ap29-nav-item.has-children .ap29-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 220px;
background-color: var(--ap29-color-white);
border: 1px solid var(--ap29-color-gray-light);
padding: 16px 18px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all var(--ap29-transition);
z-index: 200;
}
.ap29-nav-item.has-children:hover .ap29-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ap29-dropdown-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 20px;
}
.ap29-dropdown-col h4 {
font-size: 13px;
font-family: var(--ap29-font-head);
font-weight: 600;
letter-spacing: 0.3px;
text-transform: none;
color: var(--ap29-color-dark);
margin: 0 0 10px 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--ap29-color-gray-light);
}
.ap29-dropdown-sub {
list-style: none;
padding: 0;
margin: 0;
}
.ap29-dropdown-sub li {
margin: 0;
}
.ap29-dropdown-sub li a {
display: block;
padding: 6px 0;
font-size: 13px;
color: var(--ap29-color-gray);
text-decoration: none;
transition: all var(--ap29-transition);
text-transform: none;
}
.ap29-dropdown-sub li a:hover {
color: var(--ap29-color-pink);
padding-left: 6px;
}
/* ---------- [E] Header 图标按钮（搜索/购物车/菜单） ---------- */
.ap29-icon-btn {
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background-color: transparent;
color: var(--ap29-color-dark);
border: 1px solid var(--ap29-color-gray-light);
cursor: pointer;
transition: all var(--ap29-transition);
position: relative;
font-size: 14px;
}
.ap29-icon-btn:hover {
background-color: var(--ap29-color-pink);
border-color: var(--ap29-color-pink);
color: var(--ap29-color-white);
}
.ap29-cart-btn {
position: relative;
}
.ap29-cart-count {
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background-color: var(--ap29-color-pink);
color: var(--ap29-color-white);
font-size: 10px;
font-weight: 600;
display: none;
align-items: center;
justify-content: center;
line-height: 1;
font-family: var(--ap29-font-body);
}
.ap29-cart-count.show {
display: inline-flex;
}
/* 搜索面板 */
.ap29-search-panel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(46, 67, 114, 0.92);
z-index: 10000;
display: none;
align-items: flex-start;
justify-content: center;
padding-top: 18vh;
}
.ap29-search-panel.open {
display: flex;
}
.ap29-search-form {
display: flex;
width: 100%;
max-width: 600px;
gap: 0;
position: relative;
}
.ap29-search-input {
flex: 1;
height: 58px;
padding: 0 22px;
background-color: var(--ap29-color-white);
border: 2px solid var(--ap29-color-gray-light);
border-right: none;
color: var(--ap29-color-dark);
font-size: 15px;
font-family: var(--ap29-font-body);
outline: none;
border-radius: 0;
}
.ap29-search-input:focus {
border-color: var(--ap29-color-pink);
}
.ap29-search-form .jet-search__submit {
width: 58px;
height: 58px;
background-color: var(--ap29-color-pink);
color: var(--ap29-color-white);
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background-color var(--ap29-transition);
}
.ap29-search-form .jet-search__submit:hover {
background-color: var(--ap29-color-pink-deep);
}
.ap29-search-close {
position: absolute;
top: -50px;
right: 0;
width: 40px;
height: 40px;
background-color: transparent;
border: 1px solid rgba(255, 255, 255, 0.25);
color: var(--ap29-color-white);
border-radius: 8px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ap29-search-close:hover {
background-color: var(--ap29-color-pink);
border-color: var(--ap29-color-pink);
}
.ap29-hide-desktop {
display: none !important;
}
/* ---------- [F] Header 响应式 (≤ 1024px 改两列，中列nav隐藏) ---------- */
@media (max-width: 1024px) {
.ap29-header-section .elementor-row--header > .elementor-col-33 {
width: 50%;
}
.ap29-header-section .elementor-row--header > .ap29-col-center {
display: none;
}
.ap29-header-section .elementor-row--header > .ap29-col-left {
width: 50%;
}
.ap29-header-section .elementor-row--header > .ap29-col-right {
width: 50%;
}
.ap29-hide-desktop {
display: inline-flex !important;
}
}
@media (max-width: 600px) {
.ap29-header-section {
padding: 14px 0 !important;
}
.jet-logo__link {
font-size: 20px;
}
.jet-logo__mark i {
width: 32px;
height: 32px;
font-size: 15px;
}
.ap29-icon-btn {
width: 36px;
height: 36px;
}
.ap29-col-right .elementor-widget-wrap {
gap: 8px;
}
}
/* ---------- [G] Mobile drawer (匹配header中实际类名) ---------- */
.ap29-mobile-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
z-index: 9998;
display: none;
}
.ap29-mobile-overlay.active {
display: block;
}
.ap29-mobile-section {
padding: 0 !important;
}
.ap29-mobile-drawer {
position: fixed;
top: 0;
left: 0;
width: 320px;
max-width: 85%;
height: 100vh;
background-color: var(--ap29-color-white);
z-index: 9999;
transform: translateX(-105%);
transition: transform 0.32s ease;
overflow-y: auto;
padding: 0;
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
}
.ap29-mobile-drawer.active {
transform: translateX(0);
}
.ap29-mobile-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 20px;
border-bottom: 1px solid var(--ap29-color-gray-light);
}
.ap29-mobile-brand {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--ap29-color-dark);
font-family: var(--ap29-font-head);
font-weight: 700;
font-size: 20px;
}
.ap29-mobile-brand i {
color: var(--ap29-color-pink);
font-size: 20px;
}
.ap29-mobile-close {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--ap29-color-gray-light);
border-radius: 6px;
background: transparent;
cursor: pointer;
color: var(--ap29-color-dark);
}
.ap29-mobile-close:hover {
background-color: var(--ap29-color-pink);
border-color: var(--ap29-color-pink);
color: #fff;
}
/* mobile search */
.ap29-mobile-search {
padding: 16px 20px;
border-bottom: 1px solid var(--ap29-color-gray-light);
}
.ap29-mobile-search-form {
display: flex;
align-items: center;
width: 100%;
position: relative;
gap: 0;
}
.ap29-mobile-search-form i {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--ap29-color-gray);
font-size: 13px;
pointer-events: none;
}
.ap29-mobile-search-form input[type="search"] {
flex: 1;
height: 42px;
padding: 0 14px 0 38px;
border: 1px solid var(--ap29-color-gray-light);
border-radius: 6px;
background-color: var(--ap29-color-white);
color: var(--ap29-color-dark);
font-size: 13px;
font-family: var(--ap29-font-body);
outline: none;
}
.ap29-mobile-search-form input[type="search"]:focus {
border-color: var(--ap29-color-pink);
}
/* mobile nav list */
.ap29-mobile-list {
list-style: none;
padding: 8px 0;
margin: 0;
}
.ap29-mobile-list li {
width: 100%;
border-bottom: 1px solid var(--ap29-color-gray-light);
}
.ap29-mobile-link,
.ap29-mobile-link-text {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 20px;
font-size: 14px;
color: var(--ap29-color-dark);
text-decoration: none;
font-weight: 500;
font-family: var(--ap29-font-body);
text-transform: none;
position: relative;
}
.ap29-mobile-link i,
.ap29-mobile-link-text i {
width: 18px;
color: var(--ap29-color-pink);
font-size: 13px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.ap29-mobile-link:hover,
.ap29-mobile-link-text:hover {
color: var(--ap29-color-pink);
background-color: var(--ap29-color-pink-soft);
}
/* mobile sub / parent / toggle */
.ap29-mobile-parent {
display: flex;
align-items: stretch;
width: 100%;
}
.ap29-mobile-parent .ap29-mobile-link-text {
flex: 1;
padding-right: 8px;
}
.ap29-mobile-toggle {
width: 40px;
min-width: 40px;
height: auto;
display: inline-flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: none;
border-left: 1px solid var(--ap29-color-gray-light);
cursor: pointer;
font-size: 10px;
color: var(--ap29-color-gray);
transition: all var(--ap29-transition);
}
.ap29-mobile-toggle i {
transition: transform var(--ap29-transition);
}
.ap29-mobile-toggle.open {
background-color: var(--ap29-color-pink);
color: #fff;
border-left-color: var(--ap29-color-pink);
}
.ap29-mobile-toggle.open i {
transform: rotate(180deg);
}
.ap29-mobile-sub {
list-style: none;
padding: 0 0 0 20px;
margin: 0;
background-color: var(--ap29-color-gray-bg);
display: none;
}
.ap29-mobile-sub.active {
display: block;
}
.ap29-mobile-sub li a {
display: block;
padding: 11px 20px 11px 0;
font-size: 13px;
color: var(--ap29-color-gray);
text-decoration: none;
border-bottom: 1px solid var(--ap29-color-gray-light);
text-transform: none;
font-family: var(--ap29-font-body);
}
.ap29-mobile-sub li a:hover {
color: var(--ap29-color-pink);
}
.ap29-mobile-cart-count {
margin-left: auto;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: 10px;
background-color: var(--ap29-color-pink);
color: #fff;
font-size: 11px;
font-weight: 600;
display: none;
align-items: center;
justify-content: center;
line-height: 1;
}
.ap29-mobile-cart-count.show {
display: inline-flex;
}
.ap29-mobile-promo {
display: flex;
align-items: center;
gap: 10px;
margin: 20px;
padding: 14px 16px;
background-color: var(--ap29-color-pink-soft);
color: var(--ap29-color-pink-deep);
border-radius: 8px;
font-size: 13px;
font-family: var(--ap29-font-body);
font-weight: 500;
line-height: 1.4;
}
.ap29-mobile-promo i {
font-size: 16px;
color: var(--ap29-color-pink);
flex-shrink: 0;
}
/* ============================================================
* Footer 整洁化样式 (全部无内联style 走CSS类)
* ============================================================ */
.ap29-footer {
background-color: var(--ap29-color-dark);
color: var(--ap29-color-white);
width: 100%;
}
/* ---------- [H] Footer Top 四列 Grid ---------- */
.ap29-footer-top {
padding: 72px 0 36px 0 !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ap29-footer-top-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
width: 100%;
margin: 0;
}
.ap29-footer-col {
padding: 0 !important;
width: auto !important;
min-width: 0;
}
.ap29-footer-col .elementor-widget-wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
width: 100%;
}
.ap29-footer-col .elementor-element {
width: 100%;
margin-bottom: 22px;
}
.ap29-footer-col .elementor-widget:last-child {
margin-bottom: 0;
}
/* Footer heading + 下划线伪元素 */
.ap29-footer-heading-widget {
margin-bottom: 24px !important;
}
.ap29-footer-heading {
color: var(--ap29-color-white);
font-size: 14px;
font-weight: 600;
font-family: var(--ap29-font-head);
letter-spacing: 1.2px;
text-transform: none;
margin: 0;
padding-bottom: 14px;
position: relative;
line-height: 1.2;
}
.ap29-footer-heading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 3px;
background-color: var(--ap29-color-pink);
border-radius: 0;
display: block;
}
/* Footer About列 Logo/About文字/社交 */
.ap29-footer-brand .jet-logo__link {
color: var(--ap29-color-white);
font-size: 24px;
margin-bottom: 16px;
display: inline-flex;
}
.ap29-footer-brand .jet-logo__link i {
color: var(--ap29-color-pink);
background-color: transparent;
width: auto;
height: auto;
font-size: 24px;
border-radius: 0;
}
.ap29-footer-about-text {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.7;
margin: 0;
font-family: var(--ap29-font-body);
}
.ap29-social-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 22px;
}
.ap29-social-row .elementor-social-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.08);
color: var(--ap29-color-white);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all var(--ap29-transition);
font-size: 14px;
}
.ap29-social-row .elementor-social-icon:hover {
background-color: var(--ap29-color-pink);
transform: translateY(-3px);
}
/* Footer 垂直链接列表 (PAGES / RECENT POSTS / COLLECTIONS) */
.ap29-footer-links {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.ap29-footer-links .jet-nav__item {
width: 100%;
margin: 0;
padding: 0;
}
.ap29-footer-links .jet-nav-link,
.ap29-footer-links .menu-item-link {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-family: var(--ap29-font-body);
text-decoration: none;
text-transform: none;
padding: 0;
transition: all var(--ap29-transition);
position: relative;
padding-left: 12px;
display: inline-block;
}
.ap29-footer-links .jet-nav-link::before,
.ap29-footer-links .menu-item-link::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--ap29-color-pink);
opacity: 0;
transition: all var(--ap29-transition);
}
.ap29-footer-links .jet-nav-link:hover,
.ap29-footer-links .menu-item-link:hover {
color: var(--ap29-color-pink);
padding-left: 18px;
}
.ap29-footer-links .jet-nav-link:hover::before,
.ap29-footer-links .menu-item-link:hover::before {
opacity: 1;
}
/* Footer Newsletter 表单 */
.ap29-footer-newsletter-text {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.7;
margin: 0 0 18px 0;
}
.ap29-footer-newsletter-form {
display: flex;
width: 100%;
gap: 0;
}
.ap29-footer-newsletter-form input[type="email"] {
flex: 1;
height: 44px;
padding: 0 16px;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.15);
border-right: none;
color: var(--ap29-color-white);
font-size: 13px;
font-family: var(--ap29-font-body);
outline: none;
border-radius: 0;
min-width: 0;
}
.ap29-footer-newsletter-form input[type="email"]::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.ap29-footer-newsletter-form input[type="email"]:focus {
border-color: var(--ap29-color-pink);
}
.ap29-footer-newsletter-form button[type="submit"] {
width: 48px;
height: 44px;
background-color: var(--ap29-color-pink);
color: var(--ap29-color-white);
border: 1px solid var(--ap29-color-pink);
cursor: pointer;
transition: background-color var(--ap29-transition);
font-size: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
flex-shrink: 0;
}
.ap29-footer-newsletter-form button[type="submit"]:hover {
background-color: var(--ap29-color-pink-deep);
border-color: var(--ap29-color-pink-deep);
}
.ap29-btn-success {
background-color: #4caf50 !important;
border-color: #4caf50 !important;
}
/* ---------- [I] Footer Bottom 三列 Copyright ---------- */
.ap29-footer-bottom {
padding: 22px 0 !important;
background-color: rgba(0, 0, 0, 0.18);
}
.ap29-footer-bottom-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 24px;
align-items: center;
width: 100%;
margin: 0;
}
.ap29-footer-bottom-col {
padding: 0 !important;
width: auto !important;
}
.ap29-footer-bottom-col .elementor-widget-wrap {
display: flex;
align-items: center;
width: 100%;
}
.ap29-footer-bottom-col:nth-child(1) .elementor-widget-wrap {
justify-content: flex-start;
}
.ap29-footer-bottom-col:nth-child(2) .elementor-widget-wrap {
justify-content: center;
}
.ap29-footer-bottom-col:nth-child(3) .elementor-widget-wrap {
justify-content: flex-end;
}
.ap29-footer-bottom-brand .jet-logo__link {
color: var(--ap29-color-white);
font-size: 18px;
}
.ap29-footer-bottom-brand .jet-logo__link i {
color: var(--ap29-color-pink);
font-size: 18px;
background: transparent;
width: auto;
height: auto;
border-radius: 0;
}
.ap29-copy-text p {
color: rgba(255, 255, 255, 0.6);
font-size: 13px;
margin: 0;
text-align: center;
font-family: var(--ap29-font-body);
}
.ap29-pay-row {
display: flex;
align-items: center;
gap: 14px;
}
.ap29-pay-label {
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
}
.ap29-pay-icons {
display: flex;
gap: 10px;
align-items: center;
}
.ap29-pay-icons i {
font-size: 30px;
color: rgba(255, 255, 255, 0.8);
transition: color var(--ap29-transition);
}
.ap29-pay-icons i:hover {
color: var(--ap29-color-pink);
}
/* ---------- [J] Footer 响应式 ---------- */
@media (max-width: 1100px) {
.ap29-footer-top-row {
grid-template-columns: repeat(2, 1fr);
gap: 40px 32px;
}
}
@media (max-width: 768px) {
.ap29-footer-top {
padding: 50px 0 10px 0 !important;
}
.ap29-footer-top-row {
grid-template-columns: 1fr;
gap: 40px;
}
.ap29-footer-bottom-row {
grid-template-columns: 1fr;
gap: 20px;
}
.ap29-footer-bottom-col .elementor-widget-wrap,
.ap29-footer-bottom-col:nth-child(1) .elementor-widget-wrap,
.ap29-footer-bottom-col:nth-child(2) .elementor-widget-wrap,
.ap29-footer-bottom-col:nth-child(3) .elementor-widget-wrap {
justify-content: center !important;
text-align: center;
}
.ap29-copy-text p {
text-align: center;
}
.ap29-pay-row {
justify-content: center;
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 480px) {
.ap29-footer-bottom {
padding: 18px 0 !important;
}
.ap29-footer-heading {
font-size: 13px;
}
}
/* ---------- [K] Toast 通知 ---------- */
.ap29-toast {
position: fixed;
bottom: 28px;
right: 28px;
background-color: var(--ap29-color-dark);
color: var(--ap29-color-white);
padding: 14px 20px;
border-radius: 4px;
display: none;
align-items: center;
gap: 12px;
z-index: 99999;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
border-left: 4px solid var(--ap29-color-pink);
min-width: 220px;
max-width: calc(100% - 56px);
box-sizing: border-box;
}
.ap29-toast.show {
opacity: 1 !important;
transform: translateY(0) !important;
display: flex !important;
}
.ap29-toast-icon {
color: var(--ap29-color-pink);
font-size: 18px;
flex-shrink: 0;
}
.ap29-toast-text {
font-size: 14px;
font-family: var(--ap29-font-body);
line-height: 1.4;
flex: 1;
}
@media (max-width: 600px) {
.ap29-toast {
bottom: 16px;
right: 16px;
left: 16px;
min-width: auto;
max-width: none;
}
}
/* =========================================================
* v26 - Banner & Slider 广告图修复（图片不存在时用渐变兜底 + 固定比例避免塌陷）
* ========================================================= */
/* --- Slider 类名对齐（模板用 sp-slide/jet-slider__item，之前只写了jet-slider__slide带空格） --- */
/* 关键：sp-slides 定高 + overflow:hidden，内部 slide 用 absolute 叠在一起，避免 JS 未加载时 3 张纵向堆叠 */
.ap29-slider-section .slider-pro.sp-horizontal {
position: relative;
width: 100%;
border-radius: 16px;
}
.ap29-slider-section .jet-slider__items.sp-slides {
position: relative;
width: 100%;
height: 500px; /* 固定视口高度 = 1 张 slide */
overflow: hidden;
border-radius: 16px;
}
.ap29-slider-section .sp-slide,
.ap29-slider-section .jet-slider__item {
position: absolute; /* 叠在一起，不再纵向堆叠 */
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
min-height: 0;
display: grid !important;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 40px;
padding: 50px 55px;
box-sizing: border-box;
background: linear-gradient(135deg, #FFE8EE 0%, #FFF6F4 55%, #FFFFFF 100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .6s ease, visibility .6s ease;
z-index: 0;
}
/* 默认显示第一张（兜底：JS 未加载时仍至少有 1 张可见） */
.ap29-slider-section .sp-slide:first-child,
.ap29-slider-section .jet-slider__item:first-child {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 1;
}
/* JS 切换激活态 */
.ap29-slider-section .sp-slide.is-active,
.ap29-slider-section .jet-slider__item.is-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
}
.ap29-slider-section .jet-slider__item-content {
max-width: 520px;
}
.ap29-slider-section .jet-slider__content-inner {
width: 100%;
}
.ap29-slider-section .jet-slider__item-image {
width: 100%;
aspect-ratio: 16 / 10;
min-height: 400px;
border-radius: 16px;
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #F6CBD5 0%, #FFF4D6 40%, #FFEFD6 100%);
}
.ap29-slider-section .jet-slider__item-image img {
width: 100% !important;
height: 100% !important;
max-width: 100%;
object-fit: cover;
display: block;
}
/* 图片加载失败时的渐变兜底（配合 onerror 加的 ap29-img-fallback 类） */
.ap29-img-fallback {
background: linear-gradient(135deg, rgba(255,194,60,0.85) 0%, rgba(253,203,110,0.75) 100%);
}
.ap29-img-fallback::before {
content: attr(data-title);
color: #fff;
font-family: var(--ap29-font-head);
font-size: 28px;
font-weight: 700;
letter-spacing: 1px;
text-shadow: 0 2px 8px rgba(0,0,0,0.15);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px;
}
/* --- Slider 控件：Dots + 左右箭头（纯 JS 注入） --- */
.ap29-slider-dots {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 20;
}
.ap29-slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: rgba(46, 67, 114, 0.25);
cursor: pointer;
padding: 0;
transition: background .3s, transform .3s, width .3s;
}
.ap29-slider-dot.active {
background: #FFC23C;
width: 28px;
border-radius: 5px;
}
.ap29-slider-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: #fff;
color: #2E4372;
font-size: 16px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(46, 67, 114, 0.12);
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
transition: background .25s, color .25s, transform .25s;
}
.ap29-slider-arrow:hover {
background: #FFC23C;
color: #fff;
}
.ap29-slider-arrow--prev { left: 18px; }
.ap29-slider-arrow--next { right: 18px; }
/* --- Banner 4个分类：统一 4:3 比例，图片不存在时也不会塌陷 --- */
.ap29-banner-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin: 0 0 24px;
}
.ap29-banner-row:last-child { margin-bottom: 0; }
.ap29-banner-row > .elementor-column.elementor-col-50 {
width: calc(50% - 12px);
padding: 0 !important;
}
.jet-banner__img-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
min-height: 220px;
overflow: hidden;
background: linear-gradient(135deg, #FFF4D6 0%, #FFF3E0 100%);
}
.jet-banner__img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
@media (max-width: 900px) {
.ap29-slider-section .jet-slider__items.sp-slides {
height: auto;
/* 移动端：768-900平板稍高，600px以下单独覆盖成更紧凑 */
min-height: 560px;
}
.ap29-slider-section .sp-slide,
.ap29-slider-section .jet-slider__item {
position: absolute;
grid-template-columns: 1fr;
padding: 30px 24px;
height: auto;
min-height: 560px;
gap: 24px;
}
.ap29-slider-section .jet-slider__item-image {
order: 1;
min-height: 240px;
aspect-ratio: 16 / 9;
}
.ap29-slider-section .jet-slider__item-content {
order: 2;
max-width: 100%;
text-align: center;
}
.ap29-slider-arrow {
width: 36px;
height: 36px;
font-size: 13px;
}
.ap29-slider-arrow--prev { left: 8px; }
.ap29-slider-arrow--next { right: 8px; }
.ap29-banner-row > .elementor-column.elementor-col-50 {
width: 100%;
}
.ap29-banner-row { gap: 16px; margin-bottom: 16px; }
.jet-banner__img-wrap { min-height: 200px; aspect-ratio: 16 / 9; }
}
/* =========================================================
* v26 - Round 3 fixes (nav crowding / detail layout+breadcrumbs / list sidebar-cat-only)
* ========================================================= */
/* ---- T1-v2: 导航条 超出允许换行（用户要求不要横向滚动条） ----
* 关键点：
* - 去掉 nowrap / overflow-x:auto（会让导航条出现横向滚动条 + 下拉子菜单被裁剪，经验#835488）
* - 恢复 wrap 换行，但给行间距、列间距整齐，避免"挤成一团"
* - 保留合理压缩比例（flex-basis / 字体 / padding），让 10~12 个目录也能排得好看
*/
.ap29-nav-list {
flex-wrap: wrap !important;
justify-content: center !important;
row-gap: 0 !important; /* 换行后的行间无垂直空白，配合item padding保持整齐 */
column-gap: 0 !important;
overflow: visible !important; /* 绝对不要给 overflow，否则下拉菜单被裁剪 */
padding-bottom: 0;
}
.ap29-nav-list::-webkit-scrollbar { display: none; }
/* 单个 nav item：保持最小的左右间距，换行后视觉是整齐的多列 */
.ap29-nav-item {
flex: 0 0 auto;
}
.ap29-nav-link {
padding: 9px 13px !important;
font-size: 14px !important;
white-space: nowrap;
min-width: 0;
line-height: 1.4;
}
.ap29-nav-link i {
font-size: 11px !important;
}
.ap29-nav-link .ap29-nav-arrow i { font-size: 8px !important; }
.ap29-nav-item.current > .ap29-nav-link::after {
left: 13px !important;
right: 13px !important;
}
.ap29-col-center,
.ap29-col-center .ap29-nav,
.ap29-header-section .elementor-row--header,
.ap29-header-section .elementor-container,
.ap29-header-section {
overflow: visible !important;
}
/* 保持导航区有最大的空间：Logo和Icon区给合理尺寸（不挤、但也不太贪空间） */
.ap29-header-section .elementor-row--header > .elementor-col-33.ap29-col-left {
flex: 0 0 auto !important;
max-width: none !important;
width: auto !important;
padding-right: 16px;
}
.ap29-header-section .elementor-row--header > .elementor-col-33.ap29-col-right {
flex: 0 0 auto !important;
max-width: none !important;
width: auto !important;
padding-left: 16px;
}
.ap29-header-section .elementor-row--header > .elementor-col-33.ap29-col-center {
flex: 1 1 auto !important;
max-width: none !important;
width: auto !important;
}
/* 桌面 ≤1280：略缩一点 */
@media (max-width: 1280px) {
.jet-logo__link { font-size: 22px !important; gap: 8px; }
.jet-logo__mark i { width: 34px !important; height: 34px !important; font-size: 16px !important; }
.ap29-icon-btn { width: 36px !important; height: 36px !important; font-size: 13px !important; }
.ap29-nav-link { padding: 9px 11px !important; font-size: 12.6px !important; }
.ap29-col-right .elementor-widget-wrap { gap: 12px !important; }
}
/* 桌面 ≤1100：再缩一点，换行后视觉仍是整齐的多行网格 */
@media (max-width: 1100px) {
.jet-logo__link { font-size: 20px !important; }
.ap29-icon-btn { width: 34px !important; height: 34px !important; font-size: 12.5px !important; }
.ap29-nav-link { padding: 8px 10px !important; font-size: 12px !important; letter-spacing: 0; }
}
/* 移动端：切换到mobile drawer（原已存在），保持桌面导航不显示 */
@media (max-width: 1023px) {
.ap29-col-center { display: none !important; }
.ap29-header-section .elementor-row--header > .elementor-col-33.ap29-col-left {
flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 calc(var(--ap29-gap, 20px) / 2);
}
.ap29-header-section .elementor-row--header > .elementor-col-33.ap29-col-right {
flex: 0 0 50% !important; max-width: 50% !important; width: 50% !important; padding: 0 calc(var(--ap29-gap, 20px) / 2);
}
.jet-logo__name { display: inline-block !important; }
}
/* ---- T2: 详情页 - 产品区域布局修复（用elementor-row包裹50/50） + 面包屑 ---- */
.ap29-product-main-section > .elementor-container {
display: block;
}
.ap29-product-main-section .elementor-container::after {
content: "";
display: table;
clear: both;
}
/* 用flex容器包裹gallery + summary两列，保证左右对齐不垂直堆叠 */
.ap29-product-main-section > .elementor-container::before { display: none; }
.ap29-product-main-section > .elementor-container {
display: flex !important;
flex-wrap: wrap;
align-items: flex-start;
width: 100%;
gap: 0;
box-sizing: border-box;
}
.ap29-product-main-section > .elementor-container > .elementor-column {
box-sizing: border-box;
padding: 0 calc(var(--ap29-gap, 20px) / 2);
min-height: 1px;
}
.ap29-product-gallery.elementor-col-50 {
width: 50% !important;
padding-right: 15px !important;
}
.ap29-product-summary.elementor-col-50 {
width: 50% !important;
padding-left: 15px !important;
}
@media (max-width: 900px) {
.ap29-product-gallery.elementor-col-50,
.ap29-product-summary.elementor-col-50 {
width: 100% !important;
padding: 0 !important;
}
.ap29-product-summary.elementor-col-50 { margin-top: 24px; }
}
/* 详情页 product-title/price/meta 行间距紧凑 */
.ap29-product-summary .product_title.entry-title { margin-bottom: 10px !important; }
.ap29-product-summary .woocommerce-product-rating { margin-bottom: 8px !important; }
.ap29-product-summary .price {
padding: 12px 0 !important;
margin: 8px 0 14px !important;
}
.ap29-product-summary .woocommerce-product-details__short-description {
margin-bottom: 10px;
}
/* =========================================================
* 8.a Product Page Hero (Breadcrumb) ap29-prod-hero
* ========================================================= */
.ap29-prod-hero {
position: relative;
padding: 48px 24px 44px;
background: linear-gradient(135deg, #2E4372 0%, #3A5690 55%, #466BA8 100%);
overflow: hidden;
border-bottom: 3px solid #FFC23C;
}
.ap29-prod-hero-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; }
.ap29-prod-hero-deco { position: absolute; z-index: 1; pointer-events: none; user-select: none; }
.ap29-prod-hero-wave { top: 0; left: -2%; opacity: 0.9; }
.ap29-prod-hero-orbit {
bottom: -34px; right: -14px; opacity: 1;
animation: ap29Spin 32s linear infinite;
}
.ap29-prod-breadcrumb {
display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0;
padding: 8px 18px;
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 194, 60, 0.32);
border-radius: 999px;
backdrop-filter: blur(6px);
font-size: 14.5px; margin-bottom: 20px; line-height: 1;
}
.ap29-prod-breadcrumb__item { display: inline-flex; align-items: center; color: #B8C4DC; }
.ap29-prod-breadcrumb__item a { color: #FFF4D6; text-decoration: none; transition: color 0.2s; padding: 3px 2px; border-radius: 4px; }
.ap29-prod-breadcrumb__item a:hover { color: #FFC23C; }
.ap29-prod-breadcrumb__item--home a { display: inline-flex; align-items: center; gap: 7px; color: #FFC23C; font-weight: 700; }
.ap29-prod-breadcrumb__item--home a:hover { color: #fff; }
.ap29-prod-breadcrumb__item--home a i { font-size: 12px; }
.ap29-prod-breadcrumb__sep { display: inline-flex; align-items: center; padding: 0 8px; color: #FFC23C; opacity: 0.8; font-size: 9px; }
.ap29-prod-breadcrumb__item--current { color: #fff; font-weight: 600; max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) {
.ap29-prod-hero { padding: 38px 18px 32px; }
.ap29-prod-hero-wave { display: none; }
.ap29-prod-hero-orbit { transform: scale(0.75); transform-origin: right bottom; bottom: -18px; right: -6px; }
.ap29-prod-breadcrumb { padding: 7px 14px; font-size: 11.5px; margin-bottom: 16px; }
.ap29-prod-breadcrumb__item--current { max-width: 220px; }
}
@media (max-width: 480px) {
.ap29-prod-hero-orbit { display: none; }
.ap29-prod-breadcrumb__item--home a span { display: none; }
.ap29-prod-breadcrumb__item--home a::after { content: "Home"; }
}
/* 详情页 面包屑（jet-breadcrumbs / ap29-breadcrumb 通用）*/
.ap29-product-breadcrumb {
margin-bottom: 18px;
font-size: 13px;
color: #666;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
font-family: var(--ap29-font-body);
}
.ap29-product-breadcrumb .jet-breadcrumbs__item--home a,
.ap29-product-breadcrumb a {
color: #666;
text-decoration: none;
transition: color 0.2s;
}
.ap29-product-breadcrumb a:hover { color: var(--ap29-color-pink); }
.ap29-product-breadcrumb .jet-breadcrumbs__separator,
.ap29-product-breadcrumb__sep {
color: #bbb;
font-size: 11px;
}
.ap29-product-breadcrumb .jet-breadcrumbs__item--current {
color: #222;
font-weight: 500;
}
/* ---- T3: 列表页 左边栏只保留分类目录：移除其它筛选器样式 + 参考模板20的hb20-cat-tree样式（前缀ap29-cat-tree） ---- */
.ap29-filter-side > .elementor-widget-wrap >
.ap29-filter-price,
.ap29-filter-side > .elementor-widget-wrap >
.ap29-filter-brands,
.ap29-filter-side > .elementor-widget-wrap >
.ap29-filter-colors,
.ap29-filter-side > .elementor-widget-wrap >
.ap29-filter-best,
.ap29-filter-side > .elementor-widget-wrap >
.ap29-filter-title-widget { display: none !important; }
/* 侧边栏仅保留分类widget：更紧凑的盒模型 */
.ap29-filter-side {
background: #fff;
border: 1px solid #eee;
border-radius: 14px;
padding: 18px 16px !important;
}
/* 把原"Category Filter"重写为hb20风格的树形结构：先隐藏checkbox-list旧结构的多余装饰 */
.ap29-filter-categories .jet-checkboxes-list__decorator,
.ap29-filter-categories .jet-checkboxes-list__input {
display: none !important;
}
.ap29-filter-categories .jet-checkboxes-list__row label {
padding: 0 !important;
align-items: center !important;
display: flex !important;
}
.ap29-filter-categories .jet-checkboxes-list__item {
width: 100%;
}
/* 参考模板20的分类树（.ap29-cat-tree 替代 jet-smart-filters 结构） */
.ap29-cat-tree {
list-style: none;
margin: 0;
padding: 0;
}
.ap29-cat-tree > li {
margin: 0;
padding: 0;
border-bottom: 1px solid #f0f0f0;
}
.ap29-cat-tree > li:last-child { border-bottom: none; }
.ap29-cat-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 4px;
gap: 8px;
}
.ap29-cat-row a {
flex: 1;
font-size: 14px;
font-family: var(--ap29-font-body);
font-weight: 500;
color: #222;
text-decoration: none;
transition: color 0.2s;
line-height: 1.4;
display: inline-flex;
align-items: center;
gap: 7px;
}
.ap29-cat-row a::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: #E0E0E0;
transition: all 0.2s;
flex-shrink: 0;
display: inline-block;
}
.ap29-cat-row a:hover { color: var(--ap29-color-pink); }
.ap29-cat-row a:hover::before {
background: var(--ap29-color-pink);
transform: scale(1.4);
}
.ap29-cat-row a.on,
.ap29-cat-item.active > .ap29-cat-row > a { color: var(--ap29-color-pink); font-weight: 600; }
.ap29-cat-row a.on::before,
.ap29-cat-item.active > .ap29-cat-row > a::before {
background: var(--ap29-color-pink);
transform: scale(1.4);
}
.ap29-cat-toggle {
background: transparent;
border: none;
color: #999;
cursor: pointer;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.2s;
flex-shrink: 0;
padding: 0;
}
.ap29-cat-toggle:hover {
background: var(--ap29-color-pink-soft);
color: var(--ap29-color-pink);
}
.ap29-cat-toggle i {
font-size: 10px;
transition: transform 0.2s;
}
.ap29-cat-toggle.open i { transform: rotate(180deg); }
/* 二级子分类 */
.ap29-cat-sub {
list-style: none;
padding: 2px 0 8px 14px;
margin: 0;
display: none;
}
.ap29-cat-sub.active { display: block; }
.ap29-cat-subitem {
border-bottom: none;
margin: 0;
}
.ap29-cat-subitem > .ap29-cat-row { padding: 6px 4px; }
.ap29-cat-subitem > .ap29-cat-row a {
font-size: 13px;
font-weight: 400;
color: #444;
}
.ap29-cat-subitem > .ap29-cat-row a::before {
width: 4px;
height: 4px;
}
.ap29-cat-subitem.active > .ap29-cat-row > a {
color: var(--ap29-color-pink);
font-weight: 600;
}
.ap29-cat-subitem.active > .ap29-cat-row > a::before {
background: var(--ap29-color-pink);
transform: scale(1.4);
}
/* 三级子分类 */
.ap29-cat-sub3 {
padding-left: 16px;
margin: 2px 0 4px;
}
.ap29-cat-sub3 li { padding: 4px 0; }
.ap29-cat-sub3 a {
font-size: 12.5px;
color: #555;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
line-height: 1.4;
}
.ap29-cat-sub3 a::before {
content: "›";
color: #ccc;
font-size: 14px;
display: inline-block;
transition: all 0.2s;
}
.ap29-cat-sub3 a:hover { color: var(--ap29-color-pink); }
.ap29-cat-sub3 a:hover::before { color: var(--ap29-color-pink); }
.ap29-cat-sub3 li.active a { color: var(--ap29-color-pink); font-weight: 600; }
.ap29-cat-sub3 li.active a::before { color: var(--ap29-color-pink); }
/* 侧边栏分类标题 */
.ap29-cat-side-title {
font-size: 16px;
font-family: var(--ap29-font-head);
font-weight: 700;
color: #2E4372;
margin: 0 0 14px;
padding: 0 4px 10px;
border-bottom: 2px solid var(--ap29-color-pink);
display: inline-flex;
align-items: center;
gap: 8px;
}
.ap29-cat-side-title i { color: var(--ap29-color-pink); font-size: 14px; }
/* 列表页主容器：保证左栏+右栏用flex */
.ap29-list-main-section .elementor-container {
gap: 0 !important;
}
.ap29-filter-side.elementor-col-25 { width: 25% !important; }
.ap29-products-col.elementor-col-75 { width: 75% !important; }
@media (max-width: 1024px) {
.ap29-filter-side.elementor-col-25,
.ap29-products-col.elementor-col-75 { width: 100% !important; padding: 0 !important; }
.ap29-filter-side.elementor-col-25 { margin-bottom: 20px; }
}
/* =========================================================
* v26 - Round 4 fixes (tabs切换 / 分类卡片粘连)
* ========================================================= */
/* ---- R4-T1: Tabs区块修复（3个面板同时显示=乱） ----
* 根因：非active面板未设置 display:none，且缺少点击切换JS
* 修复：①CSS隐藏非active面板；②兼容jet-tabs__control / jet-tabs__control-list两种类名；
* ③产品listing grid规范化间距；④产品卡片内容区padding一致
*/
/* 1) 面板显示控制：只有active-tab类的面板才显示，其它隐藏 */
.jet-tabs__content-item {
display: none;
animation: ap29TabFadeIn 0.3s ease both;
}
.jet-tabs__content-item.active-tab {
display: block;
}
@keyframes ap29TabFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* 2) 控件类名兼容：HTML里是 jet-tabs__control，旧CSS写的是 jet-tabs__control-list，两者都要生效 */
.jet-tabs__control {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0;
list-style: none;
padding: 0;
margin: 0 0 36px;
border-bottom: 1px solid var(--ap29-color-gray-light);
}
/* 3) 产品卡片内容区：统一padding，避免缩略图后内容"贴边" */
.jet-woo-products__item-content {
padding: 14px 4px 4px;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.jet-woo-product-categories {
font-size: 11px;
letter-spacing: 0.5px;
color: var(--ap29-color-gray);
margin: 0;
line-height: 1.4;
}
/* 4) 响应式：tab产品列表 移动端2列、平板3列、桌面4列（避免小屏过窄） */
@media (max-width: 768px) {
.jet-woo-products__listing { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
.jet-tabs__control-item { padding: 14px 18px; font-size: 13px; }
}
@media (max-width: 480px) {
.jet-woo-products__listing { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
.jet-tabs__control-item { padding: 12px 14px; font-size: 12px; }
}
/* ---- R4-T2: Shop by Age 分类卡片粘连修复 ----
* 根因：①.ap29-category-row多行之间无margin-bottom/gap；
* ②卡片无圆角/阴影/背景，视觉上"连成一片"；
* ③section-head与首行卡片距离太近（0间距）
*/
/* 1) 每行分类卡片之间的间距：桌面24px、移动端16px */
.ap29-categories-section .ap29-section-head {
margin-bottom: 40px !important;
}
.ap29-category-row {
display: flex !important;
flex-wrap: wrap !important;
gap: 24px !important;
margin-bottom: 24px !important;
}
.ap29-category-row:last-child {
margin-bottom: 0 !important;
}
/* 覆盖elementor-col-33默认padding，统一用row的gap控制间距，避免双重间距 */
.ap29-category-row > .elementor-col-33 {
width: calc((100% - 48px) / 3) !important;
padding: 0 !important;
}
/* 2) 卡片本身：圆角 + 轻阴影 + hover上浮，视觉分隔清晰 */
.ap29-category-banner.jet-banner {
position: relative;
display: block;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 14px rgba(46, 67, 114, 0.08);
transition: transform 0.35s ease,
box-shadow 0.35s ease;
background: var(--ap29-color-dark);
}
.ap29-category-banner.jet-banner:hover {
transform: translateY(-5px);
box-shadow: 0 12px 28px rgba(46, 67, 114, 0.15);
}
/* 3) 图片容器：固定比例（和jet-banner其它地方一致），加载失败用渐变兜底 */
.ap29-category-banner.jet-banner .jet-banner__img-wrap {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
min-height: 220px;
overflow: hidden;
background: linear-gradient(135deg, #FFF4D6 0%, #FFE38A 50%, #FFF3E0 100%);
}
.ap29-category-banner.jet-banner .jet-banner__img-wrap.is-img-failed::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, #FFC23C 0%, #4A90D9 100%);
z-index: 1;
}
.ap29-category-banner.jet-banner .jet-banner__img-wrap.is-img-failed::after {
content: "\f00b"; /* fa-th-large */
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 46px;
color: rgba(255,255,255,0.85);
z-index: 2;
}
.ap29-category-banner.jet-banner .jet-banner__img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
transition: transform 0.55s ease, opacity 0.4s ease;
display: block;
}
.ap29-category-banner.jet-banner:hover .jet-banner__img {
transform: scale(1.06);
opacity: 0.85;
}
/* 4) 分类标题内容：图标+名字+副标题排版整齐，不"贴边" */
.ap29-category-banner.jet-banner .jet-banner__content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 48px 24px 22px;
background: linear-gradient(to top, rgba(46,67,114,0.82) 0%, rgba(46,67,114,0.15) 70%, rgba(46,67,114,0) 100%);
z-index: 3;
pointer-events: none;
transition: background 0.35s ease;
}
.ap29-category-banner.jet-banner:hover .jet-banner__content {
background: linear-gradient(to top, rgba(255,194,60,0.92) 0%, rgba(255,194,60,0.15) 70%, rgba(255,194,60,0) 100%);
}
.ap29-category-banner.jet-banner .jet-banner__category-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: var(--ap29-color-pink);
color: #fff;
border-radius: 10px;
font-size: 15px;
margin-bottom: 10px;
box-shadow: 0 4px 10px rgba(255,194,60,0.4);
}
.ap29-category-banner.jet-banner .jet-banner__title {
font-family: var(--ap29-font-head);
font-size: 22px;
font-weight: 700;
color: #fff;
margin: 0 0 6px;
line-height: 1.25;
transition: color 0.35s ease;
}
.ap29-category-banner.jet-banner:hover .jet-banner__title {
color: var(--ap29-color-dark);
}
.ap29-category-banner.jet-banner .jet-banner__subtitle {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: #fff;
letter-spacing: 0.3px;
margin: 0;
opacity: 0.95;
pointer-events: auto;
}
.ap29-category-banner.jet-banner:hover .jet-banner__subtitle {
color: var(--ap29-color-dark);
transform: translateX(2px);
transition: transform 0.3s ease, color 0.3s ease;
}
/* 5) 分类卡片响应式：平板2列、移动端1列 */
@media (max-width: 900px) {
.ap29-category-row {
gap: 16px !important;
margin-bottom: 16px !important;
}
.ap29-category-row > .elementor-col-33 {
width: calc((100% - 16px) / 2) !important;
}
.ap29-categories-section .ap29-section-head { margin-bottom: 28px !important; }
.ap29-category-banner.jet-banner .jet-banner__content { padding: 40px 18px 18px; }
.ap29-category-banner.jet-banner .jet-banner__title { font-size: 19px; }
}
@media (max-width: 600px) {
.ap29-category-row > .elementor-col-33 {
width: 100% !important;
}
.ap29-category-banner.jet-banner .jet-banner__img-wrap { min-height: 200px; aspect-ratio: 16 / 9; }
.ap29-category-banner.jet-banner .jet-banner__title { font-size: 20px; }
}
/* =========================================================
* v26 - Round 5 fixes (删除Popular Brands / Footer社交图标字号太小)
* ========================================================= */
/* ---- R5-T1: Footer社交图标"显示有问题"修复 ----
* 根因：图标font-size仅14px（对比支付图标30px），容器背景仅rgba(255,255,255,0.08)几乎透明，
* 在深色footer上视觉上像几个小点，用户误以为"显示不出来"
* 修复：①容器 40→46；②字号 14→18；③背景加深 0.08→0.15；④gap 10→14；
* ⑤各品牌hover使用品牌色（蓝FB / 渐变IG / 黑白TikTok / 黑X），视觉辨识度高
*/
.ap29-social-row {
gap: 14px !important;
margin-top: 22px;
}
.ap29-social-row .elementor-grid-item {
flex-shrink: 0 !important; /* 经验1081364: 避免被flex父容器挤压 */
display: inline-block;
}
.ap29-social-row .elementor-social-icon {
width: 46px !important;
height: 46px !important;
font-size: 18px !important;
background-color: rgba(255, 255, 255, 0.15) !important;
color: #fff !important;
border-radius: 50% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
transition: background-color 0.3s ease,
transform 0.3s ease,
color 0.3s ease !important;
}
/* 品牌专属hover颜色 */
.ap29-social-row .elementor-social-icon.icon-facebook:hover {
background-color: #1877F2 !important; /* Facebook蓝 */
color: #fff !important;
transform: translateY(-3px);
}
.ap29-social-row .elementor-social-icon.icon-instagram:hover {
background: linear-gradient(45deg, #F09433 0%, #E6683C 25%, #DC2743 50%, #CC2366 75%, #BC1888 100%) !important;
color: #fff !important;
transform: translateY(-3px);
}
.ap29-social-row .elementor-social-icon.icon-tiktok:hover {
background-color: #000 !important; /* TikTok黑 */
color: #fff !important;
box-shadow: 2px -2px 0 #25F4EE, -2px 2px 0 #FE2C55 !important; /* 抖特效双阴影 */
transform: translateY(-3px);
}
.ap29-social-row .elementor-social-icon.icon-twitter:hover {
background-color: #000 !important; /* X 黑色 */
color: #fff !important;
transform: translateY(-3px);
}
/* 小屏适配：移动端图标略小但仍然清晰 */
@media (max-width: 600px) {
.ap29-social-row .elementor-social-icon {
width: 42px !important;
height: 42px !important;
font-size: 16px !important;
}
.ap29-social-row { gap: 10px !important; }
}
/* =========================================================
* v26 - Round 6 fixes (详情页删除短描述 + 图片灯箱)
* ========================================================= */
/* ---- R6-T1: 详情页产品图片 Lightbox 灯箱 ----
* 无第三方依赖，纯 JS 动态创建 DOM + 该段 CSS 控制样式
* 功能：点击主图/缩略图 → 全屏黑色背景 → 高清大图居中 → ← → 切换 → ESC/点背景关闭
* 同步更新页面上的主图和缩略图选中状态（双向联动）
*/
.ap29-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(18, 18, 22, 0.96);
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
animation: ap29LBFadeIn 0.25s ease both;
}
.ap29-lightbox.is-open {
display: flex;
}
@keyframes ap29LBFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 关闭按钮（右上角） */
.ap29-lightbox-close {
position: absolute;
top: 22px;
right: 22px;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
color: #fff;
border: none;
cursor: pointer;
font-size: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
transition: background 0.2s ease, transform 0.2s ease;
line-height: 1;
}
.ap29-lightbox-close:hover {
background: rgba(255,194,60,0.85); /* 品牌粉色 */
transform: scale(1.08);
}
/* 左右切换按钮 */
.ap29-lightbox-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.12);
color: #fff;
border: none;
cursor: pointer;
font-size: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 5;
transition: background 0.2s ease, transform 0.2s ease;
line-height: 1;
}
.ap29-lightbox-nav:hover {
background: rgba(255,194,60,0.85);
}
.ap29-lightbox-nav.ap29-lb-prev { left: 30px; }
.ap29-lightbox-nav.ap29-lb-next { right: 30px; }
.ap29-lightbox-nav:active { transform: translateY(-50%) scale(0.92); }
/* 大图容器 */
.ap29-lb-stage {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.ap29-lb-stage img {
max-width: 92vw;
max-height: 78vh;
width: auto;
height: auto;
object-fit: contain;
display: block;
border-radius: 10px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
user-select: none;
-webkit-user-drag: none;
}
/* 计数器（"2 / 6"） */
.ap29-lb-counter {
margin-top: 14px;
color: rgba(255,255,255,0.75);
font-size: 13px;
letter-spacing: 0.5px;
z-index: 2;
min-height: 20px;
}
/* 底部缩略图条（可横向滚动，桌面版） */
.ap29-lb-thumbs {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
max-width: 100%;
margin-top: 12px;
padding: 8px 10px 0;
z-index: 2;
}
.ap29-lb-thumb {
width: 58px;
height: 58px;
border-radius: 8px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
background: rgba(255,255,255,0.08);
flex-shrink: 0;
transition: all 0.2s ease;
opacity: 0.55;
}
.ap29-lb-thumb:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.ap29-lb-thumb.active {
border-color: #FFC23C; /* 品牌粉色 */
opacity: 1;
transform: translateY(-2px);
}
.ap29-lb-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
}
/* 移动端灯箱适配：按钮缩小、padding更小 */
@media (max-width: 768px) {
.ap29-lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 17px; }
.ap29-lightbox-nav { width: 44px; height: 44px; font-size: 16px; }
.ap29-lightbox-nav.ap29-lb-prev { left: 10px; }
.ap29-lightbox-nav.ap29-lb-next { right: 10px; }
.ap29-lb-stage img { max-width: 95vw; max-height: 68vh; }
.ap29-lb-thumb { width: 46px; height: 46px; }
}
@media (max-width: 480px) {
.ap29-lb-thumbs { gap: 6px; }
.ap29-lb-thumb { width: 40px; height: 40px; border-radius: 6px; }
}
/* =========================================================
* v26 - Round 7 fixes (移动端专项：详情页相关产品2列 / 列表页左栏隐藏 / 三页问题修复)
* ========================================================= */
/* ---- R7-T1: 详情页 手机端 相关产品(Related Products) 一行2个 ----
* 根因：swiper-wrapper的内联style写死了 repeat(4,1fr)，手机端4个卡太挤
* 修复：≤768px 强制改 grid-template-columns: repeat(2,1fr) + 缩小gap
* 作用域限定 ap29-related-carousel 下，不影响其它 swiper
*/
@media (max-width: 768px) {
.ap29-related-carousel .swiper-wrapper.jet-woo-products {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px !important;
}
/* 相关产品标题在小屏也略缩，避免太长换行尴尬 */
.ap29-related-heading .elementor-heading-title {
font-size: 22px !important;
}
.ap29-product-related-section {
padding: 30px 0 50px !important;
}
}
@media (max-width: 420px) {
.ap29-related-carousel .swiper-wrapper.jet-woo-products {
gap: 10px !important;
}
}
/* ---- R7-T2: 列表页 手机端 左侧分类目录彻底隐藏 ----
* 现有规则：≤1024px 左栏/右栏都是100%宽，左栏 mb=20px
* 用户要求手机端(≤768px)分类栏直接不显示，更干净专注产品列表
* 注意：右栏在≤1024px已是100%，这里只把左栏隐藏，同时右栏不受影响
*/
@media (max-width: 768px) {
.ap29-filter-side.elementor-col-25 {
display: none !important;
margin-bottom: 0 !important;
width: 0 !important;
}
.ap29-products-col.elementor-col-75 {
width: 100% !important;
padding: 0 !important;
}
}
/* ---- R7-T3: 三页手机端专项检查的补充优化 ----
* ① Slider ≤600px：高度再缩到400px（之前900px=560适合平板，小屏手机要更紧凑）
* ② Tabs control：≤768px按钮padding压缩（R4已有，这里再巩固无横条）
* ③ 详情页价格/标题字号在≤600px防溢出
* ④ add-to-cart按钮：≤768px 高度+到52px更适合拇指点击
*/
@media (max-width: 600px) {
.ap29-slider-section { padding: 18px 0 30px !important; }
.ap29-slider-section .jet-slider__items.sp-slides {
min-height: 400px;
}
.ap29-slider-section .sp-slide,
.ap29-slider-section .jet-slider__item {
min-height: 400px;
padding: 22px 18px;
gap: 16px;
}
.ap29-slider-section .jet-slider__item-image {
min-height: 160px;
}
/* 详情页按钮拇指区加大 */
.single_add_to_cart_button {
height: 52px;
font-size: 15px;
}
form.cart .quantity input.input-text.qty {
height: 52px;
}
/* 防止长标题撑破详情页summary */
.product_title.entry-title {
font-size: 20px !important;
line-height: 1.35 !important;
word-break: break-word;
}
}
/* ---- R8: 产品标题全部显示，不要 ... 省略 ----
* 命中场景：
* 1. 详情页主产品标题 () —— 原本被 .entry-title 全局规则 (L2124) 限2行省略，
* 因为该元素同时带 product_title + entry-title 两个类，被通用 .entry-title 的 line-clamp 误中。
* 2. 列表页/首页Tabs/Featured/Hot/详情页相关产品的卡片标题 () ——
* 确保无论任何祖先层或继承影响，产品标题一律自然换行完整显示，不截断、不加省略号。
* 3. 注意：文章/Blog 卡片的 .entry-title 仍然保留 2 行省略（不改动 L2124）。
*/
.product_title.entry-title {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
white-space: normal !important;
text-overflow: clip !important;
}
.jet-woo-product-title,
.jet-woo-product-title a {
display: block !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: unset !important;
overflow: visible !important;
white-space: normal !important;
text-overflow: clip !important;
/* 长单词或SKU不撑破卡片 */
word-break: break-word !important;
word-wrap: break-word !important;
/* 不要固定高度，自然撑高信息区 */
height: auto !important;
max-height: none !important;
}
/* 详情页相关产品的内联 style（L764 中 inline font-size/line-height/margin）不应再限高，
* 上面已经显式 height:auto，这里再强制 card 信息区 flex 自然增长，不压标题 */
.ap29-related-carousel .jet-woo-product-info {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
/* =========================================================
* R9: 详情页缩略图横排列 + 左右滚动箭头
* HTML 结构：
* .ap29-thumbs-wrap —— 容器（relative，用来定位左右按钮）
* .ap29-thumbs-prev / .ap29-thumbs-next —— 左/右按钮
* .ap29-thumbs-list (ol) —— 横排列，overflow-x 横向滚动，隐藏滚动条
* 功能：
* - flex-wrap:nowrap 横向排列
* - 滚动条用 scrollbar-width:none / -webkit-scrollbar 隐藏
* - 左右箭头圆形浮在缩略图条两侧，到达边界变半透明并禁用
* - 鼠标滚轮在条上滚动时 → 横向滚动
* ========================================================= */
.ap29-thumbs-wrap {
position: relative;
margin-top: 14px;
}
.ap29-thumbs-scroll {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: #222;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
line-height: 1;
cursor: pointer;
padding: 0;
transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.ap29-thumbs-scroll:hover {
background: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.ap29-thumbs-scroll:focus {
outline: none;
}
.ap29-thumbs-prev {
left: -10px;
}
.ap29-thumbs-next {
right: -10px;
}
/* 滚动容器本身隐藏滚动条（与内联 style 互补） */
.ap29-thumbs-list {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-behavior: smooth !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.ap29-thumbs-list::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* 手机端（≤768px）：箭头略缩小并贴边 */
@media screen and (max-width: 768px) {
.ap29-thumbs-scroll {
width: 30px;
height: 30px;
font-size: 12px;
}
.ap29-thumbs-prev {
left: -6px;
}
.ap29-thumbs-next {
right: -6px;
}
}
/* =========================================================
* End of frontend-shopify29.css (+ cleanup v26)
* ========================================================= */