:root {
--hps-primary:   #1a1a2e;
--hps-accent:    #667eea;
--hps-accent2:   #764ba2;
--hps-success:   #10b981;
--hps-warning:   #f59e0b;
--hps-danger:    #ef4444;
--hps-surface:   #ffffff;
--hps-bg:        #f0f4f8;
--hps-border:    #e2e8f0;
--hps-text:      #1a202c;
--hps-muted:     #718096;
--hps-radius:    14px;
--hps-shadow:    0 4px 24px rgba(0,0,0,.10);
} .hps-center-wrap,
.entry-content .hps-center-wrap,
body .hps-center-wrap {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
text-align: center !important;
box-sizing: border-box !important;
} .hps-shop,
.entry-content .hps-shop,
body .hps-shop {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
display: inline-block !important;
width: 100% !important;
max-width: 100% !important;
text-align: left !important;
box-sizing: border-box !important;
vertical-align: top !important;
float: none !important;
margin: 0 auto !important;
}
.hps-test-banner {
background: repeating-linear-gradient(45deg, #f59e0b, #f59e0b 12px, #fbbf24 12px, #fbbf24 24px);
color: #78350f;
font-weight: 700;
text-align: center !important;
padding: 10px 16px;
border-radius: var(--hps-radius) var(--hps-radius) 0 0;
font-size: 14px;
margin-bottom: 24px !important;
width: 100% !important;
box-sizing: border-box !important;
} .hps-products-grid,
.entry-content .hps-products-grid,
body .hps-products-grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 24px !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 auto !important;
padding: 0 !important;
float: none !important;
list-style: none !important;
} .hps-products-grid::before,
.hps-products-grid::after,
.entry-content .hps-products-grid::before,
.entry-content .hps-products-grid::after {
display: none !important;
content: none !important;
} .hps-product-card,
.entry-content .hps-product-card,
body .hps-product-card {
background: var(--hps-surface) !important;
border-radius: var(--hps-radius) !important;
box-shadow: var(--hps-shadow) !important;
overflow: hidden;
transition: transform .2s, box-shadow .2s;
border: 1px solid var(--hps-border) !important;
width: 300px !important;
max-width: 100% !important;
flex-shrink: 0 !important;
text-align: left !important;
box-sizing: border-box !important;
margin: 0 !important;
float: none !important;
}
.hps-product-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,.15) !important;
}
.hps-product-image {
background: #000 !important;
}
.hps-product-image img {
width: 100% !important;
height: auto !important;
max-height: 280px !important;
object-fit: contain !important;
display: block !important;
}
.hps-product-body { padding: 22px !important; }
.hps-product-badge {
display: inline-block;
background: linear-gradient(135deg, var(--hps-accent), var(--hps-accent2));
color: #fff !important;
font-size: 11px;
font-weight: 700;
letter-spacing: .5px;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 20px;
margin-bottom: 10px;
}
.hps-product-name {
font-size: 20px !important;
font-weight: 700 !important;
color: var(--hps-text) !important;
margin: 0 0 4px !important;
-webkit-text-fill-color: var(--hps-text) !important;
}
.hps-product-version {
font-size: 13px !important;
color: var(--hps-muted) !important;
margin: 0 0 12px !important;
}
.hps-product-description {
font-size: 14px !important;
color: var(--hps-muted) !important;
line-height: 1.6;
margin-bottom: 18px !important;
}
.hps-product-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--hps-border) !important;
}
.hps-product-price {
display: flex;
align-items: baseline;
gap: 4px;
}
.hps-price-amount {
font-size: 26px !important;
font-weight: 800 !important;
color: var(--hps-text) !important;
-webkit-text-fill-color: var(--hps-text) !important;
}
.hps-price-currency {
font-size: 14px !important;
color: var(--hps-muted) !important;
-webkit-text-fill-color: var(--hps-muted) !important;
}
.hps-buy-button {
background: linear-gradient(135deg, var(--hps-accent), var(--hps-accent2)) !important;
color: #fff !important;
border: none !important;
border-radius: 30px !important;
padding: 11px 20px !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
transition: opacity .2s, transform .15s !important;
-webkit-text-fill-color: #fff !important;
appearance: none !important;
margin: 0 !important;
}
.hps-buy-button:hover {
opacity: .9 !important;
transform: scale(1.03) !important;
} .hps-modal-overlay {
display: none;
position: fixed !important;
inset: 0 !important;
background: rgba(10,10,20,.65) !important;
z-index: 99999 !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
backdrop-filter: blur(4px);
}
.hps-modal-overlay.hps-modal-open {
display: flex !important;
}
.hps-modal {
background: var(--hps-surface) !important;
border-radius: var(--hps-radius) !important;
width: 100%;
max-width: 480px !important;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 64px rgba(0,0,0,.3) !important;
position: relative;
padding: 36px !important;
animation: hpsSlideUp .25s ease;
}
@keyframes hpsSlideUp {
from { opacity: 0; transform: translateY(20px); }
to   { opacity: 1; transform: translateY(0); }
}
.hps-modal-close {
position: absolute !important;
top: 16px !important;
right: 16px !important;
background: var(--hps-bg) !important;
border: none !important;
border-radius: 50% !important;
width: 32px !important;
height: 32px !important;
cursor: pointer !important;
font-size: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: var(--hps-muted) !important;
-webkit-text-fill-color: var(--hps-muted) !important;
appearance: none !important;
margin: 0 !important;
padding: 0 !important;
transition: background .15s !important;
}
.hps-modal-close:hover { background: #e2e8f0 !important; }
.hps-modal-header { text-align: center; margin-bottom: 24px; }
.hps-modal-icon { font-size: 40px; margin-bottom: 10px; }
.hps-modal-header h3 {
font-size: 22px !important;
font-weight: 700 !important;
color: var(--hps-text) !important;
margin: 0 0 4px !important;
-webkit-text-fill-color: var(--hps-text) !important;
}
.hps-modal-price {
font-size: 17px !important;
font-weight: 700 !important;
color: var(--hps-accent) !important;
margin: 0 !important;
-webkit-text-fill-color: var(--hps-accent) !important;
}
.hps-modal-test-notice {
background: #fef9c3;
border-left: 3px solid var(--hps-warning);
padding: 10px 14px;
border-radius: 0 8px 8px 0;
font-size: 13px;
color: #78350f;
margin-bottom: 20px;
} .hps-form-group { margin-bottom: 18px !important; }
.hps-form-group label {
display: block !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--hps-text) !important;
margin-bottom: 6px !important;
-webkit-text-fill-color: var(--hps-text) !important;
}
.hps-form-group input[type="text"],
.hps-form-group input[type="email"] {
width: 100% !important;
padding: 11px 14px !important;
border: 1.5px solid var(--hps-border) !important;
border-radius: 8px !important;
font-size: 15px !important;
background: #fff !important;
color: var(--hps-text) !important;
box-sizing: border-box !important;
transition: border-color .2s !important;
margin: 0 !important;
appearance: none !important;
}
.hps-form-group input:focus {
border-color: var(--hps-accent) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(102,126,234,.15) !important;
}
.hps-field-hint {
font-size: 12px !important;
color: var(--hps-muted) !important;
margin: 4px 0 0 !important;
}
.hps-privacy-group label { font-weight: 400 !important; }
.hps-checkbox-label {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
cursor: pointer !important;
}
.hps-checkbox-label input[type="checkbox"] {
margin-top: 2px !important;
flex-shrink: 0 !important;
width: 16px !important;
height: 16px !important;
accent-color: var(--hps-accent) !important;
}
.hps-checkbox-label span {
font-size: 13px !important;
color: var(--hps-muted) !important;
line-height: 1.5 !important;
-webkit-text-fill-color: var(--hps-muted) !important;
}
.hps-checkbox-label a { color: var(--hps-accent) !important; }
.hps-form-message {
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
margin-top: 14px;
display: none;
}
.hps-form-message.error   { background: #fee2e2; color: #b91c1c; border-left: 3px solid var(--hps-danger); }
.hps-form-message.success { background: #d1fae5; color: #065f46; border-left: 3px solid var(--hps-success); }
.hps-submit-button {
width: 100% !important;
padding: 14px !important;
background: linear-gradient(135deg, var(--hps-accent), var(--hps-accent2)) !important;
color: #fff !important;
border: none !important;
border-radius: 10px !important;
font-size: 16px !important;
font-weight: 700 !important;
cursor: pointer !important;
margin-top: 6px !important;
transition: opacity .2s !important;
-webkit-text-fill-color: #fff !important;
appearance: none !important;
}
.hps-submit-button:hover    { opacity: .9 !important; }
.hps-submit-button:disabled { opacity: .6 !important; cursor: not-allowed !important; } .hps-order-summary {
background: var(--hps-bg);
border-radius: 10px;
padding: 16px;
margin: 16px 0;
}
.hps-order-row {
display: flex;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid var(--hps-border);
font-size: 14px;
}
.hps-order-row:last-child { border-bottom: none; }
.hps-order-row span { color: var(--hps-muted); }
.hps-order-row strong { color: var(--hps-text); }
.hps-paypal-steps { margin: 20px 0; }
.hps-step {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 12px;
font-size: 14px;
color: var(--hps-text);
}
.hps-step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, var(--hps-accent), var(--hps-accent2));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
flex-shrink: 0;
}
.hps-paypal-button {
display: block !important;
text-align: center !important;
background: #0070ba !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
border-radius: 30px !important;
padding: 14px 24px !important;
font-weight: 700 !important;
font-size: 16px !important;
text-decoration: none !important;
margin: 20px 0 !important;
transition: background .2s !important;
}
.hps-paypal-button:hover { background: #005ea6 !important; }
.hps-paypal-note {
font-size: 13px !important;
color: var(--hps-muted) !important;
text-align: center !important;
-webkit-text-fill-color: var(--hps-muted) !important;
margin: 0 !important;
} .hps-success-message {
background: #d1fae5;
border-radius: 10px;
padding: 18px;
color: #065f46;
font-size: 15px;
line-height: 1.6;
margin-bottom: 20px;
}
.hps-close-button {
width: 100% !important;
padding: 13px !important;
background: var(--hps-bg) !important;
color: var(--hps-text) !important;
border: 1.5px solid var(--hps-border) !important;
border-radius: 10px !important;
font-size: 15px !important;
font-weight: 600 !important;
cursor: pointer !important;
-webkit-text-fill-color: var(--hps-text) !important;
appearance: none !important;
margin: 0 !important;
} .hps-no-scroll { overflow: hidden !important; }
.hps-details-btn {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: transparent !important;
border: 1px solid var(--hps-accent) !important;
color: var(--hps-accent) !important;
-webkit-text-fill-color: var(--hps-accent) !important;
font-size: 13px !important;
font-weight: 600 !important;
padding: 6px 14px !important;
border-radius: 20px !important;
cursor: pointer !important;
margin-bottom: 14px !important;
transition: all .2s !important;
appearance: none !important;
}
.hps-details-btn:hover {
background: var(--hps-accent) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
} .hps-desc-overlay {
display: none !important;
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,.65) !important;
z-index: 999998 !important;
align-items: center !important;
justify-content: center !important;
padding: 20px !important;
backdrop-filter: blur(4px) !important;
}
.hps-desc-overlay.hps-desc-open {
display: flex !important;
}
.hps-desc-modal {
background: #fff !important;
border-radius: 18px !important;
box-shadow: 0 24px 80px rgba(0,0,0,.3) !important;
width: 100% !important;
max-width: 620px !important;
max-height: 85vh !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
animation: hps-desc-in .25s ease !important;
}
@keyframes hps-desc-in {
from { opacity: 0; transform: translateY(30px) scale(.97); }
to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.hps-desc-modal-header {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
padding: 24px 24px 16px !important;
border-bottom: 1px solid var(--hps-border) !important;
background: linear-gradient(135deg, var(--hps-accent), var(--hps-accent2)) !important;
gap: 16px !important;
}
.hps-desc-modal-badge {
display: inline-block !important;
background: rgba(255,255,255,.25) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: .5px !important;
text-transform: uppercase !important;
padding: 3px 10px !important;
border-radius: 20px !important;
margin-bottom: 8px !important;
}
.hps-desc-modal-title {
font-size: 20px !important;
font-weight: 800 !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
margin: 0 0 4px !important;
}
.hps-desc-modal-version {
font-size: 13px !important;
color: rgba(255,255,255,.75) !important;
-webkit-text-fill-color: rgba(255,255,255,.75) !important;
margin: 0 !important;
}
.hps-desc-close {
background: rgba(255,255,255,.2) !important;
border: none !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
font-size: 16px !important;
cursor: pointer !important;
flex-shrink: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: background .2s !important;
appearance: none !important;
margin-top: 4px !important;
}
.hps-desc-close:hover { background: rgba(255,255,255,.35) !important; }
.hps-desc-modal-body {
overflow-y: auto !important;
padding: 24px !important;
font-size: 15px !important;
line-height: 1.7 !important;
color: var(--hps-text) !important;
-webkit-text-fill-color: var(--hps-text) !important;
}
.hps-desc-modal-body strong {
color: var(--hps-accent) !important;
-webkit-text-fill-color: var(--hps-accent) !important;
font-weight: 700 !important;
display: block !important;
margin: 14px 0 4px !important;
font-size: 15px !important;
}
.hps-desc-modal-body hr {
border: none !important;
border-top: 1px solid var(--hps-border) !important;
margin: 16px 0 !important;
} .hps-read-more,
.hps-read-less {
background: none !important;
border: none !important;
color: var(--hps-accent) !important;
-webkit-text-fill-color: var(--hps-accent) !important;
font-size: 13px !important;
font-weight: 600 !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 0 0 4px !important;
text-decoration: underline !important;
white-space: nowrap !important;
appearance: none !important;
}
.hps-read-more:hover,
.hps-read-less:hover { opacity: .75 !important; }
.hps-desc-short,
.hps-desc-full {
font-size: 14px !important;
color: var(--hps-muted) !important;
line-height: 1.6 !important;
-webkit-text-fill-color: var(--hps-muted) !important;
} @media (max-width: 600px) {
.hps-modal { padding: 24px !important; }
.hps-product-card { width: 100% !important; }
.hps-desc-modal { max-height: 92vh !important; border-radius: 14px !important; }
.hps-desc-modal-title { font-size: 17px !important; }
}