.pp-shop-hero {
background: #ffffff;
border-bottom: 1px solid var(--color-border, #e2e8f0);
padding: 28px 0 24px;
margin-bottom: 32px;
}
.pp-shop-hero-container {
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
}
.pp-shop-hero-inner {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-top: 12px;
}
.pp-shop-hero-eyebrow {
display: block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-primary, #059669);
margin-bottom: 4px;
}
.pp-cat-stats {
display: flex;
align-items: center;
gap: 16px;
margin-top: 16px;
}
.pp-cat-stat {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: #64748b;
}
.pp-cat-stat svg {
color: #94a3b8;
}
.pp-shop-hero-title {
font-family: var(--font-heading, 'Manrope', sans-serif);
font-size: clamp(26px, 3vw, 36px);
font-weight: 800;
color: var(--color-dark, #0f172a);
margin: 0 0 16px;
line-height: 1.15;
letter-spacing: -0.02em;
}
.pp-cat-desc {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 15px;
line-height: 1.75;
color: #475569;
}
.pp-cat-desc--collapsible {
max-height: 78px;
overflow: hidden;
transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-cat-desc--collapsible.pp-cat-expanded {
max-height: 2000px;
}
.pp-cat-desc-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 8px;
background: none;
border: none;
padding: 0;
cursor: pointer;
font-size: 13px;
font-weight: 700;
color: var(--color-primary, #059669);
} .pp-shop-main-container {
max-width: 1440px;
margin: 0 auto;
padding: 0 15px;
}
.pp-shop-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.pp-sidebar-sticky {
background: #fff;
border: 1px solid #f1f5f9;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
}
@media (min-width: 850px) {
.pp-sidebar-sticky {
position: sticky;
top: 100px;
max-height: calc(100dvh - 120px);
overflow-y: auto;
overscroll-behavior: contain;
}
} .pp-filter-group {
border-bottom: 1px solid #f1f5f9;
}
.pp-filter-group:last-child {
border-bottom: none;
}
.pp-filter-group-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
cursor: pointer;
user-select: none;
}
.pp-filter-group-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: #1e293b;
margin: 0;
}
.pp-checkbox-label {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: 8px;
cursor: pointer;
transition: background 0.15s;
}
.pp-checkbox-label:hover {
background: #f8fafc;
}
.pp-checkbox-custom {
width: 16px;
height: 16px;
border: 1.5px solid #cbd5e1;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
}
.pp-checkbox-label input:checked~.pp-checkbox-custom {
background: var(--pp-primary, #059669);
border-color: var(--pp-primary, #059669);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-size: 10px;
background-repeat: no-repeat;
background-position: center;
} .pp-filter-swatch-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
gap: 8px;
padding: 8px 0;
}
.flex-swatch {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px 6px 6px;
border-radius: 99px;
background: #f8fafc;
border: 1px solid #e2e8f0;
cursor: pointer;
transition: all 0.2s ease;
}
.flex-swatch:has(input:checked) {
background: #fff;
border-color: #10b981;
box-shadow: 0 2px 12px rgba(16, 185, 129, 0.15);
}
.pp-swatch-visual {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.flex-swatch:has(input:checked) .pp-swatch-visual {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #10b981;
} .pp-shop-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 14px;
padding: 12px 16px;
margin-bottom: 24px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
} .pp-active-filters-wrapper {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 20px;
align-items: center;
}
.pp-active-filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 100px;
text-decoration: none;
font-size: 11px;
font-weight: 700;
color: #475569;
}
.pp-active-filter-chip:hover {
background: #fef2f2;
border-color: #fca5a5;
color: #dc2626;
} .pp-products-grid-loading::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(2px);
z-index: 10;
}
#pp-ajax-spinner {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
background: #fff;
padding: 20px 28px;
border-radius: 16px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12);
align-items: center;
gap: 12px;
}
#pp-ajax-spinner.is-visible {
display: flex;
}
.pp-spinner-ring {
width: 24px;
height: 24px;
border: 3px solid #e2e8f0;
border-top-color: var(--color-primary);
border-radius: 50%;
animation: ppSpin 0.7s linear infinite;
}
@keyframes ppSpin {
to {
transform: rotate(360deg);
}
} .pp-skeleton-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.pp-skeleton-card {
background: #fff;
border-radius: 12px;
flex: 1 1 calc(25% - 20px);
min-width: 200px;
aspect-ratio: 3/4;
animation: ppPulse 1.5s infinite;
}
@keyframes ppPulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
} .woocommerce-pagination ul {
display: flex;
justify-content: center;
gap: 8px;
border: none !important;
}
.woocommerce-pagination ul li {
border: none !important;
}
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
font-weight: 700;
color: #64748b;
border: 1px solid #e2e8f0;
}
.woocommerce-pagination ul li span.current {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
} @media (max-width: 849px) {
#pp-shop-sidebar {
position: fixed;
left: 0;
top: 0;
width: 85%;
max-width: 320px;
height: 100dvh;
background: #fff;
z-index: 1000;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
#pp-shop-sidebar.pp-drawer-open {
transform: translateX(0);
}
} .pp-std-qty-wrapper {
display: flex;
align-items: center;
border: 2px solid #e5e7eb;
border-radius: 12px;
height: 50px;
width: 140px;
}
.pp-qty-btn {
width: 40px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: #f9fafb;
cursor: pointer;
}
.pp-std-qty-wrapper input {
flex: 1;
border: none;
text-align: center;
font-weight: bold;
} .shop-page-title,
.page-title-inner,
.woocommerce-products-header {
display: none !important;
}  .pp-category-top-content,
.pp-category-bottom-content {
color: var(--color-dark, #0f172a);
font-family: var(--font-body, 'Inter', system-ui, -apple-system, sans-serif);
font-size: 16px;
line-height: 1.7;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.pp-category-top-content :where(*),
.pp-category-bottom-content :where(*) {
box-sizing: border-box;
} .pp-category-top-content {
margin: 0 0 40px;
padding: 28px 32px;
background: var(--color-bg-main, #ffffff);
border-radius: var(--radius-precision, 12px);
box-shadow: var(--shadow-soft, 0 10px 40px rgba(0, 0, 0, 0.04));
overflow: hidden;
display: flow-root;
transition: box-shadow 0.3s ease;
}
.pp-category-top-content:hover {
box-shadow: var(--shadow-luxury, 0 20px 40px -12px rgba(15, 23, 42, 0.1));
} .pp-category-top-content figure.content-image {
max-width: 220px !important;
width: 220px;
float: left;
margin: 0 28px 16px 0;
line-height: 0;
border-radius: var(--radius-precision, 12px);
overflow: hidden;
box-shadow: var(--shadow-soft, 0 10px 40px rgba(0, 0, 0, 0.04));
}
.pp-category-top-content figure.content-image picture,
.pp-category-top-content figure.content-image img {
display: block;
width: 100% !important;
height: auto !important;
max-width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.pp-category-top-content figure.content-image figcaption { display: none; } .pp-category-top-content p,
.pp-category-top-content p.lead {
font-size: 16.5px;
line-height: 1.7;
color: var(--color-dark-muted, #1e293b);
margin: 0 0 14px;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
text-justify: inter-word;
word-spacing: 0.01em;
}
.pp-category-top-content p:last-child { margin-bottom: 0; }
.pp-category-top-content strong { color: var(--color-dark, #0f172a); font-weight: 600; } .pp-category-top-content a {
color: var(--color-primary, #059669);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgba(5, 150, 105, 0.3);
text-underline-offset: 3px;
transition: color 0.15s, text-decoration-color 0.15s;
}
.pp-category-top-content a:hover {
color: var(--color-primary-hover, #047857);
text-decoration-color: var(--color-primary, #059669);
} @media (max-width: 640px) {
.pp-category-top-content {
padding: 20px 18px;
margin-bottom: 28px;
}
.pp-category-top-content figure.content-image {
max-width: 100% !important;
width: 100%;
float: none;
margin: 0 0 16px;
}
.pp-category-top-content p,
.pp-category-top-content p.lead {
font-size: 15.5px;
text-align: left;
hyphens: none;
}
} .pp-category-bottom-content {
margin: 64px auto 48px;
padding: 48px 0 0;
max-width: 1180px;
border-top: 1px solid var(--color-border, #e2e8f0);
} .pp-category-bottom-content :where(h2, h3, p, ul, ol, details) {
max-width: 820px;
margin-left: auto;
margin-right: auto;
} .pp-category-bottom-content :where(figure, table, aside.cta-box) {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
} .pp-category-bottom-content h2 {
font-family: var(--font-heading, 'Manrope', sans-serif);
font-size: 28px;
line-height: 1.25;
margin: 64px auto 20px;
padding-bottom: 14px;
font-weight: 700;
color: var(--color-dark, #0f172a);
letter-spacing: -0.015em;
border-bottom: 2px solid var(--color-primary-light, #ecfdf5);
position: relative;
}
.pp-category-bottom-content h2:first-child { margin-top: 0; }
.pp-category-bottom-content h2::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: var(--color-primary, #059669);
}
.pp-category-bottom-content h3 {
font-family: var(--font-heading, 'Manrope', sans-serif);
font-size: 19px;
line-height: 1.4;
margin: 36px auto 12px;
font-weight: 600;
color: var(--color-dark, #0f172a);
letter-spacing: -0.005em;
} .pp-category-bottom-content p {
margin: 0 auto 18px;
text-align: justify;
hyphens: auto;
-webkit-hyphens: auto;
text-justify: inter-word;
color: var(--color-dark-muted, #1e293b);
word-spacing: 0.01em;
}
.pp-category-bottom-content strong {
font-weight: 600;
color: var(--color-dark, #0f172a);
}
.pp-category-bottom-content em {
font-style: italic;
color: var(--color-dark-muted, #1e293b);
} .pp-category-bottom-content a:not(.button):not([class*="btn"]) {
color: var(--color-primary, #059669);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgba(5, 150, 105, 0.3);
text-underline-offset: 3px;
transition: color 0.15s, text-decoration-color 0.15s;
}
.pp-category-bottom-content a:not(.button):not([class*="btn"]):hover {
color: var(--color-primary-hover, #047857);
text-decoration-color: var(--color-primary, #059669);
} .pp-category-bottom-content ul,
.pp-category-bottom-content ol {
margin: 0 auto 22px;
padding-left: 28px;
color: var(--color-dark-muted, #1e293b);
}
.pp-category-bottom-content ul li,
.pp-category-bottom-content ol li {
margin: 0 0 8px;
line-height: 1.7;
}
.pp-category-bottom-content ul li::marker { color: var(--color-primary, #059669); } .pp-category-bottom-content figure.content-image {
margin: 36px auto 40px;
line-height: 0;
text-align: center;
}
.pp-category-bottom-content figure.content-image picture,
.pp-category-bottom-content figure.content-image img {
display: inline-block;
max-width: min(800px, 100%);
height: auto;
border-radius: var(--radius-luxury, 24px);
box-shadow: var(--shadow-luxury, 0 20px 40px -12px rgba(15, 23, 42, 0.1));
}
.pp-category-bottom-content figure.content-image figcaption {
display: block;
font-size: 14px;
line-height: 1.55;
color: var(--color-text-muted, #94a3b8);
margin-top: 14px;
font-style: italic;
padding: 0 16px;
} .pp-category-bottom-content table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 28px auto 40px;
font-size: 15px;
background: var(--color-bg-main, #ffffff);
border-radius: var(--radius-precision, 12px);
overflow: hidden;
box-shadow: var(--shadow-soft, 0 10px 40px rgba(0, 0, 0, 0.04));
border: 1px solid var(--color-border, #e2e8f0);
}
.pp-category-bottom-content table caption {
font-size: 13px;
color: var(--color-text-muted, #94a3b8);
padding: 0 0 14px;
caption-side: top;
text-align: left;
font-style: italic;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pp-category-bottom-content table thead th {
background: var(--color-primary, #059669);
color: #ffffff;
font-family: var(--font-heading, 'Manrope', sans-serif);
font-weight: 600;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 16px 20px;
text-align: left;
border-bottom: none;
}
.pp-category-bottom-content table tbody td {
padding: 14px 20px;
border-bottom: 1px solid var(--color-border, #e2e8f0);
vertical-align: middle;
color: var(--color-dark-muted, #1e293b);
text-align: left;
line-height: 1.55;
}
.pp-category-bottom-content table tbody tr:nth-child(even) td {
background: var(--color-bg-alt, #f8fafc);
}
.pp-category-bottom-content table tbody tr:last-child td { border-bottom: none; }
.pp-category-bottom-content table tbody tr:hover td {
background: var(--color-primary-light, #ecfdf5);
}
.pp-category-bottom-content table tbody td:first-child {
font-weight: 600;
color: var(--color-dark, #0f172a);
}
@media (max-width: 768px) {
.pp-category-bottom-content table {
font-size: 13px;
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pp-category-bottom-content table th,
.pp-category-bottom-content table td { padding: 11px 13px; }
} .pp-category-bottom-content details.faq-item,
.pp-category-bottom-content details {
margin: 0 auto 14px;
padding: 20px 28px;
background: var(--color-bg-alt, #f8fafc);
border: 1px solid transparent;
border-radius: var(--radius-precision, 12px);
transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.pp-category-bottom-content details:hover {
background: var(--color-bg-main, #ffffff);
border-color: var(--color-border, #e2e8f0);
box-shadow: var(--shadow-soft, 0 10px 40px rgba(0, 0, 0, 0.04));
}
.pp-category-bottom-content details[open] {
background: var(--color-bg-main, #ffffff);
border-color: var(--color-border, #e2e8f0);
box-shadow: var(--shadow-luxury, 0 20px 40px -12px rgba(15, 23, 42, 0.1));
}
.pp-category-bottom-content details summary {
cursor: pointer;
font-weight: 600;
color: var(--color-dark, #0f172a);
list-style: none;
position: relative;
padding-right: 44px;
user-select: none;
font-size: 16.5px;
line-height: 1.5;
font-family: var(--font-heading, 'Manrope', sans-serif);
}
.pp-category-bottom-content details summary::-webkit-details-marker,
.pp-category-bottom-content details summary::marker { display: none; content: ""; }
.pp-category-bottom-content details summary::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
background: var(--color-bg-main, #ffffff);
border: 1.5px solid var(--color-border, #e2e8f0);
border-radius: 50%;
transition: all 0.25s;
}
.pp-category-bottom-content details summary::before {
content: "+";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
line-height: 30px;
font-size: 20px;
font-weight: 400;
text-align: center;
color: var(--color-primary, #059669);
z-index: 1;
transition: all 0.25s;
}
.pp-category-bottom-content details[open] summary::after {
background: var(--color-primary, #059669);
border-color: var(--color-primary, #059669);
}
.pp-category-bottom-content details[open] summary::before {
content: "−";
color: #ffffff;
}
.pp-category-bottom-content details p {
margin: 16px 0 0;
color: var(--color-text-body, #64748b);
font-size: 15.5px;
line-height: 1.75;
text-align: justify;
hyphens: auto;
}
@media (max-width: 540px) {
.pp-category-bottom-content details { padding: 16px 20px; }
.pp-category-bottom-content details summary { font-size: 15.5px; padding-right: 40px; }
.pp-category-bottom-content details p { font-size: 15px; text-align: left; hyphens: none; }
} .pp-category-bottom-content aside.cta-box {
background: linear-gradient(135deg, var(--color-primary, #059669) 0%, var(--color-primary-hover, #047857) 100%);
color: #ffffff;
padding: 36px 40px;
border-radius: var(--radius-luxury, 24px);
margin: 56px auto;
text-align: center;
box-shadow: 0 12px 40px -8px rgba(5, 150, 105, 0.4);
position: relative;
overflow: hidden;
}
.pp-category-bottom-content aside.cta-box::before {
content: "";
position: absolute;
top: -60%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 65%);
pointer-events: none;
}
.pp-category-bottom-content aside.cta-box p {
margin: 0;
color: inherit;
font-size: 18px;
line-height: 1.6;
max-width: 700px;
margin-left: auto;
margin-right: auto;
text-align: center;
position: relative;
z-index: 1;
}
.pp-category-bottom-content aside.cta-box a {
color: #ffffff !important;
font-weight: 700;
text-decoration: none;
border-bottom: 2px solid rgba(255, 255, 255, 0.4);
padding-bottom: 1px;
transition: border-color 0.15s;
}
.pp-category-bottom-content aside.cta-box a:hover {
border-bottom-color: #ffffff;
}
.pp-category-bottom-content aside.cta-box strong {
color: #ffffff;
}
@media (max-width: 640px) {
.pp-category-bottom-content aside.cta-box { padding: 28px 22px; margin: 40px auto; }
.pp-category-bottom-content aside.cta-box p { font-size: 16px; }
} .pp-comparison-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin: 28px auto 36px;
max-width: 1100px;
}
.pp-comparison-card {
background: var(--color-bg-main, #ffffff);
border-radius: var(--radius-precision, 12px);
box-shadow: var(--shadow-soft, 0 10px 40px rgba(0, 0, 0, 0.04));
padding: 24px 22px;
transition: box-shadow 0.25s, transform 0.25s;
text-align: left;
border: 1px solid var(--color-border, #e2e8f0);
}
.pp-comparison-card:hover {
box-shadow: var(--shadow-luxury, 0 20px 40px -12px rgba(15, 23, 42, 0.1));
transform: translateY(-2px);
border-color: var(--color-primary, #059669);
}
.pp-comparison-card-header {
font-family: var(--font-heading, 'Manrope', sans-serif);
font-size: 14px;
font-weight: 700;
color: var(--color-primary, #059669);
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0 0 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-primary-light, #ecfdf5);
}
.pp-comparison-card-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 8px 0;
border-bottom: 1px solid var(--color-border, #e2e8f0);
font-size: 14px;
}
.pp-comparison-card-row:last-child { border-bottom: none; }
.pp-comparison-card-label {
color: var(--color-text-body, #64748b);
font-weight: 500;
flex-shrink: 0;
margin-right: 12px;
}
.pp-comparison-card-value {
color: var(--color-dark, #0f172a);
font-weight: 600;
text-align: right;
}
@media (max-width: 540px) {
.pp-comparison-grid { grid-template-columns: 1fr; gap: 14px; }
} @media (max-width: 768px) {
.pp-category-bottom-content { padding-top: 40px; margin-top: 48px; }
.pp-category-bottom-content h2 {
font-size: 24px;
margin-top: 48px;
padding-bottom: 12px;
}
.pp-category-bottom-content h2::after { width: 48px; }
.pp-category-bottom-content h3 { font-size: 17.5px; margin-top: 28px; }
.pp-category-bottom-content p {
text-align: left;
hyphens: none;
font-size: 15.5px;
line-height: 1.7;
}
.pp-category-bottom-content ul li,
.pp-category-bottom-content ol li { line-height: 1.7; }
} @media (prefers-reduced-motion: reduce) {
.pp-category-top-content,
.pp-category-bottom-content :where(figure, table, details, .pp-comparison-card, aside.cta-box) {
transition: none !important;
}
}
.pp-category-top-content :focus-visible,
.pp-category-bottom-content :focus-visible {
outline: 2px solid var(--color-primary, #059669);
outline-offset: 3px;
border-radius: 4px;
} .pp-stat-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 16px 0 4px;
align-items: center;
}
.pp-stat-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 14px;
background: var(--color-primary-light, #ecfdf5);
color: var(--color-primary-hover, #047857);
border-radius: var(--radius-pill, 9999px);
font-size: 13px;
font-weight: 600;
font-family: var(--font-heading, 'Manrope', sans-serif);
letter-spacing: 0.01em;
transition: background 0.2s, transform 0.2s;
}
.pp-stat-chip:hover {
background: #d1fae5;
transform: translateY(-1px);
}
.pp-stat-chip-icon {
width: 14px;
height: 14px;
background: var(--color-primary, #059669);
mask: center / contain no-repeat;
-webkit-mask: center / contain no-repeat;
flex-shrink: 0;
}
.pp-stat-chip-icon[data-icon="layers"]      { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M12 2 2 7l10 5 10-5L12 2zM2 17l10 5 10-5M2 12l10 5 10-5'/></svg>"); }
.pp-stat-chip-icon[data-icon="gift"]        { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M20 12v10H4V12M2 7h20v5H2zM12 22V7M12 7H8a2.5 2.5 0 0 1 0-5c3 0 4 5 4 5M12 7h4a2.5 2.5 0 0 0 0-5c-3 0-4 5-4 5'/></svg>"); }
.pp-stat-chip-icon[data-icon="clock"]       { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><circle cx='12' cy='12' r='10'/><polyline points='12 6 12 12 16 14'/></svg>"); }
.pp-stat-chip-icon[data-icon="truck"]       { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M1 3h15v13H1zM16 8h4l3 3v5h-7M5.5 21a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zM18.5 21a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/></svg>"); }
.pp-stat-chip-icon[data-icon="check"]       { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><polyline points='20 6 9 17 4 12'/></svg>"); }
.pp-stat-chip-icon[data-icon="shield"]      { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>"); } .pp-expert-tip {
display: flex;
gap: 18px;
align-items: flex-start;
margin: 32px auto;
max-width: 820px;
padding: 22px 26px;
background: var(--color-primary-light, #ecfdf5);
border-left: 4px solid var(--color-primary, #059669);
border-radius: var(--radius-precision, 12px);
}
.pp-expert-tip-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--color-primary, #059669);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.pp-expert-tip-body { flex: 1; }
.pp-expert-tip-body p {
margin: 0 0 12px;
font-size: 15.5px;
line-height: 1.65;
color: var(--color-dark-muted, #1e293b);
text-align: left;
hyphens: none;
}
.pp-expert-tip-body p:last-of-type { margin-bottom: 0; }
.pp-expert-tip-meta {
margin-top: 10px;
font-size: 13px;
color: var(--color-text-muted, #94a3b8);
}
.pp-expert-tip-author {
font-weight: 600;
color: var(--color-dark, #0f172a);
font-style: normal;
margin-right: 8px;
}
.pp-expert-tip-role { font-style: italic; }
@media (max-width: 540px) {
.pp-expert-tip { flex-direction: column; gap: 12px; padding: 18px 20px; }
.pp-expert-tip-icon { width: 36px; height: 36px; }
}  .pp-category-top-content {
transition: box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;
}
.pp-category-top-content figure.content-image img {
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-category-top-content:hover figure.content-image img {
transform: scale(1.03);
} .pp-category-top-content figure.content-image {
position: relative;
} .pp-category-bottom-content {
padding: 56px 0 0;
}
.pp-category-bottom-content p + p { margin-top: 2px; }
.pp-category-bottom-content p:has(+ h2),
.pp-category-bottom-content p:has(+ h3) { margin-bottom: 8px; } .pp-category-bottom-content h2 {
padding-bottom: 16px;
margin-bottom: 24px;
}
.pp-category-bottom-content h2::after {
height: 3px;
border-radius: 2px;
bottom: -2px;
} .pp-category-bottom-content h3 {
position: relative;
padding-left: 16px;
}
.pp-category-bottom-content h3::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
background: var(--color-primary, #059669);
border-radius: 50%;
box-shadow: 0 0 0 4px var(--color-primary-light, #ecfdf5);
} @media (max-width: 768px) {
.pp-category-bottom-content table {
background:
linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.15), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.15), rgba(0, 0, 0, 0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
background-attachment: local, local, scroll, scroll;
}
} .pp-category-bottom-content table tbody td:first-child {
border-right: 2px solid var(--color-primary-light, #ecfdf5);
} .pp-category-bottom-content details {
transition: padding 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pp-category-bottom-content details[open] {
padding: 22px 28px 24px;
}
.pp-category-bottom-content details[open] summary {
margin-bottom: 4px;
}
.pp-category-bottom-content details[open] p {
animation: pp-faq-fade-in 0.35s ease;
}
@keyframes pp-faq-fade-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
} .pp-category-bottom-content details summary:focus-visible {
outline: 2px solid var(--color-primary, #059669);
outline-offset: 4px;
border-radius: 4px;
} .pp-category-bottom-content aside.cta-box {
padding: 36px 40px 38px;
}
.pp-category-bottom-content aside.cta-box a[href^="tel:"] {
display: inline-block;
font-size: 1.15em;
letter-spacing: 0.01em;
padding: 0 2px;
}
.pp-category-bottom-content aside.cta-box::after {
content: "";
position: absolute;
bottom: -40%;
left: -10%;
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 65%);
pointer-events: none;
} .pp-category-bottom-content figure.content-image {
margin-bottom: 44px;
} .pp-stat-chip {
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pp-stat-chip:hover {
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
} .pp-comparison-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pp-comparison-card:hover {
transform: translateY(-4px);
} .pp-expert-tip-body p { font-size: 16px; } @media (max-width: 640px) {
.pp-category-top-content { padding: 22px 20px; }
.pp-category-bottom-content { padding-top: 36px; margin-top: 36px; }
.pp-category-bottom-content h2 { font-size: 22px; margin-top: 40px; }
.pp-category-bottom-content h3 { font-size: 17px; padding-left: 14px; }
.pp-category-bottom-content h3::before { width: 5px; height: 5px; }
.pp-category-bottom-content p { font-size: 15.5px; line-height: 1.72; }
.pp-category-bottom-content aside.cta-box { padding: 26px 22px 28px; }
} @media (prefers-reduced-motion: reduce) {
.pp-category-top-content figure.content-image img,
.pp-comparison-card,
.pp-stat-chip {
transition: none !important;
animation: none !important;
}
.pp-category-top-content:hover figure.content-image img {
transform: none;
}
}