/* ================================================================
* Haika KingSize — Single Product V2
* Premium UI/UX • Mobile-first • 3 color modes friendly
* ================================================================ */
.hsp {
--hsp-fg: var(--cb-text, #e6edf3);
--hsp-fg-muted: var(--cb-text-2, rgba(255,255,255,0.62));
--hsp-bg: var(--cb-bg, #0d1117);
--hsp-card-bg: rgba(255,255,255,0.04);
--hsp-card-bg-2: rgba(255,255,255,0.07);
--hsp-border: rgba(255,255,255,0.10);
--hsp-purple: var(--ks-purple, #6B2D5C);
--hsp-purple-glow: var(--ks-purple-glow, #E7A6AE);
--hsp-purple-soft: rgba(231, 166, 174, 0.12);
--hsp-success: #10b981;
--hsp-warn: #f59e0b;
--hsp-danger: #ef4444;
--hsp-radius-lg: 24px;
--hsp-radius: 16px;
--hsp-radius-sm: 10px;
--hsp-shadow: 0 12px 40px rgba(0,0,0,.28);
--hsp-shadow-lg: 0 24px 80px rgba(0,0,0,.45);
color: var(--hsp-fg);
padding: 24px 44px 80px; /* عرض و حاشیهٔ کناری مطابق موکاپ (.sheet 1240 + padding 44) */
max-width: 1240px;
margin: 0 auto;
position: relative;
}
@media (max-width: 700px) { .hsp { padding: 20px 16px 80px; } }
.haika-theme-light .hsp {
--hsp-card-bg: #ffffff;
--hsp-card-bg-2: #faf7ff;
--hsp-border: rgba(107, 45, 92, 0.12);
--hsp-fg: #1a1a2e;
--hsp-fg-muted: #6b7280;
--hsp-shadow: 0 12px 40px rgba(107, 45, 92, 0.08);
--hsp-shadow-lg: 0 24px 80px rgba(107, 45, 92, 0.15);
}
/* ───── Breadcrumb ───── */
.hsp__breadcrumb {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 12.5px;
color: var(--hsp-fg-muted);
margin-bottom: 22px;
}
.hsp__breadcrumb a {
color: var(--hsp-fg-muted);
text-decoration: none;
transition: color .15s;
}
.hsp__breadcrumb a:hover { color: var(--hsp-purple-glow); }
.hsp__breadcrumb-sep { opacity: .5; }
.hsp__breadcrumb-current { color: var(--hsp-fg); font-weight: 600; }
/* ════════════════════════════════════════════════════════════
HERO
════════════════════════════════════════════════════════════ */
.hsp__hero {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: 48px;
align-items: flex-start;
margin-bottom: 60px;
}
@media (max-width: 900px) {
.hsp__hero { grid-template-columns: 1fr; gap: 28px; }
}
/* ════════════════════════════════════════════════════════════
GALLERY
════════════════════════════════════════════════════════════ */
.hsp__gallery {
position: sticky;
top: 24px;
display: grid;
grid-template-columns: 80px 1fr;
gap: 14px;
direction: rtl;
}
.hsp__gallery [data-hsp-thumbs] { order: 1; }
.hsp__gallery [data-hsp-stage] { order: 2; }
@media (max-width: 900px) {
.hsp__gallery {
position: static;
grid-template-columns: 1fr;
}
.hsp__gallery [data-hsp-stage] { order: 1; }
.hsp__gallery [data-hsp-thumbs] { order: 2; }
}
.hsp__stage {
position: relative;
background: var(--hsp-card-bg-2);
border: 1px solid var(--hsp-border);
border-radius: var(--hsp-radius-lg);
overflow: hidden;
aspect-ratio: 4/5;
box-shadow: var(--hsp-shadow);
}
.hsp__stage-inner {
position: absolute;
inset: 0;
cursor: zoom-in;
}
.hsp__main-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s cubic-bezier(.22,1,.36,1);
display: block;
}
.hsp__stage-inner.is-zoomed .hsp__main-img {
cursor: zoom-out;
transform: scale(1.6);
}
.hsp__zoom-btn {
position: absolute;
bottom: 14px;
left: 14px;
width: 40px; height: 40px;
border-radius: 999px;
background: rgba(0,0,0,.55);
color: #fff;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: transform .2s;
}
.hsp__zoom-btn:hover { transform: scale(1.08); }
.hsp__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px; height: 44px;
border-radius: 999px;
background: rgba(0,0,0,.5);
color: #fff;
border: 0;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity .2s, transform .2s;
}
.hsp__stage:hover .hsp__nav { opacity: 1; }
.hsp__nav:hover { transform: translateY(-50%) scale(1.08); background: var(--hsp-purple); }
.hsp__nav--prev { right: 12px; }
.hsp__nav--next { left: 12px; }
@media (max-width: 900px) { .hsp__nav { opacity: .85; } }
.hsp__counter {
position: absolute;
bottom: 14px;
right: 14px;
padding: 5px 12px;
border-radius: 999px;
background: rgba(0,0,0,.55);
color: #fff;
font-size: 12px;
font-weight: 700;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.hsp__badge {
position: absolute;
top: 14px;
right: 14px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 999px;
background: linear-gradient(135deg, var(--hsp-purple-glow), var(--hsp-purple));
color: #fff;
font-size: 12.5px;
font-weight: 800;
box-shadow: 0 8px 22px rgba(231, 166, 174, 0.45);
}
.hsp__badge--out {
right: auto; left: 14px;
background: linear-gradient(135deg, #6b7280, #374151);
box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.hsp__thumbs {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 600px;
overflow-y: auto;
padding: 2px;
scrollbar-width: thin;
scrollbar-color: var(--hsp-purple) transparent;
}
.hsp__thumbs::-webkit-scrollbar { width: 4px; }
.hsp__thumbs::-webkit-scrollbar-thumb { background: var(--hsp-purple); border-radius: 2px; }
@media (max-width: 900px) {
.hsp__thumbs {
flex-direction: row;
max-height: none;
overflow-x: auto;
overflow-y: hidden;
padding: 4px 2px;
}
}
.hsp__thumb {
flex: 0 0 auto;
width: 80px;
height: 80px;
border-radius: 12px;
overflow: hidden;
background: 0;
border: 2px solid transparent;
padding: 0;
cursor: pointer;
transition: all .2s;
position: relative;
}
.hsp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hsp__thumb:hover { border-color: var(--hsp-purple-glow); }
.hsp__thumb.is-active {
border-color: var(--hsp-purple);
box-shadow: 0 0 0 3px rgba(107, 45, 92, .18);
}
.hsp__thumb.is-active::after {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
background: linear-gradient(135deg, rgba(231,166,174,.18), transparent 60%);
pointer-events: none;
}
/* ════════════════════════════════════════════════════════════
INFO COLUMN
════════════════════════════════════════════════════════════ */
.hsp__info {
display: flex;
flex-direction: column;
gap: 18px;
}
.hsp__cat-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 999px;
background: var(--hsp-purple-soft);
color: var(--hsp-purple-glow);
font-size: 12px;
font-weight: 700;
text-decoration: none;
align-self: flex-start;
}
.hsp__cat-pill:hover { background: var(--hsp-purple); color: #fff; }
.hsp__title {
font-size: clamp(22px, 3vw, 32px);
font-weight: 800;
line-height: 1.35;
margin: 0;
color: var(--hsp-fg);
}
.hsp__rating {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.hsp__stars {
display: inline-block;
position: relative;
font-size: 18px;
color: rgba(255,255,255,0.18);
letter-spacing: 2px;
white-space: nowrap;
line-height: 1;
}
.haika-theme-light .hsp__stars { color: rgba(107, 45, 92, 0.18); }
.hsp__stars::before {
content: "★★★★★";
position: absolute;
top: 0; right: 0;
width: calc(var(--rating) / 5 * 100%);
color: #f59e0b;
overflow: hidden;
white-space: nowrap;
}
.hsp__rating-num { font-weight: 800; color: var(--hsp-fg); }
.hsp__rating-count {
font-size: 12.5px;
color: var(--hsp-fg-muted);
text-decoration: none;
}
.hsp__rating-count:hover { color: var(--hsp-purple-glow); }
/* Price block */
.hsp__price-block {
background: linear-gradient(135deg, var(--hsp-purple-soft), rgba(231, 166, 174, 0.04));
border: 1px solid var(--hsp-border);
border-radius: var(--hsp-radius);
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
}
.hsp__price {
font-size: 26px;
font-weight: 800;
color: var(--hsp-fg);
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.hsp__price .woocommerce-Price-amount,
.hsp__price .price ins,
.hsp__price ins {
color: var(--hsp-purple-glow);
text-decoration: none;
font-weight: 800;
}
.hsp__price del {
font-size: 16px;
color: var(--hsp-fg-muted);
opacity: .7;
font-weight: 500;
}
.hsp__price .woocommerce-Price-currencySymbol {
font-size: 14px;
font-weight: 600;
opacity: .75;
margin-inline-start: 4px;
}
.hsp__save-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 999px;
background: var(--hsp-success);
color: #fff;
font-size: 12.5px;
font-weight: 700;
}
.hsp__save-pill strong { font-weight: 900; margin: 0 3px; }
.hsp__short-desc {
color: var(--hsp-fg-muted);
line-height: 1.85;
font-size: 14.5px;
}
.hsp__short-desc p { margin: 0 0 8px; }
/* ───── Selected variation preview ───── */
.hsp__selected-preview {
border-radius: var(--hsp-radius);
background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.03));
border: 1px solid rgba(16, 185, 129, 0.35);
padding: 14px 16px;
animation: hsp-pop .35s cubic-bezier(.22,1,.36,1);
}
.hsp__selected-preview[hidden] { display: none; }
.hsp__selected-preview-inner {
display: flex;
align-items: center;
gap: 12px;
}
.hsp__selected-preview-icon {
width: 36px; height: 36px;
border-radius: 999px;
background: var(--hsp-success);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hsp__selected-preview-label {
font-size: 12.5px;
color: var(--hsp-success);
font-weight: 700;
margin-bottom: 2px;
}
.hsp__selected-preview-attrs {
font-size: 14.5px;
color: var(--hsp-fg);
font-weight: 700;
}
@keyframes hsp-pop {
from { opacity: 0; transform: scale(.96) translateY(8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
/* ════════════════════════════════════════════════════════════
CART FORM — Variation Selector زیبا
════════════════════════════════════════════════════════════ */
.hsp__cart-form {
background: var(--hsp-card-bg);
border: 1px solid var(--hsp-border);
border-radius: var(--hsp-radius);
padding: 20px;
box-shadow: var(--hsp-shadow);
}
.hsp__cart-form .variations {
width: 100%;
border-collapse: collapse;
margin: 0 0 18px;
}
.hsp__cart-form .variations tr {
display: block;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--hsp-border);
}
.hsp__cart-form .variations tr:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.hsp__cart-form .variations .label {
display: block;
margin-bottom: 10px;
}
.hsp__cart-form .variations .label label {
font-size: 13px;
font-weight: 700;
color: var(--hsp-fg);
}
.hsp__cart-form .variations .value {
display: block;
}
.hsp__cart-form .variations select {
width: 100%;
padding: 12px 14px;
border-radius: var(--hsp-radius-sm);
border: 1.5px solid var(--hsp-border);
background: var(--hsp-card-bg-2);
color: var(--hsp-fg);
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: border-color .15s, box-shadow .15s;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E7A6AE' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 14px center;
padding-left: 40px;
}
[dir="ltr"] .hsp__cart-form .variations select {
background-position: right 14px center;
padding-left: 14px;
padding-right: 40px;
}
.hsp__cart-form .variations select:focus {
outline: 0;
border-color: var(--hsp-purple-glow);
box-shadow: 0 0 0 3px rgba(231, 166, 174, .2);
}
.hsp__cart-form .reset_variations {
display: inline-block;
margin-top: 10px;
font-size: 12px;
color: var(--hsp-fg-muted);
text-decoration: none;
}
.hsp__cart-form .reset_variations:hover { color: var(--hsp-danger); }
.hsp__cart-form .single_variation_wrap {
display: flex;
flex-direction: column;
gap: 14px;
}
.hsp__cart-form .woocommerce-variation { margin: 0; }
.hsp__cart-form .woocommerce-variation-price { display: none; /* قیمت در price-block بالا نمایش داده میشود */ }
.hsp__cart-form .woocommerce-variation-availability {
font-size: 13px;
color: var(--hsp-fg-muted);
margin: 0;
}
.hsp__cart-form .stock.out-of-stock { color: var(--hsp-danger); font-weight: 700; }
.hsp__cart-form .stock.in-stock { color: var(--hsp-success); font-weight: 700; }
.hsp__cart-form .woocommerce-variation-description { color: var(--hsp-fg-muted); font-size: 13px; }
.hsp__cart-form .variations_button {
display: flex;
align-items: stretch;
gap: 12px;
flex-wrap: wrap;
}
.hsp__cart-form .quantity {
display: flex;
align-items: center;
background: var(--hsp-card-bg-2);
border: 1.5px solid var(--hsp-border);
border-radius: var(--hsp-radius-sm);
padding: 4px;
gap: 4px;
}
.hsp__cart-form .quantity input.qty {
width: 50px;
padding: 8px 4px;
background: transparent;
border: 0;
color: var(--hsp-fg);
font-size: 15px;
font-weight: 700;
text-align: center;
font-family: inherit;
-moz-appearance: textfield;
}
.hsp__cart-form .quantity input.qty::-webkit-outer-spin-button,
.hsp__cart-form .quantity input.qty::-webkit-inner-spin-button {
-webkit-appearance: none; margin: 0;
}
.hsp__cart-form .single_add_to_cart_button {
flex: 1;
min-width: 200px;
padding: 14px 28px;
border-radius: var(--hsp-radius-sm);
background: linear-gradient(135deg, var(--hsp-purple-glow), var(--hsp-purple));
color: #fff;
border: 0;
font-weight: 800;
font-size: 15.5px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
box-shadow: 0 12px 30px rgba(231, 166, 174, 0.38);
transition: transform .18s, box-shadow .18s;
letter-spacing: .3px;
}
.hsp__cart-form .single_add_to_cart_button:hover:not(.disabled):not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 16px 38px rgba(231, 166, 174, 0.55);
}
.hsp__cart-form .single_add_to_cart_button.disabled,
.hsp__cart-form .single_add_to_cart_button:disabled {
opacity: .55;
cursor: not-allowed;
box-shadow: none;
}
.hsp__cart-form .single_add_to_cart_button::before {
content: "";
width: 18px; height: 18px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21a1 1 0 1 1-1-1 1 1 0 0 1 1 1zM20 21a1 1 0 1 1-1-1 1 1 0 0 1 1 1zM1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21a1 1 0 1 1-1-1 1 1 0 0 1 1 1zM20 21a1 1 0 1 1-1-1 1 1 0 0 1 1 1zM1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Hide plugin's default delivery box — ما خودمون نمایش میدیم */
#gpbc-variation-info { display: none !important; }
/* ────── Delivery (shipping + last updated) ────── */
.hsp__delivery {
display: grid;
gap: 12px;
margin: 0;
animation: hsp-pop .35s cubic-bezier(.22,1,.36,1);
}
.hsp__delivery[hidden] { display: none; }
.hsp__delivery-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--hsp-radius-sm);
background: var(--hsp-card-bg);
border: 1px solid var(--hsp-border);
}
.hsp__delivery-row--shipping { border-left: 3px solid var(--hsp-purple-glow); }
[dir="rtl"] .hsp__delivery-row--shipping { border-left: 0; border-right: 3px solid var(--hsp-purple-glow); }
.hsp__delivery-row--updated { border-left: 3px solid var(--hsp-success); }
[dir="rtl"] .hsp__delivery-row--updated { border-left: 0; border-right: 3px solid var(--hsp-success); }
.hsp__delivery-icon {
width: 38px; height: 38px;
border-radius: 999px;
background: var(--hsp-purple-soft);
color: var(--hsp-purple-glow);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hsp__delivery-row--updated .hsp__delivery-icon { background: rgba(16, 185, 129, 0.12); color: var(--hsp-success); }
.hsp__delivery-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hsp__delivery-label { font-size: 11.5px; color: var(--hsp-fg-muted); }
.hsp__delivery-value { font-size: 14px; color: var(--hsp-fg); font-weight: 700; }
/* ────── Trust badges ────── */
.hsp__trust {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.hsp__trust-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: var(--hsp-radius-sm);
background: var(--hsp-card-bg);
border: 1px solid var(--hsp-border);
color: var(--hsp-fg);
font-size: 12.5px;
transition: border-color .15s, transform .18s;
}
.hsp__trust-item:hover { border-color: var(--hsp-purple-glow); transform: translateY(-2px); }
.hsp__trust-item > svg { color: var(--hsp-purple-glow); flex-shrink: 0; }
.hsp__trust-item strong { display: block; font-weight: 800; font-size: 13px; margin-bottom: 1px; }
.hsp__trust-item span { color: var(--hsp-fg-muted); font-size: 11.5px; }
/* ────── Meta footer ────── */
.hsp__meta {
display: grid;
gap: 8px;
padding: 14px 0 0;
border-top: 1px dashed var(--hsp-border);
margin-top: 4px;
}
.hsp__meta-row {
font-size: 12.5px;
color: var(--hsp-fg-muted);
display: flex;
flex-wrap: wrap;
gap: 4px 6px;
line-height: 1.7;
}
.hsp__meta-row span { font-weight: 700; color: var(--hsp-fg); margin-inline-end: 4px; }
.hsp__meta-row a { color: var(--hsp-purple-glow); text-decoration: none; }
.hsp__meta-row a:hover { text-decoration: underline; }
.hsp__meta-row code {
font-family: 'Courier New', monospace;
background: var(--hsp-purple-soft);
color: var(--hsp-fg);
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 700;
}
/* Share */
.hsp__share {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
font-size: 12.5px;
color: var(--hsp-fg-muted);
}
.hsp__share > span { font-weight: 700; color: var(--hsp-fg); margin-inline-end: 4px; }
.hsp__share-btn {
width: 32px; height: 32px;
border-radius: 999px;
border: 1px solid var(--hsp-border);
background: var(--hsp-card-bg);
color: var(--hsp-fg-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all .15s;
text-decoration: none;
}
.hsp__share-btn:hover { background: var(--hsp-purple); color: #fff; border-color: var(--hsp-purple); transform: translateY(-2px); }
/* ════════════════════════════════════════════════════════════
TABS
════════════════════════════════════════════════════════════ */
.hsp__tabs {
background: var(--hsp-card-bg);
border: 1px solid var(--hsp-border);
border-radius: var(--hsp-radius-lg);
overflow: hidden;
margin-bottom: 60px;
box-shadow: var(--hsp-shadow);
}
.hsp__tabs-nav {
display: flex;
background: var(--hsp-card-bg-2);
border-bottom: 1px solid var(--hsp-border);
overflow-x: auto;
scrollbar-width: none;
}
.hsp__tabs-nav::-webkit-scrollbar { display: none; }
.hsp__tab-btn {
flex: 1;
min-width: 120px;
padding: 16px 20px;
background: 0;
border: 0;
color: var(--hsp-fg-muted);
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
position: relative;
transition: color .15s;
white-space: nowrap;
}
.hsp__tab-btn:hover { color: var(--hsp-fg); }
.hsp__tab-btn.is-active { color: var(--hsp-purple-glow); }
.hsp__tab-btn.is-active::after {
content: "";
position: absolute;
bottom: 0; right: 0; left: 0;
height: 3px;
background: linear-gradient(90deg, var(--hsp-purple-glow), var(--hsp-purple));
}
.hsp__tab-panel {
padding: 26px 28px;
color: var(--hsp-fg);
font-size: 14.5px;
line-height: 1.95;
animation: hsp-fade .25s ease;
}
.hsp__tab-panel[hidden] { display: none !important; }
@keyframes hsp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
/* WC native attribute table inside tab */
.hsp__tab-panel .woocommerce-product-attributes,
.hsp__tab-panel .shop_attributes {
width: 100%;
border-collapse: collapse;
}
.hsp__tab-panel .woocommerce-product-attributes th,
.hsp__tab-panel .shop_attributes th {
width: 30%;
text-align: start;
padding: 12px 14px;
background: var(--hsp-card-bg-2);
border-bottom: 1px solid var(--hsp-border);
color: var(--hsp-fg);
font-weight: 700;
font-size: 13.5px;
}
.hsp__tab-panel .woocommerce-product-attributes td,
.hsp__tab-panel .shop_attributes td {
padding: 12px 14px;
border-bottom: 1px solid var(--hsp-border);
color: var(--hsp-fg-muted);
font-size: 13.5px;
}
/* WC review form */
.hsp__tab-panel #reviews { color: var(--hsp-fg); }
.hsp__tab-panel #reviews .commentlist {
list-style: none;
padding: 0;
margin: 0 0 20px;
display: grid;
gap: 14px;
}
.hsp__tab-panel #reviews .comment {
background: var(--hsp-card-bg-2);
padding: 16px;
border-radius: var(--hsp-radius-sm);
}
.hsp__tab-panel #review_form input[type="text"],
.hsp__tab-panel #review_form input[type="email"],
.hsp__tab-panel #review_form textarea {
width: 100%;
padding: 10px 14px;
border-radius: var(--hsp-radius-sm);
border: 1.5px solid var(--hsp-border);
background: var(--hsp-card-bg-2);
color: var(--hsp-fg);
font-family: inherit;
font-size: 13.5px;
margin-top: 6px;
}
.hsp__tab-panel #review_form .submit {
background: linear-gradient(135deg, var(--hsp-purple-glow), var(--hsp-purple));
color: #fff;
border: 0;
padding: 10px 22px;
border-radius: var(--hsp-radius-sm);
font-weight: 700;
cursor: pointer;
}
/* ════════════════════════════════════════════════════════════
RELATED
════════════════════════════════════════════════════════════ */
.hsp__related-head { margin-bottom: 22px; }
.hsp__related-title {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: clamp(18px, 2.4vw, 24px);
font-weight: 800;
margin: 0;
}
.hsp__related-title > svg { color: var(--hsp-purple-glow); }
.hsp__related-grid { margin: 0; }
@media (max-width: 1100px) { .hsp__related-grid.haika-products--cols-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .hsp__related-grid.haika-products--cols-4 { grid-template-columns: repeat(2, 1fr); } }
/* ════════════════════════════════════════════════════════════
STICKY BAR (mobile)
════════════════════════════════════════════════════════════ */
.hsp__sticky-bar {
position: fixed;
bottom: 0; right: 0; left: 0;
z-index: 9990;
display: none;
align-items: center;
gap: 12px;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
background: var(--hsp-bg);
border-top: 1px solid var(--hsp-border);
box-shadow: 0 -8px 30px rgba(0,0,0,.35);
transform: translateY(110%);
transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.hsp__sticky-bar.is-visible { transform: translateY(0); }
.hsp__sticky-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.hsp__sticky-title {
font-size: 12.5px;
color: var(--hsp-fg);
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hsp__sticky-price { font-size: 13.5px; color: var(--hsp-purple-glow); font-weight: 800; }
.hsp__sticky-price del { font-size: 11px; color: var(--hsp-fg-muted); margin-inline-end: 5px; font-weight: 500; }
.hsp__sticky-cta {
background: linear-gradient(135deg, var(--hsp-purple-glow), var(--hsp-purple));
color: #fff;
border: 0;
padding: 12px 22px;
border-radius: var(--hsp-radius-sm);
font-weight: 800;
font-size: 13.5px;
display: inline-flex;
align-items: center;
gap: 7px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(231, 166, 174, 0.4);
flex-shrink: 0;
}
@media (max-width: 900px) { .hsp__sticky-bar { display: flex; } }
/* ════════════════════════════════════════════════════════════
Reveal animation on scroll
════════════════════════════════════════════════════════════ */
.hsp__reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);
}
.hsp__reveal.is-revealed { opacity: 1; transform: translateY(0); }
/* ════════════════════════════════════════════════════════════
Mobile fine-tuning
════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
.hsp { padding: 16px 12px 100px; }
.hsp__hero { gap: 22px; margin-bottom: 40px; }
.hsp__stage { aspect-ratio: 3/4; border-radius: var(--hsp-radius); }
.hsp__thumb { width: 60px; height: 60px; }
.hsp__price-block { padding: 14px 16px; }
.hsp__price { font-size: 22px; }
.hsp__cart-form { padding: 16px; }
.hsp__cart-form .single_add_to_cart_button { font-size: 14.5px; padding: 13px 22px; }
.hsp__trust { grid-template-columns: 1fr; }
.hsp__tab-panel { padding: 18px 16px; }
}
/* ────── Attribute chips inside "selected variation" preview ────── */
.hsp__selected-preview-attrs {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
font-size: 13.5px;
}
.hsp__attr-chip {
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: rgba(16, 185, 129, 0.18);
color: var(--hsp-fg);
font-size: 12.5px;
font-weight: 700;
gap: 4px;
}
.hsp__attr-chip b { color: var(--hsp-success); font-weight: 700; font-size: 11.5px; }
/* CTA pulse when sticky bar nudges */
@keyframes hsp-pulse {
0% { box-shadow: 0 0 0 0 rgba(231, 166, 174, .55); }
70% { box-shadow: 0 0 0 22px rgba(231, 166, 174, 0); }
100% { box-shadow: 0 0 0 0 rgba(231, 166, 174, 0); }
}
.hsp-pulse { animation: hsp-pulse 1s ease-out; }
/* Smooth image-change skeleton */
.hsp__main-img.is-changing { opacity: 0.6; transition: opacity .15s; }
/* ════════════════════════════════════════════════════════════════
✨ PREMIUM OVERHAUL — v2.1
• CLS-safe dynamic zone with smooth max-height transitions
• Premium typography rhythm
• Lightbox/fullscreen image view
• Refined gallery on desktop (sticky + improved layout)
• Better micro-interactions
═════════════════════════════════════════════════════════════════ */
/* ───── Dynamic Zone — Zero layout shift ───── */
.hsp__dynamic-zone {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0;
/* فضای نرم بین cart-form و trust */
min-height: 0;
}
.hsp__dyn-box {
overflow: hidden;
max-height: 400px;
opacity: 1;
transition:
max-height .4s cubic-bezier(.22, 1, .36, 1),
opacity .25s ease,
margin .3s ease,
padding .3s ease;
}
.hsp__dyn-box[hidden] {
display: block !important;
max-height: 0 !important;
opacity: 0 !important;
margin: 0 !important;
padding-block: 0 !important;
border-top-width: 0 !important;
border-bottom-width: 0 !important;
pointer-events: none;
}
.hsp__dyn-plugin-slot:empty {
display: none;
}
/* ───── Premium hero card upgrade ───── */
.hsp__hero {
/* increased breathing room on desktop */
margin-bottom: 80px;
}
/* چیدمان دسکتاپ hero در بخش «DESKTOP REDESIGN (V3)» انتهای فایل یکپارچه شده.
بلوکهای قبلی (double-sticky + grid متناقض) حذف شدند تا drift رفع شود. */
/* ───── Refined typography rhythm ───── */
.hsp__title {
letter-spacing: -0.015em;
line-height: 1.25;
}
.hsp__title::after {
content: "";
display: block;
width: 50px;
height: 3px;
background: linear-gradient(90deg, var(--hsp-purple-glow), transparent);
border-radius: 999px;
margin-top: 14px;
}
/* ───── Premium price block — luxurious ───── */
.hsp__price-block {
position: relative;
overflow: hidden;
}
.hsp__price-block::before {
content: "";
position: absolute;
top: 0;
right: -20%;
width: 60%;
height: 200%;
background: linear-gradient(45deg, transparent 30%, rgba(231, 166, 174, 0.06) 50%, transparent 70%);
transform: rotate(-15deg);
pointer-events: none;
}
/* ───── Gallery thumbs — refined hover ───── */
.hsp__thumb {
transition: all .25s cubic-bezier(.22, 1, .36, 1);
box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.hsp__thumb:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 8px 22px rgba(107,45,92,.35);
}
.hsp__thumb.is-active {
box-shadow: 0 0 0 3px var(--hsp-purple), 0 8px 22px rgba(107,45,92,.35);
}
/* ───── Main image — cursor zoom hint ───── */
.hsp__main-img {
cursor: zoom-in;
}
.hsp__main-img.is-zoomed,
.hsp__stage-inner.is-zoomed .hsp__main-img {
cursor: zoom-out;
}
/* ───── Selected preview — premium pulse ───── */
.hsp__selected-preview {
background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(231, 166, 174, 0.08));
border-color: rgba(16, 185, 129, 0.4);
box-shadow: 0 4px 20px rgba(16, 185, 129, 0.1);
}
.hsp__selected-preview-icon {
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
animation: hsp-check-bounce .55s cubic-bezier(.22, 1, .36, 1);
}
@keyframes hsp-check-bounce {
0% { transform: scale(0) rotate(-90deg); }
60% { transform: scale(1.15) rotate(0deg); }
100% { transform: scale(1) rotate(0deg); }
}
/* ───── LIGHTBOX (fullscreen image) ───── */
.hsp-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(10, 6, 18, 0.92);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility 0s linear .3s;
pointer-events: none;
}
.hsp-lightbox.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity .3s ease, visibility 0s linear 0s;
}
.hsp-lightbox__img {
max-width: 92vw;
max-height: 88vh;
object-fit: contain;
border-radius: 14px;
box-shadow: 0 30px 80px rgba(0,0,0,.6);
transform: scale(.94);
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.hsp-lightbox.is-open .hsp-lightbox__img {
transform: scale(1);
}
.hsp-lightbox__close {
position: absolute;
top: 18px;
left: 18px;
width: 46px; height: 46px;
border-radius: 999px;
background: rgba(255,255,255,.12);
color: #fff;
border: 0;
cursor: pointer;
font-size: 22px;
font-family: inherit;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, transform .15s;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
[dir="rtl"] .hsp-lightbox__close { left: auto; right: 18px; }
.hsp-lightbox__close:hover {
background: rgba(239, 68, 68, .3);
transform: scale(1.08);
}
.hsp-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 54px; height: 54px;
border-radius: 999px;
background: rgba(255,255,255,.1);
color: #fff;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .15s, transform .15s;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.hsp-lightbox__nav:hover {
background: var(--hsp-purple, #6B2D5C);
transform: translateY(-50%) scale(1.1);
}
.hsp-lightbox__nav--prev { right: 24px; }
.hsp-lightbox__nav--next { left: 24px; }
[dir="rtl"] .hsp-lightbox__nav--prev { right: auto; left: 24px; }
[dir="rtl"] .hsp-lightbox__nav--next { left: auto; right: 24px; }
@media (max-width: 600px) {
.hsp-lightbox__nav { width: 42px; height: 42px; }
.hsp-lightbox__nav--prev { right: 12px; }
.hsp-lightbox__nav--next { left: 12px; }
[dir="rtl"] .hsp-lightbox__nav--prev { left: 12px; }
[dir="rtl"] .hsp-lightbox__nav--next { right: 12px; }
.hsp-lightbox__close { top: 12px; left: 12px; width: 40px; height: 40px; }
[dir="rtl"] .hsp-lightbox__close { right: 12px; }
}
/* ───── Trust badges premium ───── */
.hsp__trust-item {
position: relative;
overflow: hidden;
}
.hsp__trust-item::before {
content: "";
position: absolute;
top: 0; left: -100%;
width: 100%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(231, 166, 174, .08), transparent);
transition: left .6s ease;
}
.hsp__trust-item:hover::before {
left: 100%;
}
/* ───── Cart form — premium glow ───── */
.hsp__cart-form {
position: relative;
overflow: hidden;
}
.hsp__cart-form::after {
content: "";
position: absolute;
top: -50%;
right: -20%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(231, 166, 174, .12), transparent 70%);
pointer-events: none;
}
/* ───── Mobile gallery — full-bleed feel ───── */
@media (max-width: 600px) {
.hsp__stage {
border-radius: 12px;
margin: 0 -4px;
box-shadow: 0 12px 32px rgba(107, 45, 92, .15);
}
.hsp__hero {
gap: 24px;
}
.hsp__thumb {
width: 64px;
height: 64px;
}
}
/* ───── Smooth section dividers ───── */
.hsp__tabs,
.hsp__related {
position: relative;
}
.hsp__tabs::before {
content: "";
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--hsp-purple-glow), transparent);
border-radius: 999px;
}
/* ───── prefers-reduced-motion ───── */
@media (prefers-reduced-motion: reduce) {
.hsp__dyn-box,
.hsp__thumb,
.hsp__main-img,
.hsp-lightbox,
.hsp-lightbox__img,
.hsp__selected-preview-icon {
animation: none !important;
transition: none !important;
}
}
/* ════════════════════════════════════════════════════════════════
✨ PREMIUM OVERHAUL — v2.2
• Gallery dominant — 62% width on desktop
• Bigger main image + bigger thumbs
• Cinematic micro-interactions
• Scroll-driven reveals & parallax
• CTA magnetic-hover
═════════════════════════════════════════════════════════════════ */
/* گالری دسکتاپ — grid/ابعاد در بخش V3 انتهای فایل کنترل میشود (بدون hero override). */
@media (min-width: 1024px) {
.hsp__thumb { border-radius: 14px; }
}
/* ═══ Parallax tilt on stage (subtle) ═══ */
.hsp__stage {
transform-style: preserve-3d;
perspective: 1200px;
transition: box-shadow .35s cubic-bezier(.22,1,.36,1);
}
.hsp__stage-inner {
transition: transform .4s cubic-bezier(.22,1,.36,1);
will-change: transform;
}
.hsp__stage:hover {
box-shadow: 0 30px 80px rgba(107, 45, 92, .35);
}
/* ═══ Main image — depth & lift on hover ═══ */
.hsp__main-img {
transition: transform .5s cubic-bezier(.22,1,.36,1), filter .35s;
}
.hsp__stage:hover .hsp__main-img:not(.is-zoomed) {
transform: scale(1.02);
filter: brightness(1.05) saturate(1.08);
}
/* ═══ Premium badge (sale/discount) — floating ═══ */
.hsp__badge--sale {
animation: hsp-badge-float 3.5s ease-in-out infinite;
box-shadow: 0 8px 28px rgba(231, 166, 174, .55), 0 0 0 4px rgba(231, 166, 174, .12);
}
@keyframes hsp-badge-float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-4px) rotate(-2deg); }
}
/* ═══ Premium counter — glass pill ═══ */
.hsp__counter {
background: rgba(0,0,0,.65) !important;
border: 1px solid rgba(231, 166, 174, .35);
font-family: 'Courier New', monospace;
letter-spacing: .08em;
padding: 7px 16px !important;
}
/* ═══ Title — animated underline on load ═══ */
.hsp__title::after {
animation: hsp-underline-expand 1.2s .3s cubic-bezier(.22,1,.36,1) both;
transform-origin: right;
}
@keyframes hsp-underline-expand {
0% { width: 0; opacity: 0; }
100% { width: 50px; opacity: 1; }
}
/* ═══ Price — gradient shimmer ═══ */
@keyframes hsp-price-shimmer {
0% { background-position: -100% 0; }
100% { background-position: 200% 0; }
}
.hsp__price ins,
.hsp__price .woocommerce-Price-amount {
background: linear-gradient(90deg,
var(--hsp-purple-glow) 0%,
#fff 50%,
var(--hsp-purple-glow) 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: hsp-price-shimmer 4s linear infinite;
}
/* ═══ Save pill — bounce-in ═══ */
.hsp__save-pill {
animation: hsp-save-bounce .8s .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes hsp-save-bounce {
0% { transform: scale(0) rotate(-90deg); opacity: 0; }
60% { transform: scale(1.15) rotate(0deg); opacity: 1; }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
/* ═══ Stage indicator — کلیک برای بزرگنمایی ═══ */
.hsp__stage::after {
content: "🔍 برای بزرگنمایی کلیک کنید";
position: absolute;
bottom: 14px;
right: 50%;
transform: translateX(50%) translateY(8px);
background: rgba(0,0,0,.7);
color: #fff;
font-size: 11.5px;
padding: 6px 14px;
border-radius: 999px;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
opacity: 0;
transition: opacity .25s, transform .35s cubic-bezier(.22,1,.36,1);
pointer-events: none;
z-index: 4;
white-space: nowrap;
}
.hsp__stage:hover::after {
opacity: 1;
transform: translateX(50%) translateY(0);
}
[dir="rtl"] .hsp__stage::after {
right: 50%;
}
@media (hover: none) {
.hsp__stage::after { display: none; }
}
/* ═══ CTA Button — magnetic glow + ripple ═══ */
.hsp__cart-form .single_add_to_cart_button {
position: relative;
overflow: hidden;
letter-spacing: .04em !important;
}
.hsp__cart-form .single_add_to_cart_button::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform .8s cubic-bezier(.22,1,.36,1);
pointer-events: none;
}
.hsp__cart-form .single_add_to_cart_button:hover::before {
transform: translateX(100%);
}
.hsp__cart-form .single_add_to_cart_button:hover:not(:disabled) {
transform: translateY(-3px) !important;
box-shadow: 0 20px 45px rgba(107,45,92,.55), 0 0 30px rgba(231,166,174,.35) !important;
}
/* ═══ Trust items — stagger reveal on scroll ═══ */
.hsp__trust { perspective: 1000px; }
.hsp__trust-item {
opacity: 0;
transform: translateY(20px) rotateX(-15deg);
transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
.hsp__trust.is-revealed .hsp__trust-item {
opacity: 1;
transform: translateY(0) rotateX(0);
}
.hsp__trust.is-revealed .hsp__trust-item:nth-child(1) { transition-delay: .05s; }
.hsp__trust.is-revealed .hsp__trust-item:nth-child(2) { transition-delay: .15s; }
.hsp__trust.is-revealed .hsp__trust-item:nth-child(3) { transition-delay: .25s; }
.hsp__trust.is-revealed .hsp__trust-item:nth-child(4) { transition-delay: .35s; }
/* ═══ Selected preview — glow pulse when new ═══ */
.hsp__selected-preview {
animation: hsp-glow-once 1.2s cubic-bezier(.22,1,.36,1) both;
}
@keyframes hsp-glow-once {
0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .8); }
50% { box-shadow: 0 0 0 12px rgba(16, 185, 129, .15); }
100% { box-shadow: 0 4px 20px rgba(16, 185, 129, .1); }
}
/* ═══ Thumb — premium float on hover ═══ */
.hsp__thumb {
position: relative;
overflow: hidden;
}
.hsp__thumb::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(135deg, rgba(231, 166, 174, .2), transparent 60%);
opacity: 0;
transition: opacity .25s;
pointer-events: none;
}
.hsp__thumb:hover::after { opacity: 1; }
.hsp__thumb img {
transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.hsp__thumb:hover img {
transform: scale(1.08);
}
/* ═══ Breadcrumb — premium feel ═══ */
.hsp__breadcrumb {
padding: 10px 18px;
background: rgba(255,255,255,.02);
border: 1px solid var(--hsp-border);
border-radius: 999px;
display: inline-flex;
width: auto;
}
/* ═══ Cat pill — premium ═══ */
.hsp__cat-pill {
transition: all .25s cubic-bezier(.22,1,.36,1);
box-shadow: 0 4px 14px rgba(231, 166, 174, .15);
}
.hsp__cat-pill:hover {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(231, 166, 174, .35);
}
/* ═══ Mobile gallery upgrade ═══ */
@media (max-width: 600px) {
.hsp__stage {
aspect-ratio: 3 / 4 !important;
max-height: 80vh;
}
.hsp__stage::after { display: none; } /* hint روی موبایل نه */
.hsp__thumbs {
gap: 10px !important;
padding: 6px 2px !important;
}
}
/* ═══ Loading skeleton — vary گالری ═══ */
.hsp__main-img.is-changing {
filter: blur(8px) saturate(.7);
opacity: 0.7;
transition: filter .2s, opacity .2s;
}
/* ═══ Smooth scroll for snap-to-tab ═══ */
html { scroll-behavior: smooth; }
/* ════════════════════════════════════════════════════════════════
📱 MOBILE UX UPGRADE — v2.3
• Sticky cart bar پایین موبایل
• Dots indicator روی تصویر + پنهان کردن thumbs در موبایل
• Swatch buttons برای سایز
• Swipe hint
═════════════════════════════════════════════════════════════════ */
/* ═══ Swatches (تبدیل dropdown → دکمه) ═══ */
.hsp__swatches {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 8px;
}
.hsp__swatch {
min-width: 52px;
height: 44px;
padding: 0 14px;
border: 1.5px solid var(--hsp-border);
border-radius: 12px;
background: rgba(255,255,255,.03);
color: var(--hsp-text);
font-family: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all .2s cubic-bezier(.22,1,.36,1);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
}
.hsp__swatch:hover {
border-color: var(--hsp-purple);
background: rgba(231,166,174,.08);
transform: translateY(-1px);
}
.hsp__swatch.is-active {
border-color: var(--hsp-purple);
background: linear-gradient(135deg, var(--hsp-purple) 0%, var(--hsp-purple-deep) 100%);
color: #fff;
box-shadow: 0 6px 18px rgba(107,45,92,.4), 0 0 0 3px rgba(231,166,174,.18);
}
.hsp__swatch.is-active::after {
content: "";
position: absolute;
top: -4px;
left: -4px;
width: 14px;
height: 14px;
background: var(--hsp-purple);
border-radius: 50%;
border: 2px solid var(--hsp-bg);
background-image: url("data:image/svg+xml;utf8,");
background-size: 9px;
background-repeat: no-repeat;
background-position: center;
}
[dir="rtl"] .hsp__swatch.is-active::after {
left: auto;
right: -4px;
}
/* ═══ Dots indicator روی تصویر (موبایل) ═══ */
.hsp__dots {
display: none; /* default: hidden — only show on mobile */
position: absolute;
bottom: 14px;
left: 0;
right: 0;
z-index: 3;
justify-content: center;
gap: 8px;
pointer-events: auto;
}
.hsp__dot {
width: 8px;
height: 8px;
border: 0;
padding: 0;
border-radius: 50%;
background: rgba(255,255,255,.45);
cursor: pointer;
transition: all .25s cubic-bezier(.22,1,.36,1);
box-shadow: 0 0 0 1px rgba(0,0,0,.3);
}
.hsp__dot.is-active {
background: var(--hsp-purple-glow);
width: 24px;
border-radius: 4px;
box-shadow: 0 0 12px rgba(231,166,174,.6), 0 0 0 1px rgba(0,0,0,.3);
}
/* ═══ Swipe hint (موبایل) ═══ */
.hsp__swipe-hint {
display: none; /* default hidden */
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,.75);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
color: #fff;
font-size: 12.5px;
padding: 8px 14px;
border-radius: 999px;
z-index: 4;
align-items: center;
gap: 8px;
white-space: nowrap;
animation: hsp-swipe-pulse 1.8s ease-in-out infinite;
transition: opacity .5s, transform .5s;
}
.hsp__swipe-hint svg {
display: inline-block;
width: 16px;
height: 16px;
}
.hsp__swipe-hint.is-hidden {
opacity: 0;
pointer-events: none;
transform: translateX(-50%) translateY(8px);
}
@keyframes hsp-swipe-pulse {
0%, 100% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.05); }
}
/* ═══ Sticky Cart Bar (موبایل) ═══ */
.hsp__sticky-bar {
display: none; /* default hidden */
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
padding: 10px 14px;
padding-bottom: calc(10px + env(safe-area-inset-bottom));
background: rgba(13, 10, 27, .92);
-webkit-backdrop-filter: blur(20px) saturate(1.2);
backdrop-filter: blur(20px) saturate(1.2);
border-top: 1px solid rgba(231, 166, 174, .25);
box-shadow: 0 -12px 40px rgba(0,0,0,.45);
flex-direction: row;
align-items: center;
gap: 12px;
transform: translateY(110%);
transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.hsp__sticky-bar.is-visible {
transform: translateY(0);
}
.hsp__sticky-info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
overflow: hidden;
}
.hsp__sticky-title {
font-size: 12px;
color: var(--hsp-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
}
.hsp__sticky-price {
font-size: 15px;
font-weight: 800;
color: var(--hsp-purple-glow);
}
.hsp__sticky-price .woocommerce-Price-currencySymbol {
font-size: 11px;
color: var(--hsp-text-muted);
margin-inline-start: 4px;
}
.hsp__sticky-cta {
flex-shrink: 0;
height: 50px;
padding: 0 22px;
border: 0;
border-radius: 14px;
background: linear-gradient(135deg, var(--hsp-purple) 0%, var(--hsp-purple-deep) 100%);
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 800;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
box-shadow: 0 8px 24px rgba(107,45,92,.55), 0 0 0 1px rgba(231,166,174,.25);
transition: transform .2s, box-shadow .25s;
}
.hsp__sticky-cta:active {
transform: scale(.97);
}
.hsp__sticky-cta svg {
flex-shrink: 0;
}
/* shake برای جلب توجه وقتی sticky → ابتدا ویژگی انتخاب کنید */
@keyframes hsp-shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-6px); }
40%, 80% { transform: translateX(6px); }
}
.hsp__shake { animation: hsp-shake .6s cubic-bezier(.22,1,.36,1); }
/* ═══════════════════════════════════════════
📱 موبایل-ویو: کلیهی تنظیمات
═══════════════════════════════════════════ */
@media (max-width: 720px) {
/* sticky bar فقط در موبایل */
.hsp__sticky-bar { display: flex; }
body { padding-bottom: 78px !important; } /* فضای پایین برای sticky */
/* پنهان کردن thumbs، نمایش dots */
.hsp__gallery [data-hsp-thumbs] { display: none !important; }
.hsp__dots { display: flex !important; }
.hsp__swipe-hint { display: inline-flex !important; }
/* stage تمامعرض و بدون margin اضافی */
.hsp__gallery {
grid-template-columns: 1fr !important;
gap: 0 !important;
margin-bottom: 16px;
}
.hsp__stage {
border-radius: 18px;
overflow: hidden;
position: relative;
}
/* hint کلیک برای بزرگنمایی روی موبایل پنهان */
.hsp__stage::after { display: none !important; }
/* swatches — کوچکتر و فشردهتر در موبایل */
.hsp__swatch {
min-width: 46px;
height: 40px;
font-size: 13px;
padding: 0 12px;
}
/* فاصلهی ویژگیها از تصویر را کم کن */
.hsp__cart-form { margin-top: 12px; }
.hsp__cart-form .variations { margin-bottom: 8px !important; }
.hsp__cart-form .variations tr {
display: flex !important;
flex-direction: column;
gap: 6px;
padding-bottom: 12px;
margin-bottom: 8px;
border-bottom: 1px dashed rgba(255,255,255,.08);
}
.hsp__cart-form .variations tr:last-child {
border-bottom: 0;
margin-bottom: 0;
}
.hsp__cart-form .variations label {
font-size: 13px !important;
font-weight: 600 !important;
padding: 0 !important;
color: var(--hsp-text-muted) !important;
}
/* selected-preview — کمی فشردهتر */
.hsp__selected-preview {
padding: 12px 14px !important;
gap: 12px !important;
}
.hsp__selected-preview-icon {
width: 38px !important;
height: 38px !important;
}
.hsp__selected-preview-label {
font-size: 12.5px !important;
}
/* main info column کمی padding کمتر */
.hsp__info { gap: 14px; }
/* delivery، trust — جمعوجور */
.hsp__delivery { padding: 14px !important; }
.hsp__trust { padding: 14px !important; gap: 10px !important; }
.hsp__trust-item { font-size: 12.5px !important; }
}
/* خیلی کوچک */
@media (max-width: 380px) {
.hsp__sticky-cta { padding: 0 16px; font-size: 14px; }
.hsp__sticky-title { font-size: 11.5px; }
.hsp__sticky-price { font-size: 14px; }
}
/* ════════════════════════════════════════════════════════════════
📱 Sticky Bar V2 — همیشه نمایان (موبایل)
═════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
/* همیشه قابل مشاهده — حذف animation slide-up */
.hsp__sticky-bar { transform: none; }
.hsp__sticky-bar.is-visible { transform: none; }
/* مخفی کردن دکمه اصلی add-to-cart در موبایل (چون sticky جایگزین شده) */
.hsp__cart-form .single_add_to_cart_button { display: none !important; }
/* قیمت داخل sticky — اگر woocommerce-Price-amount چندخطه باشد، تکخطه نگهدار */
.hsp__sticky-price {
display: inline-flex;
align-items: baseline;
gap: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hsp__sticky-price del { display: none; } /* قیمت قدیمی را در sticky نشان نده */
.hsp__sticky-price ins {
text-decoration: none;
font-weight: 800;
}
.hsp__sticky-price .woocommerce-Price-amount {
font-size: 15px !important;
}
/* فضای کافی پایین صفحه برای sticky */
body { padding-bottom: 84px !important; }
}
/* ════════════════════════════════════════════════════════════════
🎨 IMAGE SWATCHES — رنگ/طرح بر اساس تصویر variation
═════════════════════════════════════════════════════════════════ */
.hsp__swatches--image {
gap: 10px;
}
.hsp__swatch--image {
width: 56px;
height: 70px;
min-width: 0;
padding: 0 !important;
border: 2px solid var(--hsp-border);
border-radius: 14px;
overflow: hidden;
position: relative;
background: rgba(255,255,255,.03);
transition: all .25s cubic-bezier(.22,1,.36,1);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.hsp__swatch--image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform .35s cubic-bezier(.22,1,.36,1);
display: block;
}
.hsp__swatch--image:hover {
border-color: var(--hsp-purple);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(107,45,92,.35);
}
.hsp__swatch--image:hover img {
transform: scale(1.08);
}
.hsp__swatch--image.is-active {
border-color: var(--hsp-purple) !important;
border-width: 3px;
background: transparent !important;
box-shadow:
0 0 0 2px rgba(231,166,174,.25),
0 12px 28px rgba(107,45,92,.55) !important;
}
.hsp__swatch--image.is-active::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(107,45,92,.55) 100%);
pointer-events: none;
z-index: 1;
}
.hsp__swatch--image .hsp__swatch-label {
position: absolute;
bottom: 4px;
left: 4px;
right: 4px;
font-size: 10.5px;
font-weight: 700;
color: #fff;
text-align: center;
text-shadow: 0 1px 4px rgba(0,0,0,.7);
padding: 2px 4px;
border-radius: 6px;
background: rgba(0,0,0,.4);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 2;
opacity: 0;
transition: opacity .2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hsp__swatch--image:hover .hsp__swatch-label,
.hsp__swatch--image.is-active .hsp__swatch-label {
opacity: 1;
}
.hsp__swatch--image.is-active::after {
/* چک مارک گوشه */
content: "";
position: absolute;
top: 6px;
right: 6px;
left: auto;
width: 20px;
height: 20px;
background: var(--hsp-purple);
border-radius: 50%;
border: 2px solid #fff;
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px;
background-repeat: no-repeat;
background-position: center;
z-index: 3;
box-shadow: 0 4px 10px rgba(107,45,92,.5);
}
[dir="rtl"] .hsp__swatch--image.is-active::after {
right: auto;
left: 6px;
}
/* موبایل — کمی کوچکتر */
@media (max-width: 720px) {
.hsp__swatch--image {
width: 52px;
height: 64px;
}
.hsp__swatch--image .hsp__swatch-label {
font-size: 10px;
}
}
/* ════════════════════════════════════════════════════════════════
🎨 Selected-preview با تصویر variation
═════════════════════════════════════════════════════════════════ */
.hsp__selected-preview-inner {
display: flex;
align-items: center;
gap: 14px;
}
/* RTL: order بزرگتر = سمت چپ */
.hsp__selected-preview-icon { order: 1; flex-shrink: 0; }
.hsp__selected-preview-text { order: 2; flex: 1; min-width: 0; }
.hsp__selected-preview-thumb { order: 3; flex-shrink: 0; }
.hsp__selected-preview-thumb {
width: 68px;
height: 84px;
border-radius: 12px;
overflow: hidden;
border: 2px solid rgba(231, 166, 174, .45);
box-shadow: 0 8px 22px rgba(107, 45, 92, .45), 0 0 0 4px rgba(231, 166, 174, .1);
position: relative;
animation: hsp-thumb-pop .45s cubic-bezier(.22,1,.36,1) both;
}
.hsp__selected-preview-thumb[hidden] { display: none; }
.hsp__selected-preview-thumb img {
width: 100% !important;
height: 100% !important; /* غلبه بر قاعدهٔ عمومیِ .hsp__info img{height:auto} */
object-fit: cover;
object-position: center;
display: block;
margin: 0 !important;
}
@keyframes hsp-thumb-pop {
0% { transform: scale(0.6) rotate(-5deg); opacity: 0; }
60% { transform: scale(1.06) rotate(2deg); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* موبایل */
@media (max-width: 720px) {
.hsp__selected-preview-thumb {
width: 56px;
height: 68px;
}
}
/* ════════════════════════════════════════════════════════════════
🔒 پنهانسازی aggressive: plugin-injected swatches / variation messages
═════════════════════════════════════════════════════════════════ */
/* .single_variation محل پیشفرض WC برای نمایش پیام variation و
محلی است که بسیاری از plugin ها swatch و گالری variation را inject میکنند.
چون ما باکس preview اختصاصی خودمان را داریم، این فضا بلااستفاده است. */
.hsp .single_variation,
.hsp .woocommerce-variation,
.hsp .woocommerce-variation-availability,
.hsp .woocommerce-variation-description,
.hsp .woocommerce-variation-price {
display: none !important;
}
/* بعضی plugin های variation gallery container سفارشی میسازند */
.hsp .variations_form > [class*="thumbnails"]:not([data-hsp-thumbs]),
.hsp .variations_form > [class*="gallery"]:not([data-hsp-gallery]),
.hsp .variations_form > [class*="variation-image"],
.hsp .variations_form > [class*="variation-images"],
.hsp .variations_form > [class*="product-variations"]:not(.hsp__swatches),
.hsp .single_variation_wrap > div:not(.variations_button):not([class*="variation_button"]) {
display: none !important;
}
/* اطمینان: بخش quantity + add-to-cart باید قابل دسترس بماند */
.hsp .variations_button,
.hsp .single_variation_wrap .variations_button {
display: flex !important;
}
/* ════════════════════════════════════════════════════════════════
🚨 پنهانسازی فوقالعاده aggressive — TEMP
هر چیزی که داخل cart-form است، swatch ما نیست، و دارای تصویر است
═════════════════════════════════════════════════════════════════ */
.hsp__cart-form > div:not(.variations):not(.variations_button):not([class*="hsp__"]):not(.single_variation_wrap),
.hsp__cart-form > ul:not([class*="hsp__"]),
.hsp__cart-form > section:not([class*="hsp__"]),
.hsp__cart-form > table:not(.variations),
.hsp__cart-form .variations + div:not(.variations_button):not(.single_variation_wrap),
.hsp__cart-form .single_variation_wrap > *:not(.variations_button) {
display: none !important;
}
/* فقط اینها داخل cart-form باید نمایان باشن */
.hsp__cart-form .variations,
.hsp__cart-form .variations_button,
.hsp__cart-form .hsp__swatches,
.hsp__cart-form .single_variation_wrap {
display: block !important;
}
.hsp__cart-form .variations_button {
display: flex !important;
}
/* ════════════════════════════════════════════════════════════════
🚫 OVERRIDE قوانین aggressive قبلی — برگردوندن flex
═════════════════════════════════════════════════════════════════ */
.hsp__cart-form > div:not(.variations):not(.variations_button):not([class*="hsp__"]):not(.single_variation_wrap),
.hsp__cart-form > ul:not([class*="hsp__"]),
.hsp__cart-form > section:not([class*="hsp__"]),
.hsp__cart-form > table:not(.variations),
.hsp__cart-form .variations + div:not(.variations_button):not(.single_variation_wrap) {
/* unset قبلی aggressive حذف */
display: revert;
}
/* به جای آن، فقط image swatches خودمان را پنهان کن
(چون image swatch دیگه نمیسازیم؛ این فقط برای کش قدیمی) */
.hsp__swatches--image { display: none !important; }
/* ════════════════════════════════════════════════════════════════
🚫 Image swatch کلاً حذف — کشبستر برای حالتهای قدیمی
═════════════════════════════════════════════════════════════════ */
.hsp__swatches--image { display: none !important; }
/* بازگردانی قانون aggressive قبلی که display ها رو خراب میکرد */
.hsp__cart-form > div:not(.variations):not(.variations_button):not([class*="hsp__"]):not(.single_variation_wrap),
.hsp__cart-form > ul:not([class*="hsp__"]),
.hsp__cart-form > section:not([class*="hsp__"]),
.hsp__cart-form > table:not(.variations),
.hsp__cart-form .variations + div:not(.variations_button):not(.single_variation_wrap),
.hsp__cart-form .single_variation_wrap > *:not(.variations_button) {
display: revert !important;
}
/* ════════════════════════════════════════════════════════════════
🎨 Swatches v2.4 — هم سایز هم رنگ سبک یکپارچه + spacing مناسب
═════════════════════════════════════════════════════════════════ */
.hsp__swatches {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important; /* spacing بهتر */
margin: 12px 0 !important;
padding: 0 !important;
align-items: center;
}
.hsp__swatch {
min-width: 58px !important;
height: 48px !important;
padding: 0 18px !important;
border: 1.5px solid var(--hsp-border) !important;
border-radius: 14px !important;
background: rgba(255,255,255,.03) !important;
color: var(--hsp-text) !important;
font-family: inherit !important;
font-size: 14.5px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all .25s cubic-bezier(.22,1,.36,1) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
letter-spacing: -0.01em;
}
.hsp__swatch:hover {
border-color: var(--hsp-purple) !important;
background: rgba(231,166,174,.08) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(107,45,92,.18) !important;
}
.hsp__swatch.is-active {
border-color: var(--hsp-purple) !important;
background: linear-gradient(135deg, var(--hsp-purple) 0%, var(--hsp-purple-deep) 100%) !important;
color: #fff !important;
box-shadow: 0 8px 22px rgba(107,45,92,.45), 0 0 0 3px rgba(231,166,174,.22) !important;
}
/* چک گوشه برای active */
.hsp__swatch.is-active::after {
content: "" !important;
position: absolute !important;
top: -5px !important;
width: 16px !important;
height: 16px !important;
background: var(--hsp-purple) !important;
border-radius: 50% !important;
border: 2px solid var(--hsp-bg) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: 10px !important;
background-repeat: no-repeat !important;
background-position: center !important;
display: block !important;
}
[dir="rtl"] .hsp__swatch.is-active::after { right: -5px !important; left: auto !important; }
[dir="ltr"] .hsp__swatch.is-active::after { left: -5px !important; right: auto !important; }
/* موبایل */
@media (max-width: 720px) {
.hsp__swatch {
min-width: 52px !important;
height: 44px !important;
font-size: 14px !important;
padding: 0 14px !important;
}
.hsp__swatches { gap: 10px !important; }
}
/* ════════════════════════════════════════════════════════════════
✨ SWATCHES v3 — Premium UI/UX
• Size: rectangular pill (text)
• Color/Pattern: square تصویری با background-image
═════════════════════════════════════════════════════════════════ */
/* بازنویسی container */
.hsp__swatches {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important;
margin: 14px 0 !important;
padding: 0 !important;
}
/* ─── SIZE swatch — rectangular ─── */
.hsp__swatch {
min-width: 60px;
height: 50px;
padding: 0 18px;
border: 2px solid var(--hsp-border);
border-radius: 14px;
background: rgba(255,255,255,.03);
color: var(--hsp-text);
font-family: inherit;
font-size: 15px;
font-weight: 700;
cursor: pointer;
transition: all .25s cubic-bezier(.22,1,.36,1);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
letter-spacing: -0.01em;
overflow: visible;
}
.hsp__swatch:hover:not(.is-active) {
border-color: var(--hsp-purple);
background: rgba(231,166,174,.08);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(107,45,92,.22);
}
/* ─── COLOR/PATTERN swatch — SQUARE با تصویر ─── */
.hsp__swatch--square {
width: 78px !important;
height: 78px !important;
min-width: 0 !important;
padding: 0 !important;
border: 2.5px solid var(--hsp-border);
border-radius: 14px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: rgba(255,255,255,.04);
color: transparent;
font-size: 0;
overflow: hidden;
}
.hsp__swatch--square .hsp__swatch-tip {
position: absolute;
bottom: 4px;
left: 4px;
right: 4px;
font-size: 10.5px;
font-weight: 700;
color: #fff;
text-align: center;
background: rgba(0,0,0,.55);
padding: 2px 4px;
border-radius: 7px;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity .2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0;
}
.hsp__swatch--square:hover .hsp__swatch-tip,
.hsp__swatch--square.is-active .hsp__swatch-tip { opacity: 1; }
.hsp__swatch--square:hover:not(.is-active) {
border-color: var(--hsp-purple);
transform: translateY(-3px) scale(1.03);
box-shadow: 0 10px 24px rgba(107,45,92,.35);
}
/* ─── ACTIVE state — premium ─── */
.hsp__swatch.is-active {
border-color: var(--hsp-purple) !important;
box-shadow:
0 10px 28px rgba(107,45,92,.55),
0 0 0 3px rgba(231,166,174,.28) !important;
transform: translateY(-1px);
}
/* size active: gradient */
.hsp__swatch.is-active:not(.hsp__swatch--square) {
background: linear-gradient(135deg, var(--hsp-purple) 0%, var(--hsp-purple-deep) 100%);
color: #fff;
}
/* square active: گرادیان گوشه + ring */
.hsp__swatch--square.is-active {
border-width: 3.5px !important;
border-color: #fff !important;
box-shadow:
0 0 0 4px var(--hsp-purple),
0 14px 32px rgba(107,45,92,.6) !important;
transform: translateY(-2px) scale(1.05);
}
/* چکمارک گوشه برای active — مشترک */
.hsp__swatch.is-active::after {
content: "";
position: absolute;
top: -8px;
width: 22px;
height: 22px;
background: var(--hsp-purple);
border-radius: 50%;
border: 2.5px solid var(--hsp-bg);
background-image: url("data:image/svg+xml;utf8,");
background-size: 13px;
background-repeat: no-repeat;
background-position: center;
z-index: 4;
box-shadow: 0 4px 10px rgba(107,45,92,.5);
animation: hsp-check-pop .35s cubic-bezier(.22,1,.36,1) both;
}
[dir="rtl"] .hsp__swatch.is-active::after { right: -8px; left: auto; }
[dir="ltr"] .hsp__swatch.is-active::after { left: -8px; right: auto; }
@keyframes hsp-check-pop {
0% { transform: scale(0) rotate(-180deg); opacity: 0; }
60% { transform: scale(1.2) rotate(0); opacity: 1; }
100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* ─── حذف انتخاب: زیر swatch ها ─── */
.variations .reset_variations,
.reset_variations {
display: block !important;
order: 99 !important;
margin-top: 8px !important;
font-size: 12.5px !important;
color: rgba(231,166,174,.7) !important;
text-decoration: none !important;
border: 0 !important;
background: transparent !important;
}
.variations .reset_variations:hover { color: var(--hsp-purple-glow) !important; }
/* در WC default، reset_variations بعد از table میآید — همانجا OK
اما اگر داخل td.value است، order:99 آن را آخر میبرد */
.hsp__cart-form .variations tr,
.hsp__cart-form table.variations tr {
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
.hsp__cart-form .variations td,
.hsp__cart-form .variations th {
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
}
.hsp__cart-form .variations td.value {
display: flex !important;
flex-direction: column !important;
}
/* ─── BREADCRUMB scroll horizontal ─── */
.hsp__breadcrumb,
.haika-breadcrumb {
flex-wrap: nowrap !important;
white-space: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
max-width: 100%;
}
.hsp__breadcrumb::-webkit-scrollbar,
.haika-breadcrumb::-webkit-scrollbar { height: 4px; }
.hsp__breadcrumb::-webkit-scrollbar-thumb,
.haika-breadcrumb::-webkit-scrollbar-thumb {
background: rgba(231,166,174,.3);
border-radius: 2px;
}
/* موبایل */
@media (max-width: 720px) {
.hsp__swatch {
min-width: 56px;
height: 46px;
font-size: 14px;
padding: 0 14px;
}
.hsp__swatch--square {
width: 70px !important;
height: 70px !important;
}
.hsp__swatches { gap: 10px !important; }
}
/* ════════════════════════════════════════════════════════════════
🎯 v3.1 — رفع white border، minimal spacing، scrollbar hidden
═════════════════════════════════════════════════════════════════ */
/* ─── breadcrumb: مخفی کردن کامل scrollbar ─── */
.hsp__breadcrumb,
.haika-breadcrumb {
scrollbar-width: none !important;
-ms-overflow-style: none !important;
}
.hsp__breadcrumb::-webkit-scrollbar,
.haika-breadcrumb::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
/* ─── Color/Pattern swatch active: کاور تمیز بدون border سفید ─── */
.hsp__swatch--square.is-active {
border-color: var(--hsp-purple) !important;
border-width: 2.5px !important;
background-color: transparent !important;
box-shadow:
0 0 0 3px rgba(231, 166, 174, .35),
0 12px 26px rgba(107,45,92,.5) !important;
transform: translateY(-2px) scale(1.04);
}
.hsp__swatch--square.is-active::before {
/* overlay تیره روی تصویر برای کنتراست تیک سفید */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(107,45,92,.1) 0%, rgba(107,45,92,.55) 100%);
border-radius: inherit;
pointer-events: none;
z-index: 1;
}
/* چکمارک داخل swatch (نه روی گوشه) برای دیدهشدن کامل */
.hsp__swatch--square.is-active::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
transform: translate(-50%, -50%) !important;
width: 32px !important;
height: 32px !important;
background: var(--hsp-purple) !important;
border-radius: 50% !important;
border: 3px solid #fff !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: 18px !important;
background-repeat: no-repeat !important;
background-position: center !important;
box-shadow: 0 6px 16px rgba(107,45,92,.7) !important;
z-index: 5 !important;
animation: hsp-check-pop .35s cubic-bezier(.22,1,.36,1) both !important;
}
/* size: چک گوشه قبلی همچنان روی size اعمال میشه (کوچک) */
.hsp__swatch.is-active:not(.hsp__swatch--square)::after {
width: 18px !important;
height: 18px !important;
top: -6px !important;
background-size: 11px !important;
}
/* ─── MINIMAL SPACING (مینیمال) ─── */
/* کل variations زیپ شده */
.hsp__cart-form .variations {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.hsp__cart-form .variations tbody {
display: block !important;
}
/* هر row: عنوان + swatchها در یک ستون با فاصله کم */
.hsp__cart-form .variations tr {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
padding: 0 !important;
margin: 0 0 12px !important;
border-bottom: 0 !important;
}
.hsp__cart-form .variations tr:last-of-type { margin-bottom: 0 !important; }
/* عنوان (label) یکخطه و فشرده */
.hsp__cart-form .variations td.label,
.hsp__cart-form .variations th.label,
.hsp__cart-form .variations td.label label,
.hsp__cart-form .variations th.label label {
margin: 0 !important;
padding: 0 !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: var(--hsp-text-muted) !important;
letter-spacing: -0.005em;
line-height: 1.4 !important;
}
/* swatch container: حداقل فضای حاشیه */
.hsp__swatches {
margin: 4px 0 0 !important;
padding: 0 !important;
gap: 10px !important;
}
/* td.value: حذف padding */
.hsp__cart-form .variations td,
.hsp__cart-form .variations th {
padding: 0 !important;
}
/* size swatch قدر مینیمالتر */
.hsp__swatch {
min-width: 54px;
height: 44px;
padding: 0 16px;
font-size: 14.5px;
}
/* color square کمی کوچکتر برای spacing بهتر */
.hsp__swatch--square {
width: 68px !important;
height: 68px !important;
}
/* check روی square کمی کوچکتر در حالت کوچک */
@media (max-width: 720px) {
.hsp__swatch--square {
width: 62px !important;
height: 62px !important;
}
.hsp__swatch--square.is-active::after {
width: 28px !important;
height: 28px !important;
background-size: 16px !important;
}
.hsp__swatch {
min-width: 50px;
height: 42px;
font-size: 14px;
}
}
/* ════════════════════════════════════════════════════════════════
🎯 v3.2 — checkmark یکسان روی همه swatch ها (همان size)
═════════════════════════════════════════════════════════════════ */
/* لغو overlay گرادیان روی square (که چک رو میپوشاند) */
.hsp__swatch--square.is-active::before {
display: none !important;
}
/* چکمارک گوشه روی square — مشابه size */
.hsp__swatch--square.is-active::after {
content: "" !important;
position: absolute !important;
top: -8px !important;
width: 22px !important;
height: 22px !important;
left: auto !important;
right: auto !important;
transform: none !important;
background-color: var(--hsp-purple) !important;
border-radius: 50% !important;
border: 2.5px solid var(--hsp-bg) !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: 13px !important;
background-repeat: no-repeat !important;
background-position: center !important;
z-index: 5 !important;
box-shadow: 0 4px 10px rgba(107,45,92,.5) !important;
animation: hsp-check-pop .35s cubic-bezier(.22,1,.36,1) both !important;
}
[dir="rtl"] .hsp__swatch--square.is-active::after { right: -8px !important; left: auto !important; }
[dir="ltr"] .hsp__swatch--square.is-active::after { left: -8px !important; right: auto !important; }
/* ════════════════════════════════════════════════════════════════
🚫 ناموجود badge → روی تصویر (نه بالای breadcrumb)
═════════════════════════════════════════════════════════════════ */
.hsp__gallery { position: relative; }
.hsp__badge--out {
position: absolute !important;
top: 14px !important;
right: 14px !important;
left: auto !important;
z-index: 12 !important;
font-size: 12.5px !important;
font-weight: 800 !important;
padding: 6px 14px !important;
background: rgba(220, 38, 38, .92) !important;
color: #fff !important;
border-radius: 999px !important;
box-shadow: 0 8px 22px rgba(220,38,38,.4) !important;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
letter-spacing: 0.02em;
}
[dir="ltr"] .hsp__badge--out { right: auto !important; left: 14px !important; }
/* ════════════════════════════════════════════════════════════════
📱 موبایل: quantity در sticky bar
═════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.hsp__sticky-bar {
gap: 10px !important;
padding: 8px 12px !important;
padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
}
.hsp__sticky-info {
flex: 1;
min-width: 0;
}
.hsp__sticky-title { display: none; } /* صرفهجویی فضا */
.hsp__sticky-price { font-size: 16px !important; font-weight: 800 !important; }
/* quantity controls در sticky bar */
.hsp-qty-mobile {
display: inline-flex !important;
align-items: center;
gap: 0;
background: rgba(255,255,255,.06);
border: 1px solid rgba(231,166,174,.3);
border-radius: 12px;
overflow: hidden;
height: 50px;
flex-shrink: 0;
}
.hsp-qty-mobile button {
width: 40px;
height: 100%;
border: 0;
background: transparent;
color: var(--hsp-purple-glow);
font-size: 22px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all .15s;
padding: 0;
}
.hsp-qty-mobile button:active {
background: rgba(231,166,174,.2);
transform: scale(.92);
}
.hsp-qty-mobile input {
width: 38px;
height: 100%;
text-align: center;
font-size: 16px;
font-weight: 800;
background: transparent;
border: 0;
color: var(--hsp-text);
font-family: inherit;
appearance: textfield;
-moz-appearance: textfield;
}
.hsp-qty-mobile input::-webkit-outer-spin-button,
.hsp-qty-mobile input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* پنهان کردن quantity اصلی در موبایل (به sticky منتقل شد) */
.hsp__cart-form .quantity:not(.hsp-qty-mobile) {
display: none !important;
}
/* تنظیم اندازهی sticky CTA کمی فشردهتر */
.hsp__sticky-cta {
height: 50px !important;
padding: 0 18px !important;
font-size: 14.5px !important;
}
}
/* ════════════════════════════════════════════════════════════════
🎯 v3.3 — Critical fixes
• overflow:hidden حذف از square (چکمارک خارج از border نمایان بشه)
• z-index درست
═════════════════════════════════════════════════════════════════ */
/* swatch--square — overflow visible تا چکمارک قابل دیدن بشه */
.hsp__swatch--square {
overflow: visible !important;
background-clip: padding-box;
}
/* تصویر داخل swatch با border-radius خود element clip میشود (نیازی به overflow hidden نیست) */
.hsp__swatch--square {
-webkit-background-clip: border-box;
background-clip: border-box;
}
/* اطمینان از z-index درست */
.hsp__swatch.is-active::after,
.hsp__swatch--square.is-active::after {
z-index: 10 !important;
}
/* ════════════════════════════════════════════════════════════════
🔢 Quantity در sticky bar — فقط دکمهها (input readonly)
═════════════════════════════════════════════════════════════════ */
.hsp-qty-mobile input {
pointer-events: none !important;
caret-color: transparent !important;
user-select: none !important;
}
.hsp-qty-mobile button:disabled {
opacity: .35;
cursor: not-allowed;
}
/* ════════════════════════════════════════════════════════════════
🔔 Notify Back-in-Stock state
═════════════════════════════════════════════════════════════════ */
.hsp__sticky-cta--notify {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
box-shadow: 0 8px 24px rgba(245, 158, 11, .45), 0 0 0 1px rgba(245, 158, 11, .25) !important;
}
.hsp__sticky-cta--notify:active {
transform: scale(.97);
}
/* قسمت quantity در حالت ناموجود پنهان */
.hsp__sticky-bar.is-out-of-stock .hsp-qty-mobile { display: none !important; }
.hsp__sticky-bar.is-out-of-stock .hsp__sticky-cta {
flex: 1 !important;
}
/* ════════════════════════════════════════════════════════════════
🚀 NO-FLASH BOOT — حذف flash بارگذاری
تا قبل از is-ready: ویژگیهای variation کاملاً پنهان
با is-ready: fade in روان
═════════════════════════════════════════════════════════════════ */
/* قانون hidden قبلی حذف شد — variations همیشه visible است */
/* همچنین قبل از ready: hide بستههای dynamic */
.hsp .hsp__dynamic-zone {
min-height: 0;
}
/* جایگزین skeleton: شیمر روان روی swatch area قبل از ready */
.hsp:not(.is-ready) .variations_form::before {
content: '';
display: block;
height: 56px;
background: linear-gradient(90deg,
rgba(255,255,255,.03) 0%,
rgba(231,166,174,.08) 50%,
rgba(255,255,255,.03) 100%);
background-size: 200% 100%;
animation: hsp-skel 1.4s linear infinite;
border-radius: 12px;
margin-bottom: 8px;
}
.hsp:not(.is-ready) .variations_form::after {
content: '';
display: block;
height: 76px;
background: linear-gradient(90deg,
rgba(255,255,255,.03) 0%,
rgba(231,166,174,.08) 50%,
rgba(255,255,255,.03) 100%);
background-size: 200% 100%;
animation: hsp-skel 1.4s linear infinite .2s;
border-radius: 12px;
}
.hsp.is-ready .variations_form::before,
.hsp.is-ready .variations_form::after { display: none; }
@keyframes hsp-skel {
0% { background-position: 100% 0; }
100% { background-position: -100% 0; }
}
/* ════════════════════════════════════════════════════════════════
🚀 v3.4 — تصاویر swatch OVERRIDE-PROOF
استفاده از CSS variable + !important بهعنوان fallback
═════════════════════════════════════════════════════════════════ */
.hsp__swatch--square[style*="--swatch-bg"] {
background-image: var(--swatch-bg) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
}
/* رفع پنهان شدن swatchهای plugin قدیمی روی reset_data — همیشه پنهان */
.hsp .haika-hub-swatches,
.hsp .haika-hub-swatch {
display: none !important;
}
/* اطمینان: image روی square همیشه دیده میشه */
.hsp__swatch--square {
background-image: var(--swatch-bg, none);
}
/* ════════════════════════════════════════════════════════════════
🚀 NO-FLASH IMAGE — تصویر اصلی تا تعیین variation مخفی
═════════════════════════════════════════════════════════════════ */
.hsp__main-img {
opacity: 0;
transition: opacity .25s ease-out;
}
.hsp.is-img-ready .hsp__main-img {
opacity: 1;
}
/* skeleton subtle روی stage تا image آماده شد */
.hsp:not(.is-img-ready) [data-hsp-stage]::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg,
rgba(231,166,174,.04) 0%,
rgba(255,255,255,.02) 50%,
rgba(231,166,174,.04) 100%);
background-size: 200% 100%;
animation: hsp-skel 1.4s linear infinite;
border-radius: inherit;
z-index: 1;
pointer-events: none;
}
/* ════════════════════════════════════════════════════════════════
🧹 v3.5 — REVERT noFlash (باعث صفحه خراب میشد)
بهجاش: تصویر همیشه visible، skeleton کوتاه با animation
═════════════════════════════════════════════════════════════════ */
/* تصویر اصلی همیشه visible — opacity:0 لغو */
.hsp__main-img {
opacity: 1 !important;
transition: none !important;
}
/* skeleton stage حذف */
.hsp:not(.is-img-ready) [data-hsp-stage]::before {
display: none !important;
}
/* skeleton variations کوتاه — حداکثر 3 ثانیه */
.hsp:not(.is-ready) .variations_form::before,
.hsp:not(.is-ready) .variations_form::after {
animation: hsp-skel 1.4s linear infinite, hsp-skel-hide 0s 3s forwards;
}
@keyframes hsp-skel-hide {
to { display: none; }
}
/* اطمینان: variations همیشه قابل کلیک باشه (حتی اگر is-ready اضافه نشه) */
.hsp .variations_form .variations,
.hsp .variations_form .single_variation_wrap,
.hsp .hsp__swatches {
visibility: visible !important;
opacity: 1 !important;
}
/* ══════════════════════════════════════════════════════════════════
DESKTOP REDESIGN (V3) — منبع واحد چیدمان دسکتاپ صفحه محصول
هدف: رفع فضای خالی نیمهٔ صفحه، sticky واقعی گالری، باکس خرید جسورانه،
نوار اطمینان تمامعرض. موبایل (<900px) دستنخورده میماند.
════════════════════════════════════════════════════════════════════ */
/* ───── قیمت پرکنتراست (همهٔ نماها/اندازهها) ───── */
.hsp__price {
color: var(--hsp-fg) !important;
opacity: 1;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
.hsp__price .woocommerce-Price-amount,
.hsp__price bdi { color: var(--hsp-fg); }
.hsp__price ins .woocommerce-Price-amount,
.hsp__price ins bdi { color: var(--hsp-purple-glow); }
/* ───── چیپ موجودی / فوریت ───── */
.hsp__stock {
display: inline-flex;
align-items: center;
gap: 8px;
align-self: flex-start;
padding: 7px 14px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
border: 1px solid var(--hsp-border);
background: var(--hsp-card-bg);
}
.hsp__stock-dot {
width: 9px; height: 9px;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent);
}
.hsp__stock--in { color: var(--hsp-success); border-color: color-mix(in srgb, var(--hsp-success) 35%, var(--hsp-border)); }
.hsp__stock--in .hsp__stock-dot { background: var(--hsp-success); animation: hsp-pulse 2.2s ease-in-out infinite; }
.hsp__stock--low { color: var(--hsp-warn); border-color: color-mix(in srgb, var(--hsp-warn) 40%, var(--hsp-border)); background: color-mix(in srgb, var(--hsp-warn) 10%, var(--hsp-card-bg)); }
.hsp__stock--low .hsp__stock-dot { background: var(--hsp-warn); animation: hsp-pulse 1.4s ease-in-out infinite; }
.hsp__stock--out { color: var(--hsp-danger); border-color: color-mix(in srgb, var(--hsp-danger) 35%, var(--hsp-border)); }
.hsp__stock--out .hsp__stock-dot { background: var(--hsp-danger); }
@keyframes hsp-pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .hsp__stock-dot { animation: none !important; } }
/* ───── ردیف اطمینان فشردهٔ زیر CTA (داخل باکس خرید) ───── */
.hsp__assure {
list-style: none;
margin: 2px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
align-items: center;
}
.hsp__assure-item {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
font-weight: 600;
color: var(--hsp-fg-muted);
}
.hsp__assure-item svg { color: var(--hsp-purple-glow); flex-shrink: 0; }
/* ───── نوار اطمینان تمامعرض (نشانها + نمادها + متا) ───── */
.hsp__reassure {
margin: 4px 0 56px;
display: grid;
gap: 22px;
}
.hsp__reassure .hsp__trust { margin: 0; }
.hsp__reassure .hsp__meta { margin: 0; }
.hsp__namads { margin: 0; }
.hsp__namads .cbf-namads { margin: 0; padding: 0; }
.hsp__namads .cbf-wrap { padding: 0; }
/* ───── تبلت/دسکتاپ کوچک: نشانهای اعتماد ۴تایی، متا ردیفی ───── */
@media (min-width: 768px) {
.hsp__trust { grid-template-columns: repeat(4, 1fr); gap: 12px; }
.hsp__reassure .hsp__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 22px;
border-top: 1px dashed var(--hsp-border);
padding-top: 16px;
}
.hsp__reassure .hsp__meta-row { margin: 0; }
.hsp__reassure .hsp__share { margin: 0; margin-inline-start: auto; }
}
/* ══════════════════ DESKTOP ≥1024px ══════════════════ */
@media (min-width: 1024px) {
/* چیدمان متعادل: گالری منعطف، باکس خرید ۴۴۰–۵۴۰px */
.hsp__hero {
grid-template-columns: minmax(0, 1.4fr) minmax(440px, 540px);
gap: 56px;
align-items: start;
margin-bottom: 64px;
}
/* گالری: تنها ستون sticky، ارتفاع متناسب */
.hsp__gallery {
grid-template-columns: 92px 1fr;
gap: 16px;
position: sticky;
top: 88px;
align-self: start;
}
.hsp__stage { aspect-ratio: 3 / 4; max-height: 720px; }
.hsp__thumb { width: 92px; height: 116px; border-radius: 14px; }
/* باکس خرید: جریان عادی (نه sticky) تا فضای خالی ایجاد نشود */
.hsp__info {
position: static !important;
gap: 20px;
}
/* تایپوگرافی جسورانهتر */
.hsp__title {
font-size: clamp(28px, 2.5vw, 40px);
font-weight: 800;
line-height: 1.22;
letter-spacing: -0.02em;
}
.hsp__cat-pill { font-size: 12.5px; }
/* بلوک قیمت — درشت، خوانا، با نوار تأکید */
.hsp__price-block {
padding: 22px 24px;
position: relative;
border-radius: var(--hsp-radius);
}
.hsp__price-block::after {
content: "";
position: absolute;
inset-inline-start: 0;
top: 14px; bottom: 14px;
width: 4px;
border-radius: 999px;
background: linear-gradient(var(--hsp-purple-glow), var(--hsp-purple));
}
.hsp__price { font-size: clamp(28px, 2.2vw, 36px); font-weight: 900; }
.hsp__price del { font-size: 17px; }
.hsp__save-pill { font-size: 13px; padding: 8px 15px; }
/* CTA قویتر (دکمهٔ ووکامرس داخل فرم) */
.hsp__cart-form .single_add_to_cart_button,
.hsp__cart-form button.single_add_to_cart_button {
min-height: 56px;
font-size: 16.5px;
letter-spacing: -0.01em;
}
}
/* ══════════════════ موبایل دستنخورده ══════════════════ */
@media (max-width: 900px) {
/* ردیف اطمینان فشرده فقط مخصوص دسکتاپ است؛ روی موبایل نشانهای کامل پایین میآیند */
.hsp__assure { display: none; }
.hsp__reassure { margin-bottom: 40px; gap: 18px; }
}
/* ───── رفع محدودیت عرض صفحه محصول ─────
wrapper مشترکِ «تکپست» (.haika-single) پیشفرض max-width:820px دارد و
صفحه محصول از آن ارث میبرد → دسکتاپ باریک میشد. مثل سبد/تسویه بازنویسی شد. */
body.single-product .haika-single,
body.single-product .haika-single-v2 { max-width: 1340px; }
/* ───── رفع باگ نمای روشن ─────
سیستم نما از html[data-cb-theme="light"] استفاده میکند، نه body.haika-theme-light.
پس توکنهای روشنِ کارتها/بوردر/سایه باید با سلکتور درست هم اعمال شوند تا کل صفحه
در نمای روشن خوانا و پولیش باشد (--hsp-fg از --cb-text خودکار درست بود؛ اینها نبودند). */
html[data-cb-theme="light"] .hsp {
--hsp-card-bg: #ffffff;
--hsp-card-bg-2: #faf7ff;
--hsp-border: rgba(107, 45, 92, 0.14);
--hsp-fg: #1a1a2e;
--hsp-fg-muted: #6b7280;
--hsp-shadow: 0 12px 40px rgba(107, 45, 92, 0.08);
--hsp-shadow-lg: 0 24px 80px rgba(107, 45, 92, 0.15);
}
/* ══════════════════════════════════════════════════════════════════
ADD-ONS V3.1 — واحد قیمت + stepper تعداد + اطلاع موجودی (notify)
════════════════════════════════════════════════════════════════════ */
/* ───── واحد قیمت: مرئی و سمت چپِ عدد (RTL)، بدون wrap/کلیپ ───── */
.hsp__price { flex-wrap: nowrap; }
.hsp__price .woocommerce-Price-amount > bdi {
direction: ltr;
display: inline-flex;
align-items: baseline;
gap: 6px;
white-space: nowrap;
}
.hsp__price .woocommerce-Price-currencySymbol {
-webkit-text-fill-color: var(--hsp-fg);
color: var(--hsp-fg);
background: none;
order: -1; /* در فلکسِ RTL آخرین آیتم سمت چپ مینشیند */
margin: 0;
font-size: .46em;
font-weight: 700;
opacity: .72;
align-self: center;
}
/* ───── انتخاب تعداد دکمهای (− / +) بدون کیبورد ───── */
.quantity.hsp-qty-ready {
display: inline-flex;
direction: ltr; /* − چپ و + راست، یکنواخت */
align-items: stretch;
height: 52px;
border: 1px solid var(--hsp-border);
border-radius: var(--hsp-radius-sm);
overflow: hidden;
background: var(--hsp-card-bg);
}
.quantity.hsp-qty-ready input.qty,
.quantity.hsp-qty-ready input {
width: 54px; min-width: 54px;
text-align: center;
border: 0; background: transparent;
color: var(--hsp-fg);
font-family: inherit; font-weight: 800; font-size: 16px;
padding: 0; margin: 0; height: auto;
-moz-appearance: textfield; appearance: textfield;
cursor: default;
}
.quantity.hsp-qty-ready input::-webkit-outer-spin-button,
.quantity.hsp-qty-ready input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hsp-qty-btn {
width: 46px; border: 0;
background: var(--hsp-card-bg-2); color: var(--hsp-fg);
font-family: inherit; font-size: 22px; font-weight: 700; line-height: 1;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, color .15s;
}
.hsp-qty-btn:hover:not(:disabled) { background: var(--hsp-purple); color: #fff; }
.hsp-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.hsp-qty-dec { border-inline-end: 1px solid var(--hsp-border); }
.hsp-qty-inc { border-inline-start: 1px solid var(--hsp-border); }
/* ───── اطلاع موجودی (متغیر ناموجود) ───── */
/* در حالت ناموجود، فرم خرید (تعداد+دکمه) پنهان و notify نمایش داده میشود؛ سوییچرها میمانند */
.hsp__cart-form.is-oos .woocommerce-variation-add-to-cart,
.hsp__cart-form.is-oos > form.cart > .quantity,
.hsp__cart-form.is-oos > form.cart > .single_add_to_cart_button { display: none !important; }
.hsp__notify { margin-top: 14px; }
.hsp__notify[hidden] { display: none; }
.hsp__notify-btn {
width: 100%;
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 56px; padding: 0 22px;
border: 0; border-radius: var(--hsp-radius);
background: linear-gradient(135deg, var(--hsp-warn), #f97316);
color: #fff; font-family: inherit; font-weight: 800; font-size: 16px; cursor: pointer;
box-shadow: 0 8px 24px rgba(245, 158, 11, .28);
transition: transform .15s, box-shadow .15s;
}
.hsp__notify-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(245, 158, 11, .4); }
.hsp__notify-btn svg { flex-shrink: 0; }
.hsp__notify-form { margin-top: 12px; }
.hsp__notify-label { display: block; font-size: 13px; color: var(--hsp-fg-muted); margin-bottom: 8px; }
.hsp__notify-row { display: flex; gap: 8px; }
.hsp__notify-phone {
flex: 1; min-width: 0; height: 50px; padding: 0 14px;
border: 1.5px solid var(--hsp-border); border-radius: var(--hsp-radius-sm);
background: var(--hsp-card-bg-2); color: var(--hsp-fg);
font-family: inherit; font-size: 15px; letter-spacing: 1px; text-align: center;
}
.hsp__notify-phone:focus { outline: none; border-color: var(--hsp-purple-glow); }
.hsp__notify-submit {
flex-shrink: 0; padding: 0 22px; height: 50px;
border: 0; border-radius: var(--hsp-radius-sm);
background: linear-gradient(135deg, var(--hsp-purple-glow), var(--hsp-purple));
color: #fff; font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
}
.hsp__notify-submit:disabled { opacity: .55; cursor: progress; }
.hsp__notify-msg { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; }
.hsp__notify-msg[hidden] { display: none; }
.hsp__notify-msg.is-ok { color: var(--hsp-success); }
.hsp__notify-msg.is-err { color: var(--hsp-danger); }
/* اصلاح: attribute hidden روی دکمه/فرم notify باید واقعاً پنهان کند (غلبه بر display فلکس) */
.hsp__notify-btn[hidden],
.hsp__notify-form[hidden] { display: none !important; }
/* ═══════════════════════════════════════════════════════════════
CURVANA polish — برند کِروانا + امضای «نخ طلایی»
(افزایشی؛ accent از --cv-* — سازگار با سهنما)
═══════════════════════════════════════════════════════════════ */
.hsp{
--hsp-purple: var(--cv-plum, #6B2D5C);
--hsp-purple-glow: var(--cv-rose, #E7A6AE);
--hsp-purple-soft: rgba(107,45,92,.10);
}
/* عنوان محصول با «نخ طلایی» زیرش (امضای برند) */
.hsp__title{ position: relative; display: inline-block; }
.hsp__title::after{
content:""; display:block; width:min(120px,60%); height:13px; margin-top:8px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 13' preserveAspectRatio='none'%3E%3Cpath d='M4 4 C28 14 50 14 62 7 C74 0 92 1 106 9' fill='none' stroke='%23C9A24B' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right/contain;
}
/* دکمهٔ افزودن به سبد = گرادینت برند (مثل موکاپ) */
.hsp__cart-form .single_add_to_cart_button{
background: var(--cv-grad, linear-gradient(135deg,#6B2D5C,#A85283 60%,#E7A6AE)) !important;
border: 0 !important;
color: #fff !important;
box-shadow: 0 10px 26px rgba(107,45,92,.32) !important;
transition: transform .25s var(--cv-ease, ease), box-shadow .25s, filter .25s !important;
}
.hsp__cart-form .single_add_to_cart_button:hover:not(.disabled):not(:disabled){
transform: translateY(-2px) !important;
box-shadow: 0 16px 34px rgba(107,45,92,.42) !important;
filter: brightness(1.04);
}
/* نشانهٔ دستهٔ محصول = لهجهٔ طلایی برند */
.hsp__cat-pill{ color: var(--cv-gold, #C9A24B); }
/* ============================================================
CURVANA PDP - mockup look (brand-fixed cream/plum, mode-independent)
Re-points the --hsp-* tokens to a light Curvana set so every child
rule becomes readable on cream, then adds the mockup accents.
============================================================ */
body.single-product{ background:var(--cv-cream,#FBF6F1); }
.hsp{
--hsp-card-bg: #ffffff;
--hsp-card-bg-2: #faf6f9;
--hsp-border: rgba(107,45,92,.14);
--hsp-fg: #2B1A2E;
--hsp-fg-muted: #6d5d68;
--hsp-purple: var(--cv-plum,#6B2D5C);
--hsp-purple-glow:var(--cv-rose,#E7A6AE);
--hsp-purple-soft:rgba(107,45,92,.08);
--hsp-shadow: 0 12px 40px rgba(58,23,48,.10);
--hsp-shadow-lg: 0 24px 80px rgba(58,23,48,.16);
background:var(--cv-cream,#FBF6F1);
color:var(--cv-ink,#2B1A2E);
}
/* breadcrumb */
.hsp__breadcrumb{ background:transparent; }
.hsp__breadcrumb a{ color:#9b8a95; }
.hsp__breadcrumb a:hover{ color:var(--cv-plum,#6B2D5C); }
.hsp__breadcrumb-current{ color:var(--cv-plumdk,#3A1730); }
/* gallery - rounded + soft frame like mockup */
.hsp__stage{ border-radius:22px; overflow:hidden; background:var(--cv-mist,#F3E9EF); box-shadow:0 24px 54px rgba(58,23,48,.18); }
.hsp__stage-inner, .hsp__main-img{ border-radius:22px; }
.hsp__zoom-btn{ background:rgba(255,255,255,.92); color:var(--cv-plumdk,#3A1730); }
.hsp__thumb{ border-radius:14px; border:2px solid transparent; }
.hsp__thumb.is-active{ border-color:var(--cv-gold,#C9A24B); }
.hsp__badge--sale{ background:var(--cv-gold,#C9A24B); color:#fff; }
.hsp__badge--out{ background:#efe0ea; color:#9b8a95; }
/* info column */
.hsp__cat-pill{ background:transparent; padding:0 0 2px; color:var(--cv-gold,#C9A24B); font-weight:700; letter-spacing:.06em; }
.hsp__cat-pill svg{ display:none; }
.hsp__title{ color:var(--cv-plumdk,#3A1730); }
.hsp__stars{ color:var(--cv-gold,#C9A24B); }
.hsp__rating-num, .hsp__rating-count{ color:#7d6c78; }
.hsp__price, .hsp__price .woocommerce-Price-amount, .hsp__price ins .woocommerce-Price-amount{ color:var(--cv-plum,#6B2D5C); font-weight:900; }
.hsp__price del, .hsp__price del .woocommerce-Price-amount{ color:#c4b6c0; font-weight:400; }
.hsp__save-pill{ background:var(--cv-rose-soft,#F2C8CE); color:var(--cv-plumdk,#3A1730); }
.hsp__stock--in{ color:#3f9d6b; }
.hsp__stock--low{ color:#c47a1b; }
.hsp__short-desc{ color:#6d5d68; }
/* WooCommerce variation/size controls -> plum pills feel */
.hsp .variations td.value select, .hsp__cart-form select{
border:1.5px solid #ddc9d6; border-radius:12px; background:#fff; color:var(--cv-plumdk,#3A1730);
}
.hsp__cart-form .single_add_to_cart_button{
background:var(--cv-plum,#6B2D5C) !important; box-shadow:0 10px 26px rgba(107,45,92,.32) !important;
}
.hsp__cart-form .single_add_to_cart_button:hover:not(.disabled):not(:disabled){
background:var(--cv-plumdk,#3A1730) !important;
}
/* trust trio + assurances - white cards on cream */
.hsp__trust-item, .hsp__assure-item{ background:#fff; border:1px solid #f0e2eb; border-radius:14px; box-shadow:0 4px 12px rgba(58,23,48,.06); }
.hsp__trust-item svg, .hsp__assure-item svg{ color:var(--cv-plum,#6B2D5C); }
.hsp__trust-item strong{ color:var(--cv-plumdk,#3A1730); }
/* tabs */
.hsp__tab-btn.is-active{ color:var(--cv-plum,#6B2D5C); border-color:var(--cv-plum,#6B2D5C); }
.hsp__tab-btn:hover{ color:var(--cv-plum,#6B2D5C); }
/* related strip on mist */
.hsp__related{ background:var(--cv-mist,#F3E9EF); border-radius:22px; padding:34px 18px; }
.hsp__related-title{ color:var(--cv-plumdk,#3A1730); }
.hsp__related-title svg{ color:var(--cv-gold,#C9A24B); }
/* mobile sticky add-to-cart bar -> mockup mp-cta with thread */
.hsp__sticky-bar{ background:rgba(251,246,241,.97) !important; border-top:1px solid #efe0ea !important; }
.hsp__sticky-bar::before{ content:""; position:absolute; top:-7px; inset-inline-end:18px; width:30px; height:9px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M3 3 C18 11 28 11 34 5 C40 -1 50 1 57 7' fill='none' stroke='%23C9A24B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.hsp__sticky-price, .hsp__sticky-price .woocommerce-Price-amount{ color:var(--cv-plum,#6B2D5C); font-weight:900; }
.hsp__sticky-cta{ background:var(--cv-plum,#6B2D5C); }
.hsp__sticky-cta:hover{ background:var(--cv-plumdk,#3A1730); }
@media (max-width:1024px){ .hsp__sticky-bar{ z-index:901; } } /* above tabbar space */
/* ============================================================
CURVANA PDP - resilient to ANY plugin-injected content.
Whatever a plugin injects (variation messages, notices, boxes)
is shown as a themed Curvana card, in place, without breaking layout.
============================================================ */
.hsp .hsp__dyn-plugin-slot{ display:block; }
.hsp .hsp__dyn-plugin-slot:empty{ display:none; margin:0; padding:0; border:0; }
/* known plugin boxes + generic WooCommerce injected blocks -> Curvana card */
.hsp .haika-plugin-box,
.hsp #haika-variation-info,
.hsp .haika-hub-variation-info,
.hsp .hsp__dyn-plugin-slot > *,
.hsp__info .woocommerce-info,
.hsp__info .woocommerce-message,
.hsp__info .woocommerce-error,
.hsp .woocommerce-variation-description,
.hsp .woocommerce-variation-availability{
background:#fff;
border:1px solid #f0e2eb;
border-radius:14px;
padding:12px 14px;
margin:10px 0 0;
font-size:13.5px;
line-height:1.95;
color:var(--cv-ink,#2B1A2E);
box-shadow:0 4px 12px rgba(58,23,48,.05);
position:relative;
max-width:100%;
box-sizing:border-box;
}
/* brand thread accent on the main injected info cards */
.hsp .haika-plugin-box::before,
.hsp #haika-variation-info::before,
.hsp .haika-hub-variation-info::before{
content:""; position:absolute; top:-1px; inset-inline-start:18px; width:34px; height:8px;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 10'%3E%3Cpath d='M3 3 C18 11 28 11 34 5 C40 -1 50 1 57 7' fill='none' stroke='%23C9A24B' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;
}
/* notice colour variants */
.hsp__info .woocommerce-error{ border-color:#f1c7cf; background:#fdf4f6; }
.hsp__info .woocommerce-message{ border-color:#bfe3cd; background:#f3faf5; }
/* typography / elements INSIDE any injected box -> themed */
.hsp .haika-plugin-box :is(h2,h3,h4,h5,strong,b),
.hsp #haika-variation-info :is(h2,h3,h4,h5,strong,b),
.hsp .haika-hub-variation-info :is(h2,h3,h4,h5,strong,b){ color:var(--cv-plumdk,#3A1730); }
.hsp .haika-plugin-box a,
.hsp #haika-variation-info a,
.hsp .haika-hub-variation-info a,
.hsp .hsp__dyn-plugin-slot a{ color:var(--cv-plum,#6B2D5C); text-decoration:none; }
.hsp .haika-plugin-box a:hover{ text-decoration:underline; }
/* generic resilience: nothing injected may overflow or break the grid */
.hsp__info > *, .hsp__dynamic-zone > *{ max-width:100%; min-width:0; box-sizing:border-box; }
.hsp__info img, .hsp .haika-plugin-box img, .hsp #haika-variation-info img{ max-width:100%; height:auto; border-radius:10px; }
.hsp__info table, .hsp .haika-plugin-box table, .hsp #haika-variation-info table{ width:100%; border-collapse:collapse; margin:8px 0; font-size:12.5px; }
.hsp__info table th, .hsp .haika-plugin-box th, .hsp #haika-variation-info th{ background:var(--cv-mist,#F3E9EF); color:var(--cv-plumdk,#3A1730); font-weight:700; padding:7px 8px; border:1px solid #e8d6e2; text-align:center; }
.hsp__info table td, .hsp .haika-plugin-box td, .hsp #haika-variation-info td{ padding:7px 8px; border:1px solid #eee0e9; text-align:center; }
.hsp .haika-plugin-box ul, .hsp #haika-variation-info ul, .hsp .haika-hub-variation-info ul{ margin:6px 0; padding-inline-start:18px; }
.hsp .haika-plugin-box li, .hsp #haika-variation-info li{ margin-bottom:4px; }
/* element relocated into the slot by our JS */
.hsp .cv-injected{ animation:cv-inj .25s ease; }
@keyframes cv-inj{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
/* ============================================================
CURVANA PDP - variation swatches/selects fixed to match mockup
(verified against live kingsize.local product page)
============================================================ */
/* hide the native