.pp-calculator-module {
margin-bottom: 2rem;
font-family: var(--font-body);
color: var(--color-dark);
box-sizing: border-box;
width: 100%;
max-width: 100%;
overflow: hidden;
}
.pp-calculator-module * {
box-sizing: border-box;
} .single-product .product-summary .quantity,
.single-product .summary .quantity,
.single-product .entry-summary .quantity,
.single-product .ux-quantity,
.single-product .quantity.buttons_added {
display: none !important;
}
.single-product form.cart button.single_add_to_cart_button:not(.pp-uni-main-btn) {
display: none !important;
}
.woocommerce-cart .quantity,
.woocommerce-mini-cart .quantity {
display: block !important;
} .pp-calculator-card {
background: #ffffff;
border: 1px solid var(--color-border);
border-radius: var(--radius-precision);
overflow: hidden !important; box-shadow: var(--shadow-soft);
margin-bottom: 12px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
} .pp-acc-header {
margin-bottom: 10px;
}
.pp-acc-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.pp-acc-badge {
display: inline-flex;
align-items: center;
padding: 3px 8px;
background-color: #f1f5f9;
color: #475569;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pp-acc-stars {
display: flex;
align-items: center;
gap: 2px;
}
.pp-acc-stars svg {
width: 14px;
height: 14px;
color: #fbbf24;
fill: currentColor;
}
.pp-acc-title-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
@media (max-width: 767px) {
.pp-acc-title-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
}
.pp-acc-title-col {
flex: 1;
}
.pp-acc-title {
font-family: var(--font-heading);
font-size: 26px;
font-weight: 800;
line-height: 1.2;
color: var(--color-dark);
margin: 0 0 8px 0;
letter-spacing: var(--ls-tight);
}
.pp-acc-specs {
font-size: 13px;
color: #64748b;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
font-weight: 500;
}
.pp-sep {
color: #cbd5e1;
}
.pp-acc-price-col {
text-align: right;
min-width: 140px;
flex-shrink: 0;
}
@media (max-width: 767px) {
.pp-acc-price-col {
text-align: left;
min-width: 0;
margin-top: 4px;
}
}
.pp-acc-price-main {
font-family: var(--font-heading);
font-size: 32px;
font-weight: 800;
color: var(--color-dark);
line-height: 1;
letter-spacing: -1px;
}
.pp-acc-price-sub {
font-size: 12px;
color: #94a3b8;
margin-top: 4px;
font-weight: 500;
}
.pp-acc-price-main span.woocommerce-Price-amount {
font-size: 1.75rem !important;
line-height: 1.1 !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
} .pp-tabs-segmented {
padding: 4px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.pp-tab-grad-box {
display: flex;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 2px;
transition: all 0.3s ease;
}
.pp-tab-trigger {
flex: 1;
text-align: center;
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
color: #64748b;
cursor: pointer;
border-radius: 6px;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
.pp-tab-trigger:hover {
color: #1e293b;
background: #f1f5f9;
}
.pp-tab-trigger.active {
background: var(--color-primary-light);
color: var(--color-primary);
font-weight: 700;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
} .pp-pulse-dot {
width: 8px;
height: 8px;
background: var(--color-accent);
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 rgba(16, 185, 129, 0.4);
animation: pulse-green 2s infinite;
}
@keyframes pulse-green {
0% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}
70% {
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}
} .pp-calc-body {
padding: 12px 20px 0 20px;
}
.pp-acc-input-label {
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--ls-wide);
margin-bottom: 8px;
padding-left: 4px;
}
.pp-input-clean-row {
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
gap: 12px;
margin-bottom: 24px;
}
.pp-clean-btn {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
border-radius: 12px;
color: #64748b;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
}
.pp-clean-btn:active {
transform: scale(0.92);
}
.pp-clean-btn:hover {
border-color: #cbd5e1;
color: #0f172a;
background: #f8fafc;
}
.pp-clean-btn svg {
width: 24px;
height: 24px;
stroke-width: 2;
}
.pp-input-gray-box {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
border-radius: 12px;
height: 100%;
border: 1px solid transparent;
}
.pp-clean-input {
width: 140px;
text-align: center;
border: none !important;
background: transparent !important;
font-family: 'Manrope', sans-serif;
font-size: 36px;
font-weight: 800;
color: #0f172a;
padding: 0 !important;
margin: 0 !important;
outline: none !important;
-moz-appearance: textfield;
appearance: textfield;
}
.pp-clean-input::-webkit-outer-spin-button,
.pp-clean-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pp-clean-unit {
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
margin-top: 8px;
padding: 5px;
} .pp-clean-input {
height: 38px !important;
font-size: 1.5rem !important;
}
.pp-clean-btn {
width: 38px !important;
height: 38px !important;
}
.pp-input-gray-box {
height: 38px !important;
}
.pp-input-clean-row {
gap: 6px !important;
margin-bottom: 4px !important;
height: 44px !important;
} .pp-summary-dark {
background: #0f172a;
color: white;
padding: 24px;
position: relative;
border-top: 1px solid #1e293b;
}
@media (max-width: 480px) {
.pp-summary-dark {
padding: 16px;
}
} .pp-summary-row-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.pp-sum-left {
display: flex;
gap: 16px;
align-items: center;
}
.pp-sum-icon-box {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.08);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.pp-sum-icon-box svg {
width: 24px;
height: 24px;
}
.pp-sum-text-col {
display: flex;
flex-direction: column;
min-width: 100px; }
.pp-sum-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
color: #94a3b8;
font-weight: 700;
margin-bottom: 4px;
}
.pp-sum-value {
font-family: 'Manrope', sans-serif;
font-size: 18px;
font-weight: 500;
color: white;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pp-sum-value strong {
font-size: 24px;
font-weight: 800;
color: #ffffff;
} .pp-waste-1to1-group {
display: flex;
align-items: center;
gap: 12px;
background: rgba(255, 255, 255, 0.05);
padding: 8px 14px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
flex-shrink: 0;
cursor: pointer;
}
.pp-waste-1to1-group:hover {
background: rgba(255, 255, 255, 0.1);
}
.pp-waste-text-col {
text-align: right;
}
.pp-waste-highlight {
font-size: 11px;
font-weight: 800;
color: #fbbf24 !important;
text-transform: uppercase;
}
.pp-waste-sub {
font-size: 10px;
color: #94a3b8;
}
.pp-waste-checkbox {
width: 24px;
height: 24px;
border: 2px solid #64748b;
border-radius: 6px;
cursor: pointer;
position: relative;
transition: all 0.2s;
}
.pp-waste-checkbox:hover {
border-color: #94a3b8;
}
.pp-waste-checkbox.active {
background: #10b981;
border-color: #10b981;
}
.pp-waste-checkbox.active::after {
content: '';
position: absolute;
left: 8px;
top: 4px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
} .pp-waste-1to1-group {
min-height: 44px; } .pp-uni-bottom-row {
display: flex !important;
gap: 8px !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
padding-top: 24px !important;
align-items: center !important;
flex-wrap: nowrap !important;
width: 100% !important;
justify-content: space-between !important;
} .pp-uni-price-box {
background: rgba(255, 255, 255, 0.05) !important;
padding: 0 12px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 8px !important; flex: 0 0 160px !important;
width: 160px !important;
min-width: 160px !important;
max-width: 160px !important;
height: 48px !important;
min-height: 48px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
margin-right: 0 !important;
}
.pp-uni-price-box .pp-sum-label {
margin-bottom: 0 !important;
line-height: 1.2 !important;
}
.pp-uni-final-price {
font-family: 'Manrope', sans-serif !important;
font-size: 20px !important;
font-weight: 800 !important;
color: white !important;
line-height: 1.1 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
} .pp-uni-trigger-atc {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
height: 48px !important;
overflow: hidden;
position: relative;
border-radius: var(--radius-precision) !important;
} button.pp-uni-main-btn,
.pp-uni-trigger-atc.button {
width: 100% !important;
max-width: none !important;
font-size: 14px !important;
padding: 0 12px !important;
white-space: nowrap !important;
height: 100% !important;
min-height: 48px !important;
background-color: var(--color-primary) !important;
color: white !important;
border: none !important;
border-radius: var(--radius-precision) !important; display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
opacity: 1 !important;
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2) !important;
margin: 0 !important;
line-height: normal !important;
cursor: pointer !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative;
overflow: hidden;
}
#pp-sticky-footer.expanded .pp-merged-cta {
background-color: #f1f5f9 !important;
color: #94a3b8 !important;
box-shadow: none !important;
border: 1px solid #e2e8f0 !important;
pointer-events: none;
filter: grayscale(1);
opacity: 0.7;
}
#pp-sticky-footer.expanded .pp-merged-cta .pp-sticky-btn-price {
opacity: 0.3;
}
button.pp-uni-main-btn::after,
.pp-uni-trigger-atc.button::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.15),
transparent);
transition: 0.5s;
}
button.pp-uni-main-btn:hover::after,
.pp-uni-trigger-atc.button:hover::after {
left: 100%;
}
button.pp-uni-main-btn:active {
transform: scale(0.97);
}
button.pp-uni-main-btn:hover,
.pp-uni-trigger-atc.button:hover {
background-color: var(--color-primary-hover) !important;
opacity: 1 !important;
box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3) !important;
}
button.pp-uni-main-btn svg,
.pp-uni-trigger-atc svg {
width: 20px !important;
height: 20px !important;
pointer-events: none;
} .pp-uni-trigger-atc.loading {
color: transparent !important;
position: relative;
pointer-events: none;
}
.pp-uni-trigger-atc.loading svg {
opacity: 0 !important;
}
.pp-uni-trigger-atc.loading::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 20px;
height: 20px;
margin-left: -10px;
margin-top: -10px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: #fff;
animation: pp-spin 0.8s linear infinite;
}
@keyframes pp-spin {
to {
transform: rotate(360deg);
}
} .pp-1to1-footer {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px 0;
margin-top: 8px;
font-size: 9px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pp-1to1-footer span,
.pp-1to1-footer__link {
display: inline-flex;
align-items: center;
color: #64748b;
} .pp-1to1-footer__link {
text-decoration: none;
cursor: pointer;
transition: color .15s ease;
}
.pp-1to1-footer__link:hover,
.pp-1to1-footer__link:focus {
color: #10b981;
text-decoration: none;
outline: none;
}
.pp-1to1-footer__link:focus-visible {
outline: 2px solid #10b981;
outline-offset: 2px;
border-radius: 2px;
}
.pp-1to1-footer svg {
width: 14px;
height: 14px;
margin-right: 6px;
color: #10b981;
}  .pp-mobile-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9990;
background: #ffffff;
box-shadow: 0 -6px 32px rgba(0, 0, 0, 0.10);
border-top: 1px solid #f0f4f8;
padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(110%);
transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.pp-mobile-sticky-bar.visible {
transform: translateY(0);
} .pp-sticky-inner {
padding: 0 12px 10px 12px;
} .pp-sticky-handle {
display: flex;
justify-content: center;
padding: 8px 0 6px 0;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.pp-handle-pill {
width: 40px;
height: 4px;
background: #cbd5e1;
border-radius: 2px;
transition: background 0.2s;
}
.pp-sticky-handle:hover .pp-handle-pill,
.pp-mobile-sticky-bar.expanded .pp-handle-pill {
background: #10b981;
}
.pp-sticky-controls {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
} .pp-sticky-expand-chip {
display: flex;
align-items: center;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 6px 14px 6px 10px;
height: 48px;
flex-shrink: 0;
gap: 8px;
cursor: pointer;
transition: all 0.2s;
-webkit-tap-highlight-color: transparent;
}
.pp-sticky-expand-chip:active {
background: #f1f5f9;
transform: scale(0.96);
}
.pp-chip-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #e2e8f0;
border-radius: 50%;
color: #475569;
}
.pp-chip-body {
display: flex;
flex-direction: column;
justify-content: center;
}
.pp-chip-label {
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #94a3b8;
line-height: 1;
margin-bottom: 2px;
}
.pp-chip-value {
font-size: 14px;
font-weight: 800;
color: #0f172a;
line-height: 1;
} .pp-merged-cta {
flex: 1 1 auto;
height: 48px !important;
padding: 0 16px !important;
border-radius: 999px !important;
background: linear-gradient(175deg, #10b981 0%, #059669 100%) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.18) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
cursor: pointer !important;
font-family: 'Inter', sans-serif !important;
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
width: 100% !important;
-webkit-tap-highlight-color: transparent !important;
}
.pp-merged-cta:active {
transform: scale(0.97) !important;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
}
.pp-sticky-btn-price {
font-size: 16px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
pointer-events: none;
}
.pp-sticky-btn-price .amount,
.pp-sticky-btn-price .woocommerce-Price-amount {
color: #fff !important;
font-weight: 800 !important;
font-size: inherit !important;
}
.pp-sticky-btn-sep {
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.45);
border-radius: 50%;
margin: 0 6px;
flex-shrink: 0;
}
.pp-sticky-btn-text {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.6px;
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
text-transform: uppercase;
pointer-events: none;
}    #pp-sticky-footer {
z-index: 1050 !important;
}
.pp-sticky-backdrop {
z-index: 1049 !important;
}
@media (max-width: 849px) { .wa-widget-send-button,
#wa-widget-send-button,
#wp-whatsapp-chat,
.wp-whatsapp-chat,
[class*="whatsapp"],
[class*="chat-widget"],
[class*="chat-bubble"],
[class*="chat-button"],
[class*="chat-fab"],
[id*="chat-widget"],
[id*="chat-button"],
[id*="chatbot"],
.tawk-button,
.crisp-client .cc-kv6t,
#tidio-chat-iframe,
#tidio-chat,
.zsiq_floatmain,
.chatlio-widget-button,
.olark-survey-container,
#fb-root~.fb_dialog,
.zopim,
.intercom-launcher,
.pp-contact-fab {
bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
z-index: 1045 !important;
transition: bottom 0.3s ease !important;
} body.pp-sheet-open [class*="whatsapp"],
body.pp-sheet-open [class*="chat-widget"],
body.pp-sheet-open [class*="chat-bubble"],
body.pp-sheet-open [class*="chat-button"],
body.pp-sheet-open #tidio-chat,
body.pp-sheet-open .tawk-button,
body.pp-sheet-open .pp-contact-fab {
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.2s ease !important;
} .pp-mobile-sticky-bar.expanded .pp-sticky-qty-chip,
#pp-sticky-footer.expanded .pp-sticky-qty-chip {
opacity: 0.45;
pointer-events: none;
filter: grayscale(0.3);
}
}  .pp-sticky-cta-btn {
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
} .pp-sticky-cta-btn.is-atc-mode {
background: linear-gradient(165deg, #059669 0%, #047857 100%) !important;
box-shadow: 0 4px 20px rgba(5, 150, 105, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
} @keyframes pp-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.pp-sheet-atc-btn.is-loading {
opacity: 0.82 !important;
pointer-events: none !important;
position: relative;
overflow: hidden;
} .pp-sheet-atc-btn.is-loading::after {
content: '';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: inherit;
border-radius: inherit;
} .pp-sheet-atc-btn.is-loading::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 22px;
height: 22px;
margin: -11px 0 0 -11px;
border: 3px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: pp-spin 0.7s linear infinite;
z-index: 2;
} .pp-sticky-cta-btn.is-open-mode {
background: #f1f5f9 !important;
color: #64748b !important;
box-shadow: none !important;
border: 1px solid #e2e8f0 !important;
opacity: 1;
}
.pp-sticky-cta-btn.is-open-mode .pp-cta-price {
color: #94a3b8 !important;
} .pp-sticky-cta-btn .pp-cta-price {
font-variant-numeric: tabular-nums;
white-space: nowrap;
min-width: 70px;
text-align: left;
}
.pp-qty-chip-value {
font-variant-numeric: tabular-nums;
min-width: 48px;
white-space: nowrap;
} .pp-sticky-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
z-index: 998;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.pp-mobile-sticky-bar.expanded~.pp-sticky-backdrop,
.pp-sheet-open .pp-sticky-backdrop {
opacity: 1;
pointer-events: auto;
} body.pp-sheet-open .pp-sticky-backdrop {
opacity: 1;
pointer-events: auto;
} #pp-sticky-footer,
.pp-mobile-sticky-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 999;
background: #fff;
box-shadow: 0 -2px 20px rgba(15, 23, 42, 0.12);
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform;
font-family: 'Inter', -apple-system, sans-serif;
}
#pp-sticky-footer.visible,
.pp-mobile-sticky-bar.visible {
transform: translateY(0);
} .pp-sticky-bar-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
min-height: 62px;
} .pp-sticky-qty-chip {
display: flex;
align-items: center;
gap: 8px;
background: #f1f5f9;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 8px 12px;
cursor: pointer;
transition: all 0.18s;
flex-shrink: 0;
-webkit-tap-highlight-color: transparent;
}
.pp-sticky-qty-chip:active {
background: #e2e8f0;
transform: scale(0.97);
}
.pp-qty-chip-icon {
color: #10b981;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.pp-mobile-sticky-bar.expanded .pp-qty-chip-icon {
transform: rotate(180deg);
}
.pp-qty-chip-text {
display: flex;
flex-direction: column;
line-height: 1;
}
.pp-qty-chip-label {
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
margin-bottom: 3px;
}
.pp-qty-chip-value {
font-size: 15px;
font-weight: 800;
color: #0f172a;
} .pp-sticky-cta-btn {
flex: 1;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 52px !important; padding: 0 18px !important;
border-radius: 16px !important; background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: #fff !important;
border: none !important;
box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
cursor: pointer !important;
font-family: inherit !important;
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
-webkit-tap-highlight-color: transparent !important;
white-space: nowrap;
}
.pp-sticky-cta-btn:active {
transform: scale(0.96) !important;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2) !important;
}
.pp-cta-price {
font-size: 15px;
font-weight: 800;
line-height: 1;
pointer-events: none;
}
.pp-cta-price .amount,
.pp-cta-price .woocommerce-Price-amount {
color: #fff !important;
font-weight: 800 !important;
font-size: inherit !important;
}
.pp-cta-divider {
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
margin: 0 8px;
flex-shrink: 0;
}
.pp-cta-label {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
display: flex;
align-items: center;
pointer-events: none;
} .pp-flat-stepper {
display: flex;
align-items: center;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 999px;
padding: 3px;
gap: 2px;
flex-shrink: 0;
height: 48px;
}
.pp-flat-step {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 1.5px solid #e2e8f0;
border-radius: 50%;
color: #334155;
cursor: pointer;
transition: all 0.18s;
padding: 0;
-webkit-tap-highlight-color: transparent;
flex-shrink: 0;
}
.pp-flat-step svg {
stroke: currentColor !important;
}
.pp-flat-step:active {
transform: scale(0.88);
background: #f1f5f9;
}
.pp-flat-qty {
width: 40px !important;
border: none !important;
background: transparent !important;
text-align: center !important;
font-size: 17px !important;
font-weight: 800 !important;
color: #0f172a !important;
padding: 0 !important;
margin: 0 !important;
-moz-appearance: textfield !important;
box-shadow: none !important;
height: auto !important;
appearance: textfield !important;
}
.pp-flat-qty::-webkit-outer-spin-button,
.pp-flat-qty::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
} .pp-sticky-sheet {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease;
background: #fff;
border-bottom: 1px solid #f1f5f9;
}
.pp-mobile-sticky-bar.expanded .pp-sticky-sheet {
max-height: 480px;
opacity: 1;
} .pp-sheet-drag-handle {
padding: 10px 0 6px;
display: flex;
justify-content: center;
}
.pp-sheet-drag-pill {
width: 36px;
height: 4px;
background: #e2e8f0;
border-radius: 2px;
} .pp-sheet-body {
padding: 6px 16px 20px;
display: flex;
flex-direction: column;
gap: 14px;
} .pp-sheet-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.pp-sheet-header-left {
flex: 1;
min-width: 0;
}
.pp-sheet-title {
font-size: 15px;
font-weight: 800;
color: #0f172a;
display: block;
line-height: 1.2;
}
.pp-sheet-subtitle {
font-size: 12px;
color: #94a3b8;
font-weight: 500;
margin: 3px 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pp-sheet-close-btn {
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
background: #f1f5f9;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
padding: 0;
transition: all 0.15s;
-webkit-tap-highlight-color: transparent;
}
.pp-sheet-close-btn:active {
background: #e2e8f0;
transform: scale(0.9);
} .pp-sheet-tabs {
display: flex;
background: #f1f5f9;
border-radius: 10px;
padding: 3px;
gap: 3px;
}
.pp-sheet-tab {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 9px 10px;
font-size: 12px;
font-weight: 700;
border: none;
border-radius: 8px;
background: transparent;
color: #64748b;
cursor: pointer;
transition: all 0.2s;
-webkit-tap-highlight-color: transparent;
}
.pp-sheet-tab.active {
background: #fff;
color: #0f172a;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.pp-sheet-tab svg {
flex-shrink: 0;
} .pp-sheet-result-row {
display: flex;
align-items: stretch;
background: #f8fafc;
border: 1px solid #e9eef5;
border-radius: 12px;
padding: 10px 14px;
gap: 12px;
min-height: 58px; }
.pp-sheet-result-item {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
min-width: 0; }
.pp-sheet-result-label {
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #94a3b8;
white-space: nowrap;
}
.pp-sheet-result-value {
font-size: 16px;
font-weight: 800;
color: #0f172a;
line-height: 1; font-variant-numeric: tabular-nums; min-width: 72px;
white-space: nowrap;
}
.pp-result-price {
color: #059669;
}
.pp-result-price .amount,
.pp-result-price .woocommerce-Price-amount {
color: inherit !important;
font-weight: 800 !important;
font-size: inherit !important;
font-variant-numeric: tabular-nums;
}
.pp-sheet-result-divider {
width: 1px;
height: auto;
min-height: 28px;
background: #e2e8f0;
flex-shrink: 0;
align-self: stretch;
} .pp-sheet-stepper {
display: flex;
align-items: center;
gap: 10px;
min-height: 58px; }
.pp-sheet-step {
width: 48px !important;
height: 48px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #fff !important;
border: 2px solid #e2e8f0 !important;
border-radius: 50% !important;
color: #334155 !important;
cursor: pointer !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
flex-shrink: 0 !important;
padding: 0 !important;
-webkit-tap-highlight-color: transparent !important;
}
.pp-sheet-step svg {
display: block !important;
stroke: currentColor !important;
}
.pp-sheet-step:active {
transform: scale(0.88) !important;
border-color: #10b981 !important;
color: #059669 !important;
background: #ecfdf5 !important;
}
.pp-sheet-qty-wrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border: 2px solid #e2e8f0;
border-radius: 12px;
height: 58px;
padding: 0 14px;
gap: 8px;
transition: border-color 0.2s;
}
.pp-sheet-qty-wrap:focus-within {
border-color: #10b981;
}
.pp-sheet-qty-input {
width: 100% !important;
min-width: 50px !important;
border: none !important;
background: transparent !important;
text-align: center !important;
font-size: 28px !important;
font-weight: 800 !important;
color: #0f172a !important;
padding: 0 !important;
margin: 0 !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
box-shadow: none !important;
height: auto !important;
line-height: 1 !important;
font-variant-numeric: tabular-nums; display: block !important;
vertical-align: middle;
}
.pp-sheet-qty-input::-webkit-outer-spin-button,
.pp-sheet-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pp-sheet-qty-unit {
font-size: 13px;
font-weight: 700;
color: #94a3b8;
flex-shrink: 0;
line-height: 1;
align-self: center;
} .pp-sheet-atc-btn {
width: 100%;
height: 52px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: linear-gradient(165deg, #10b981 0%, #059669 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 14px !important;
font-size: 15px !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
font-family: inherit !important;
cursor: pointer !important;
box-shadow: 0 4px 16px rgba(5, 150, 105, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
-webkit-tap-highlight-color: transparent !important;
}
.pp-sheet-atc-btn:active {
transform: scale(0.97) !important;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.2) !important;
}  @media (max-width: 849px) {
body.single-product .pp-global-shipping-bar {
display: none !important;
}
} @media (max-width: 480px) { .pp-uni-bottom-row {
flex-wrap: nowrap !important;
gap: 10px !important;
align-items: stretch !important;
}
.pp-uni-price-box {
flex: 0 1 auto !important;
flex-shrink: 0 !important;
width: auto !important;
min-width: 110px !important;
max-width: 58% !important;
margin-right: 0 !important;
padding: 0 10px !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.pp-uni-trigger-atc {
flex: 1 1 0 !important;
width: auto !important;
min-width: 130px !important;
padding-left: 10px !important;
padding-right: 10px !important;
}
.pp-uni-final-price {
font-size: clamp(15px, 4.8vw, 22px) !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
letter-spacing: -0.01em !important;
}
.pp-uni-price-box .pp-sum-label {
font-size: clamp(9px, 2.5vw, 11px) !important;
letter-spacing: 0.05em !important;
}
.pp-atc-text {
font-size: clamp(11px, 3.4vw, 14px) !important;
white-space: nowrap !important;
letter-spacing: 0.02em !important;
}
button.pp-uni-main-btn svg,
.pp-uni-trigger-atc svg {
flex-shrink: 0 !important;
width: 18px !important;
height: 18px !important;
}
.pp-atc-icon-box {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
} .pp-contact-box::before,
.pp-contact-box::after,
.pp-essentials-list+div::before,
.pp-essentials-list+div::after {
display: none !important;
content: none !important;
}
}  .pp-zoom-pos {
position: absolute !important;
z-index: 30 !important;
padding: 8px !important;
background-color: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(4px);
border-radius: 50% !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
color: #334155 !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
}
.pp-zoom-pos:hover {
color: #059669 !important;
background-color: #fff !important;
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.pp-card-image,
.pp-loop-gallery-wrapper {
position: relative !important;
overflow: hidden !important;
}
.pp-gallery-zoom.pp-zoom-pos {
position: absolute !important;
z-index: 30 !important;
padding: 0 !important;
background-color: #fff !important;
border-radius: 50% !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
color: #334155 !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
border: 1px solid rgba(0, 0, 0, 0.05) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
top: auto !important;
bottom: 12px !important;
right: 12px !important;
left: auto !important;
transform: none !important;
opacity: 1 !important;
}
.pp-gallery-zoom.pp-zoom-pos svg {
width: 18px !important;
height: 18px !important;
margin: 0 !important;
}
.pp-gallery-zoom.pp-zoom-pos:hover {
color: #059669 !important;
transform: scale(1.1) !important;
} @media (min-width: 1024px) {
.pp-gallery-zoom.pp-zoom-pos {
opacity: 0 !important;
bottom: 12px !important;
right: 12px !important;
}
.pp-product-card:hover .pp-gallery-zoom.pp-zoom-pos,
.group\/gallery:hover .pp-gallery-zoom.pp-zoom-pos {
opacity: 1 !important;
}
} @media (max-width: 1023px) {
.pp-gallery-zoom.pp-zoom-pos {
opacity: 1 !important;
bottom: 15px !important;
right: 15px !important;
width: 32px !important;
height: 32px !important;
}
}
.pp-mobile-sticky {
display: flex !important;
} .pp-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.pp-modal-container {
background: #fff;
border-radius: 20px;
width: 100%;
max-width: 440px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
overflow: hidden;
animation: pp-modal-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes pp-modal-pop {
from { opacity: 0; transform: scale(0.9) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.pp-modal-content {
padding: 32px;
}
@media (max-width: 480px) {
.pp-modal-content { padding: 24px; }
}
.pp-modal-header {
text-align: center;
margin-bottom: 24px;
}
.pp-modal-icon-box {
width: 64px;
height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
}
.pp-modal-icon-box.is-soft {
background: #fff7ed;
color: #f97316;
}
.pp-modal-icon-box.is-hard {
background: #fef2f2;
color: #ef4444;
}
.pp-modal-icon-box svg {
width: 32px;
height: 32px;
}
.pp-modal-title {
font-family: var(--font-heading);
font-size: 20px;
font-weight: 800;
color: #0f172a;
margin: 0;
}
.pp-modal-body {
margin-bottom: 32px;
}
.pp-modal-text {
font-size: 15px;
color: #64748b;
line-height: 1.6;
text-align: center;
margin-bottom: 20px;
}
.pp-stock-info-box {
background: #f8fafc;
border-radius: 12px;
padding: 16px;
border: 1px solid #e2e8f0;
}
.pp-stock-info-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
padding: 8px 0;
}
.pp-stock-info-row:first-child { padding-top: 0; border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 4px; }
.pp-stock-info-row:last-child { padding-bottom: 0; }
.pp-stock-info-row span { color: #64748b; font-weight: 500; }
.pp-stock-info-row strong { color: #0f172a; font-weight: 800; }
.pp-stock-info-row.is-error strong { color: #ef4444; }
.pp-modal-footer {
display: flex;
gap: 12px;
}
.pp-modal-btn {
flex: 1;
height: 48px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.pp-modal-btn-secondary {
background: #f1f5f9;
color: #475569;
}
.pp-modal-btn-secondary:hover { background: #e2e8f0; }
.pp-modal-btn-primary {
background: var(--color-primary);
color: #fff;
box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
}
.pp-modal-btn-primary:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
}
@media (max-width: 400px) {
.pp-modal-footer { flex-direction: column-reverse; }
}