אמיתי עם table-layout:auto. בטלפון הוא
נמתח ל-560px בתוך מסך של 375 — 200 פיקסלים של גלישה אופקית. html
חותך אותה, ולכן היא לא נראית כפס גלילה אלא כעמוד ש"רוקד" הצידה
בכל גלילה. הפתרון: לפרק את הטבלה לכרטיסים. */
@media (max-width:760px){
.woocommerce-cart-form .shop_table,
.woocommerce-cart-form .shop_table thead,
.woocommerce-cart-form .shop_table tbody,
.woocommerce-cart-form .shop_table tr,
.woocommerce-cart-form .shop_table td{
display:block;width:auto;max-width:100%;
}
.woocommerce-cart-form .shop_table thead{display:none}
.woocommerce-cart-form .shop_table tr.woocommerce-cart-form__cart-item{
position:relative;
border:1px solid var(--line-2);border-radius:var(--r-m);
padding:.9rem 1rem .9rem 1rem;margin-bottom:.8rem;background:#fff;
display:grid;grid-template-columns:72px minmax(0,1fr);gap:.2rem .9rem;
align-items:start;
}
.woocommerce-cart-form .shop_table td{border:0;padding:.2rem 0;text-align:start}
/* התמונה בעמודה משלה, לגובה כל הכרטיס */
.woocommerce-cart-form td.product-thumbnail{grid-column:1;grid-row:1 / span 4;width:72px}
.woocommerce-cart-form td.product-thumbnail img{width:72px;height:72px;object-fit:cover;border-radius:var(--r-s)}
.woocommerce-cart-form td.product-name{grid-column:2;font-weight:600;color:var(--navy);line-height:1.35}
.woocommerce-cart-form td.product-price,
.woocommerce-cart-form td.product-subtotal{grid-column:2;font-size:var(--step--1)}
.woocommerce-cart-form td.product-quantity{grid-column:2;margin-top:.35rem}
/* שם השדה לפני הערך — בלי הכותרות אין הקשר */
.woocommerce-cart-form td.product-price::before,
.woocommerce-cart-form td.product-subtotal::before{
content:attr(data-title) ": ";color:var(--ink-3);font-weight:400;
}
/* כפתור ההסרה בפינה ולא בעמודה משלו */
.woocommerce-cart-form td.product-remove{
position:absolute;inset-inline-end:.5rem;top:.5rem;width:auto;padding:0;
}
.woocommerce-cart-form td.product-remove a.remove{
width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
background:var(--wash);color:var(--ink-2)!important;font-size:1.1rem;line-height:1;
}
/* שורת הפעולות: קופון וכפתור עדכון אחד מתחת לשני */
.woocommerce-cart-form td.actions{padding-top:.6rem}
.woocommerce-cart-form td.actions .coupon{
display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;margin-bottom:.7rem;
}
.woocommerce-cart-form td.actions .coupon .input-text{width:100%;min-width:0}
.woocommerce-cart-form td.actions .button{width:100%}
.woocommerce-cart-form td.actions .coupon .button{width:auto;white-space:nowrap}
}
/* גם במסך רחב הקופון לא אמור להימתח על חצי טבלה */
.woocommerce-cart-form td.actions .coupon .input-text{max-width:220px}
.cart_totals{max-width:100%}
.cart_totals table{width:100%;table-layout:fixed}
.cart_totals th{text-align:start;font-weight:600;color:var(--navy)}
.cart_totals td{text-align:end}
.shop_table_responsive{width:100%}
/* ══════════════════════════ עמוד התשלום ══════════════════════════ */
/* ⚠️ בוררי המשלוח יושבים בתוך טבלת סיכום ההזמנה, ב- של שורת
ה-tfoot. הטבלה היא table-layout:auto ונתנה לעמודת התווית את רוב
הרוחב — ה- של שיטות המשלוח יצא 94px רוחב ותלוי באמצע המסך.
הפתרון: לפרק את שורת המשלוח לבלוקים ברוחב מלא. */
.woocommerce-checkout-review-order-table{width:100%;table-layout:fixed;border-collapse:collapse}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
padding:.7rem .2rem;border-bottom:1px solid var(--line-2);vertical-align:top;
}
.woocommerce-checkout-review-order-table th{text-align:start;font-weight:600;color:var(--navy)}
.woocommerce-checkout-review-order-table td{text-align:end}
.woocommerce-checkout-review-order-table .product-name{text-align:start;line-height:1.45}
.woocommerce-checkout-review-order-table .product-quantity{color:var(--ink-3);font-weight:400}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td{
font-size:var(--step-1);color:var(--navy);border-bottom:0;padding-top:1rem;
}
/* שורת המשלוח — שתי התאים הופכים לבלוקים, והרשימה תופסת את כל הרוחב */
/* ⚠️ אין דרך לנצח את מבנה הטבלה חלקית. כל עוד אב כלשהו נשאר חלק
ממנו, הדפדפן בונה תיבות טבלה אנונימיות והרוחב נגזר מהעמודה — 155px
מתוך 309, ובוררי המשלוח נתלים באמצע המסך. לכן **כל** הטבלה יוצאת
ממבנה הטבלה, והשורות נבנות מחדש כ-flex. */
.woocommerce-checkout-review-order-table,
.woocommerce-checkout-review-order-table thead,
.woocommerce-checkout-review-order-table tbody,
.woocommerce-checkout-review-order-table tfoot,
.woocommerce-checkout-review-order-table tr,
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{
display:block;width:auto;max-width:100%;
}
.woocommerce-checkout-review-order-table thead{display:none}
.woocommerce-checkout-review-order-table tr{
display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
width:100%;border-bottom:1px solid var(--line-2);padding:.65rem 0;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td{padding:0;border:0}
/* שורת המשלוח היא היחידה שנפרסת לשתי שורות — הבוררים צריכים רוחב מלא */
.woocommerce-shipping-totals{display:block!important;padding:.75rem 0}
.woocommerce-shipping-totals th,
.woocommerce-shipping-totals td{width:100%;text-align:start!important}
.woocommerce-shipping-totals th{margin-bottom:.45rem}
.woocommerce-shipping-totals th{padding-bottom:.35rem}
#shipping_method{display:grid;gap:.5rem;width:100%;margin:0;padding:0;list-style:none}
#shipping_method li{
display:flex;align-items:center;gap:.6rem;width:100%;margin:0;
border:1px solid var(--line);border-radius:var(--r-m);
padding:.7rem .9rem;background:#fff;cursor:pointer;
transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
#shipping_method li:hover{border-color:var(--navy)}
#shipping_method li:has(input:checked){border-color:var(--navy);background:var(--wash)}
#shipping_method label{
flex:1;display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
cursor:pointer;font-size:var(--step--1);line-height:1.4;margin:0;
}
#shipping_method label .woocommerce-Price-amount{font-weight:700;color:var(--navy);white-space:nowrap}
.woocommerce-shipping-destination{font-size:var(--step--2);color:var(--ink-3);margin-top:.5rem}
/* שדות הטופס */
.woocommerce-checkout .form-row{margin:0 0 .9rem;padding:0;display:grid;gap:.3rem}
.woocommerce-checkout .form-row label{font-size:var(--step--1);font-weight:600;color:var(--navy)}
.woocommerce-checkout .form-row .required{color:var(--red);text-decoration:none}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea{
width:100%;min-width:0;border:1px solid var(--line);border-radius:var(--r-s);
padding:.7rem .8rem;font:inherit;font-size:var(--step-0);background:#fff;color:var(--ink);
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus{
outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(11,31,58,.09);
}
.woocommerce-checkout .form-row.woocommerce-invalid .input-text{border-color:var(--red)}
/* כותרות המקטעים */
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading{
font-size:var(--step-1);color:var(--navy);margin:0 0 .9rem;
padding-bottom:.6rem;border-bottom:1px solid var(--line-2);
}
/* שני הבלוקים: פרטים מימין, סיכום משמאל — ובטלפון אחד מתחת לשני */
@media (min-width:900px){
form.checkout.woocommerce-checkout{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(1.5rem,3vw,3rem);align-items:start;
}
form.checkout > .col2-set,
form.checkout > #customer_details{grid-column:1}
form.checkout > #order_review_heading,
form.checkout > #order_review{grid-column:2}
form.checkout > #order_review{
position:sticky;top:calc(var(--navh) + 1rem);
border:1px solid var(--line-2);border-radius:var(--r-m);padding:1.2rem;background:var(--wash);
}
form.checkout > #order_review_heading{grid-row:1}
.col2-set .col-1,.col2-set .col-2{width:100%;float:none}
/* שדות שם פרטי/משפחה זה לצד זה */
.woocommerce-checkout .form-row-first,
.woocommerce-checkout .form-row-last{display:inline-grid;width:calc(50% - .4rem)}
.woocommerce-checkout .form-row-first{margin-inline-end:.8rem}
}
@media (max-width:899px){
form.checkout > #order_review{
border:1px solid var(--line-2);border-radius:var(--r-m);padding:1rem;background:var(--wash);
}
}
/* התשלום */
#payment{background:none;border-radius:0}
#payment ul.payment_methods{
border:0;padding:0;margin:0 0 1rem;display:grid;gap:.5rem;list-style:none;
}
#payment ul.payment_methods li{
border:1px solid var(--line);border-radius:var(--r-m);padding:.7rem .9rem;background:#fff;
}
#payment ul.payment_methods li label{font-size:var(--step--1);color:var(--navy);cursor:pointer}
#payment .payment_box{
background:var(--wash);border-radius:var(--r-s);padding:.7rem .9rem;margin:.6rem 0 0;
font-size:var(--step--2);color:var(--ink-2);
}
#payment .payment_box::before{display:none}
#place_order{
width:100%;height:52px;border-radius:var(--r-pill);
background:var(--navy);color:#fff;border:0;font-weight:700;font-size:var(--step-0);
}
#place_order:hover{background:var(--navy-3,#14293F)}
.woocommerce-terms-and-conditions-wrapper{margin-bottom:1rem}
.woocommerce-terms-and-conditions{
max-height:180px;overflow:auto;border:1px solid var(--line-2);border-radius:var(--r-s);
padding:.8rem;font-size:var(--step--2);color:var(--ink-2);margin-bottom:.8rem;
}
/* אפשרות שאזלה — אפורה, מסומנת בטקסט, ולא ניתנת לבחירה */
.variations select option:disabled,
.variations select option.is-gone{color:var(--ink-3);background:var(--wash)}
/* ⚠️ תוסף נקודות האיסוף מדפיס קישור עם תחביר Alpine שלא עבר עיבוד
(`:href="`https://maps.google.com/...`"`), כלומר קישור מת. מסתירים
אותו עד שהתוסף יתוקן — טוב יותר מלינק שלא עושה כלום. */
.woocommerce a[\:href]{display:none!important}
/* ════════════════════ דגימות במקום רשימה נפתחת ════════════════════ */
/* ה-select נשאר ב-DOM בשביל ווקומרס ובשביל מי שאין לו JS — הוא רק
יוצא מהמסך. display:none היה מסתיר אותו גם מהטופס עצמו. */
.variations select.is-swatched{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.swatches{display:flex;flex-wrap:wrap;gap:.5rem}
/* ---- צבעים: התמונה האמיתית של הגוון ---- */
.swatches--color .swatch{
position:relative;width:54px;padding:0;border-radius:var(--r-m);overflow:hidden;
border:1px solid var(--line);background:#fff;line-height:0;
transition:border-color .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}
.swatches--color .swatch img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.swatches--color .swatch:hover{transform:translateY(-2px)}
.swatches--color .swatch.is-on{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy)}
.swatch--text{display:grid;place-items:center;aspect-ratio:1/1;font-size:var(--step--2);
line-height:1.2;padding:.3rem;text-align:center;color:var(--navy)}
/* שם הגוון מתחת לדגימה. "שחור" ו"אפור כהה" נראים כמעט זהים בתמונה
קטנה — בלי שם אי אפשר לדעת מה נבחר. */
.swatches--color .swatch{width:60px}
.swatch__name{
display:block;padding:.25rem .15rem .3rem;
font-size:10px;line-height:1.25;font-weight:600;color:var(--ink-2);
text-align:center;white-space:normal;word-break:break-word;
}
.swatches--color .swatch.is-on .swatch__name{color:var(--navy)}
/* ---- שאר המאפיינים: כפתורים ---- */
.swatches--pill .swatch{
padding:.5rem .9rem;border-radius:var(--r-pill);border:1px solid var(--line);
background:#fff;font-size:var(--step--1);font-weight:600;color:var(--navy);
transition:border-color .18s var(--ease),background-color .18s var(--ease),color .18s var(--ease);
}
.swatches--pill .swatch:hover{border-color:var(--navy)}
.swatches--pill .swatch.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
/* ---- אזל: קו אלכסוני, לא נעלם ---- */
.swatch.is-gone{opacity:.45;cursor:not-allowed;pointer-events:none}
.swatches--color .swatch.is-gone::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top left,transparent calc(50% - 1px),var(--red) calc(50% - 1px),
var(--red) calc(50% + 1px),transparent calc(50% + 1px));
}
.swatches--pill .swatch.is-gone{text-decoration:line-through;text-decoration-color:var(--red)}
/* התוויות של ווקומרס כבר לא צריכות להיות בטבלה צמודה */
.variations th{padding-bottom:.35rem}
.variations td{padding-bottom:.2rem}
/* ─────────────── "נמכרו X" ─────────────── */
.prod__chip--sold{background:#EDF3FF;color:#2A4E86;font-weight:600}
.sum__sold{color:var(--ink-2)}
/* ─────────────── "איזה גודל קלף יש לי?" ─────────────── */
.sizehelp{margin:.1rem 0 .9rem}
.sizehelp__btn{
display:inline-flex;align-items:center;gap:.4rem;
font-size:var(--step--1);color:var(--ink-2);
text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line);
}
.sizehelp__btn svg{width:16px;height:16px;color:var(--navy)}
.sizehelp__btn:hover{color:var(--navy);text-decoration-color:var(--navy)}
.sizehelp-modal{
position:fixed;inset:0;z-index:150;display:grid;place-items:center;padding:1rem;
background:rgba(11,31,58,.62);
}
.sizehelp-modal[hidden]{display:none}
.sizehelp-modal__box{
position:relative;background:#fff;border-radius:var(--r-l);
width:min(100%,520px);max-height:85vh;overflow:auto;padding:1.6rem 1.5rem 1.4rem;
}
.sizehelp-modal__x{
position:absolute;top:.7rem;inset-inline-start:.7rem;
width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
background:var(--wash);color:var(--ink-2);
}
.sizehelp-modal__x svg{width:16px;height:16px}
.sizehelp-modal__x:hover{background:var(--line);color:var(--navy)}
.sizehelp-modal__h{font-size:var(--step-2);color:var(--navy);margin:0 0 .9rem}
.sizehelp-modal h3{font-size:var(--step-0);color:var(--navy);margin:1.1rem 0 .35rem}
.sizehelp-modal p{margin:0 0 .6rem;font-size:var(--step--1);line-height:1.75;color:var(--ink)}
.sizehelp-modal b{color:var(--navy)}
.sizehelp-modal__note{
margin-top:1.1rem;padding:.7rem .9rem;background:var(--wash);border-radius:var(--r-s);
font-size:var(--step--2);color:var(--ink-2);
}
.sizehelp-modal__note a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* ─────────────── שרטוט קנה מידה ─────────────── */
/* SVG ולא תמונה: נוצר מהמספרים, מתעדכן לבד, ושוקל מאות בתים. */
.scale{margin:.9rem 0 0;padding-top:.9rem;border-top:1px dashed var(--line)}
.scale__svg{width:100%;max-width:320px;height:auto;display:block}
.scale__a4{fill:#fff;stroke:var(--line);stroke-width:1;stroke-dasharray:4 3}
.scale__a4txt{fill:var(--ink-3);font-size:11px;font-family:var(--font)}
.scale__item{fill:var(--navy);opacity:.9}
.scale__dim{stroke:var(--ink-3);stroke-width:1}
.scale__num{fill:var(--navy);font-size:12px;font-weight:700;font-family:var(--font);direction:ltr}
.scale__cap{margin-top:.5rem;font-size:var(--step--2);color:var(--ink-2)}
.scale__cap b{color:var(--navy)}
/* ─────────── רשימת מידות לפי גודל ─────────── */
.scale-wrap{margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--line)}
.scale-list{display:grid;gap:.25rem;margin:0 0 .8rem}
.scale-list__row{
display:flex;justify-content:space-between;gap:.8rem;
font-size:var(--step--2);color:var(--ink-2);
padding:.25rem .4rem;border-radius:var(--r-s);
}
.scale-list__row dt{margin:0}
.scale-list__row dd{margin:0;color:var(--navy);font-weight:600}
.scale-list__row.is-on{background:#fff;color:var(--navy)}
.scale-fig[hidden]{display:none}
.scale{border-top:0;padding-top:0;margin-top:0}
/* ═══════════════ כרטיס "איך בוחרים מזוזה" ═══════════════ */
/* הסרטון והמידות עונים על אותה שאלה — מה אני מקבל ובאיזה גודל — ולכן
הם יושבים יחד. מתחת לאזור הקנייה: זה מעמיק, לא מכריע. */
.mez{
margin-top:1.4rem;padding:1.2rem;border:1px solid var(--line-2);
border-radius:var(--r-m);background:var(--wash);
}
.mez__h{font-size:var(--step-1);color:var(--navy);margin:0 0 1rem}
.mez__grid{display:grid;grid-template-columns:150px minmax(0,1fr);gap:1.1rem;align-items:start}
.mez__clips{display:grid;gap:.6rem}
.mez__vid{margin:0}
.mez__tag{
position:absolute;top:.4rem;inset-inline-end:.4rem;
background:rgba(11,31,58,.78);color:#fff;border-radius:var(--r-pill);
padding:.12rem .55rem;font-size:10px;font-weight:700;backdrop-filter:blur(3px);
}
/* ⚠️ במסך צר שתי עמודות חונקות את שורות המידות — התווית והערך
נשברים כל אחד לשתי שורות. עמודה אחת: הסרטון למעלה, המידות
מתחתיו ברוחב מלא. */
@media (max-width:560px){
.mez__grid{grid-template-columns:1fr;gap:.9rem}
/* שני הסרטונים זה לצד זה בטלפון — אחד מתחת לשני היה דוחף את
המידות הרחק מטה */
.mez__clips{grid-template-columns:1fr 1fr;gap:.5rem}
.mez__dim{font-size:var(--step--2)}
}
.mez__vid{
position:relative;border-radius:var(--r-m);overflow:hidden;background:#000;
box-shadow:0 10px 26px -12px rgba(11,31,58,.45);
}
.mez__vid video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.mez__play{
position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%;
background:rgba(255,255,255,.92);color:var(--navy);display:grid;place-items:center;
transition:transform .2s var(--ease),opacity .2s;
}
.mez__play svg{width:20px;height:20px;margin-inline-start:2px}
.mez__play:hover{transform:scale(1.08)}
.mez__play[hidden]{display:none}
.mez__sound{
position:absolute;bottom:.5rem;inset-inline-start:.5rem;width:32px;height:32px;border-radius:50%;
background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px);
}
.mez__sound svg{width:15px;height:15px}
.mez__sound[hidden]{display:none}
.mez__lead{margin:0 0 .8rem;font-size:var(--step--1);line-height:1.7;color:var(--ink)}
.mez__lead b{color:var(--navy)}
.mez__dims{display:grid;gap:.3rem;margin:0 0 .8rem}
.mez__dim{
display:flex;justify-content:space-between;gap:.8rem;
padding:.4rem .6rem;border-radius:var(--r-s);background:#fff;
font-size:var(--step--1);border:1px solid transparent;
}
.mez__dim dt{margin:0;color:var(--ink-2)}
.mez__dim dd{margin:0;color:var(--navy);font-weight:700}
.mez__dim.is-on{border-color:var(--navy)}
.mez__note{margin:0}
/* ═══════════════ הגדלת תמונת המוצר ═══════════════ */
.gal__zoom{
position:absolute;top:.6rem;inset-inline-start:.6rem;z-index:3;
width:36px;height:36px;border-radius:50%;
background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--navy);
display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(11,31,58,.4);
transition:background-color .2s var(--ease),color .2s var(--ease);
}
.gal__zoom svg{width:17px;height:17px}
.gal__zoom:hover{background:var(--navy);color:#fff}
.lightbox{
position:fixed;inset:0;z-index:200;
display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
gap:.5rem;padding:clamp(1rem,4vw,3rem);
background:rgba(6,15,28,.93);
}
.lightbox[hidden]{display:none}
.lightbox__img{
grid-column:2;max-width:100%;max-height:86vh;margin:0 auto;display:block;
object-fit:contain;border-radius:var(--r-s);background:#fff;
}
.lightbox__x{
position:absolute;top:1rem;inset-inline-start:1rem;
width:42px;height:42px;border-radius:50%;
background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
}
.lightbox__x svg{width:19px;height:19px}
.lightbox__x:hover{background:rgba(255,255,255,.24)}
.lightbox__nav{
width:44px;height:44px;border-radius:50%;flex:none;
background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;
}
.lightbox__nav svg{width:20px;height:20px}
.lightbox__nav:hover{background:rgba(255,255,255,.24)}
.lightbox__nav[hidden]{display:none}
.lightbox__nav--prev{grid-column:3}
.lightbox__nav--next{grid-column:1}
.lightbox__count{
position:absolute;bottom:1rem;inset-inline:0;text-align:center;
color:rgba(255,255,255,.7);font-size:var(--step--1);margin:0;direction:ltr;
}
@media (max-width:640px){
.lightbox{grid-template-columns:1fr;padding:1rem}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%)}
.lightbox__nav--prev{inset-inline-start:.6rem;grid-column:1}
.lightbox__nav--next{inset-inline-end:.6rem;grid-column:1}
}
/* ═══════════════ מקטע סרטון ההכרות ═══════════════ */
.introvid{
display:grid;grid-template-columns:200px minmax(0,1fr);gap:1.4rem;align-items:center;
margin:clamp(1.5rem,3vw,2.5rem) 0;padding:1.3rem;
border:1px solid var(--line-2);border-radius:var(--r-m);background:var(--wash);
}
.introvid__vid{position:relative;border-radius:var(--r-m);overflow:hidden;background:#000;
box-shadow:0 12px 30px -14px rgba(11,31,58,.5)}
.introvid__vid video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.introvid__h{font-size:var(--step-2);color:var(--navy);margin:0 0 .4rem}
.introvid__note{margin:0 0 .3rem;color:var(--ink);font-size:var(--step-0)}
.introvid__sub{margin:0;color:var(--ink-2);font-size:var(--step--1)}
@media (max-width:640px){
.introvid{grid-template-columns:1fr;gap:1rem;text-align:center}
.introvid__vid{max-width:190px;margin-inline:auto}
}
/* ═══════════ החזר לקהילה — לאורך המסלול ═══════════ */
.minicart__give{
display:flex;align-items:center;gap:.5rem;margin:.5rem 0 .2rem;
padding:.55rem .7rem;border-radius:var(--r-s);
background:#EDF3FF;color:#2A4E86;font-size:var(--step--2);line-height:1.4;
}
.minicart__give svg{width:15px;height:15px;flex:none;color:#4285F4}
.minicart__give b{color:#1B3A66}
/* ═══════════ משלוח חינם מעל סכום — מגירה + עמוד הסל ═══════════ */
.freeship{
margin:.5rem 0 .2rem;padding:.55rem .7rem;border-radius:var(--r-s);
background:var(--wash);color:var(--ink-2);font-size:var(--step--2);line-height:1.4;
}
.freeship__txt{margin:0 0 .4rem}
.freeship__txt b{color:var(--navy)}
.freeship__bar{display:block;height:6px;border-radius:99px;background:var(--line-2);overflow:hidden}
.freeship__bar i{display:block;height:100%;border-radius:inherit;background:var(--gold);transition:width .3s}
.freeship.is-done{background:#EAF5EC}
.freeship.is-done b{color:var(--green)}
.freeship.is-done .freeship__bar i{background:var(--green)}
.woocommerce-cart .freeship{margin:0 0 1rem;padding:.75rem 1rem;font-size:var(--step--1)}
.woocommerce-checkout-review-order-table tr.values-give{color:#2A4E86}
.woocommerce-checkout-review-order-table tr.values-give th{color:#2A4E86;font-weight:600}
.woocommerce-checkout-review-order-table tr.values-give b{color:#1B3A66}
.give-thanks{
display:flex;align-items:flex-start;gap:.7rem;
margin:0 0 1.4rem;padding:1rem 1.1rem;border-radius:var(--r-m);
background:#EDF3FF;border:1px solid #D4E2FA;
}
.give-thanks svg{width:22px;height:22px;flex:none;color:#4285F4;margin-top:.15rem}
.give-thanks p{margin:0;display:grid;gap:.2rem;font-size:var(--step--1);line-height:1.6;color:#2A4E86}
.give-thanks b{color:#1B3A66}
.shop__give{
display:inline-flex;align-items:center;gap:.45rem;margin:.4rem 0 0;
font-size:var(--step--1);color:var(--ink-2);
}
.shop__give svg{width:15px;height:15px;flex:none;color:#4285F4}
|