/* AVIGAI Wrapper Studio - גיליון הסגנון של הסטודיו.

   שים לב לדבר אחד לפני שמוסיפים כאן משהו: בגרסה הזו אין ולא צריך להיות שום
   בלוק CSS שקשור לעיצוב מסוים. מיקום הכיתוב ומיקום התמונה נשמרים בסנטימטרים
   על הגיליון השטוח ומגיעים מ-assets/data/designs.json, וצבע הטקסט מגיע משם
   דרך המשתנה --avs-ink. לכן הוספת עיצוב חדש לא נוגעת בקובץ הזה בכלל.

   הקובץ מחולק לשלושה חלקים: (1) מסגרת העמוד, (2) התצוגה העטופה, (3) העורך. */

/* ============================ 1. מסגרת העמוד ============================ */

.avs{--wine:#713144;--teal:#0d7774;--cream:#fffaf1;--ink:#34292b;--line:#eadfd5;width:100%;max-width:1420px;margin:0 auto;padding:38px 20px 64px;color:var(--ink);font-family:Arial,"Noto Sans Hebrew",sans-serif;box-sizing:border-box;line-height:1.45}
.avs *{box-sizing:border-box}
.avs button,.avs input,.avs textarea,.avs select{font:inherit;line-height:inherit;text-transform:none;letter-spacing:0}
.avs button{appearance:none;-webkit-appearance:none}

/* ---- שומר הקופה: הודעה כשהעדכון לא חוזר ---- */
.avs-checkout-guard{margin:0 0 1rem;padding:.8rem 1rem;border:1px solid #f0dfc2;background:#fdf4e6;
  border-radius:12px;color:#8a5a20;text-align:start;line-height:1.6}
.avs-checkout-guard p{margin:0 0 .5rem}
.avs-checkout-retry{border:0;border-radius:999px;background:#3f6b52;color:#fff;
  padding:.45rem 1.1rem;font:inherit;cursor:pointer}
/* קופסת האבחון: מוצגת רק עם ?avigai_debug=1 */
/* קופסת האבחון של העורך: קריאה גם בטלפון */
.avs-v2 .avs-debug{margin:0 0 1rem;padding:.7rem .9rem;border:1px dashed #c9bcae;background:#fff;
  border-radius:10px;font-size:12px;line-height:1.7;white-space:pre-wrap;word-break:break-word;
  direction:rtl;text-align:start;max-height:280px;overflow:auto}
.avs-checkout-debug{margin:0 0 1rem;padding:.8rem 1rem;border:1px dashed #c9bcae;background:#fff;
  border-radius:10px;font-size:12px;line-height:1.7;white-space:pre-wrap;word-break:break-word;
  max-height:320px;overflow:auto}

/* ---- שורות הסל והקופה: הסרה ושמירה לפעם הבאה ----
   הכפתורים מוזרקים ב-JS לתוך שורות שהבלוקים מרנדרים, ולכן הסגנון כאן חייב
   לעמוד בפני עצמו ולא להסתמך על מחלקות של ווקומרס. */
.avs-line-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.35rem}
.avs-line-save{border:1px solid #cfe0d5;background:#f2f8f4;color:#2f5a42;border-radius:999px;
  padding:.25rem .7rem;font:inherit;font-size:.78rem;cursor:pointer}
.avs-line-remove{border:0;background:transparent;color:#8a2b20;font:inherit;font-size:.78rem;
  cursor:pointer;text-decoration:underline}
.avs-line-save[disabled],.avs-line-remove[disabled]{opacity:.5;cursor:default}

/* הרשימה "שמור לפעם הבאה" */
.avs-saved{margin:1.2rem 0;padding:1rem;border:1px dashed #e5ddd1;border-radius:12px;background:#faf7f2}
.avs-saved h2{margin:0 0 .2rem;font-size:1.1rem}
.avs-saved-note{margin:0 0 .7rem;font-size:.85rem;color:#6f6261}
.avs-saved ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.avs-saved li{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  border-bottom:1px solid #efe8dd;padding-bottom:.5rem}
.avs-saved-what{flex:1 1 200px;font-size:.9rem}
.avs-saved-restore{border:0;background:#3f6b52;color:#fff;border-radius:999px;
  padding:.35rem .9rem;font:inherit;font-size:.8rem;cursor:pointer}
.avs-saved-forget{border:0;background:transparent;color:#8a7f72;font:inherit;font-size:.8rem;
  cursor:pointer;text-decoration:underline}

/* מה בעצם מקבלים. מופיע מתחת לקנבס בעטיפה ובכרטיסי עמוד הנחיתה. */
.avs-what-you-get{margin:.6rem 0 0;font-size:13px;line-height:1.6;color:#6f6261;text-align:center}
/* הערת שוליים: קטנה ואפורה יותר מהמשפט שמעליה, כדי שתיקרא כהערה ולא כחלק ממנו */
.avs-mockup-note{margin:.15rem 0 0;font-size:11.5px;line-height:1.5;color:#9a908c;text-align:center}
/* התמונה נשלפה מהשרת ולא מהעותק המקומי - בדיוק המצב שבו סינון תוכן עלול
   לרוקן אותה, ולכן ההערה בולטת ולא אפורה-שקטה */
.avs-photo-note{margin:.5rem 0 0;padding:.5rem .7rem;font-size:12.5px;line-height:1.5;
  color:#8a5a20;background:#fdf4e6;border:1px solid #f0dfc2;border-radius:10px;text-align:center}
.avs-lp-card .avs-what-you-get{text-align:start;font-size:12.5px;margin:.4rem 0 .6rem}

/* הטופס של העיצוב החינמי */
.avs-free-form{max-width:520px;margin:1rem auto 0;padding:1rem 1.1rem;border:1px solid #e5ddd1;
  border-radius:14px;background:#faf7f2;text-align:start}
.avs-free-form h3{margin:0 0 .3rem;font-size:18px}
.avs-free-note{margin:0 0 .8rem;font-size:13px;color:#6f6261}
.avs-free-form label{display:block;margin-bottom:.7rem;font-size:14px}
.avs-free-form label input[type=text],.avs-free-form label input[type=email]{display:block;width:100%;
  box-sizing:border-box;margin-top:.25rem;border:1px solid #e5ddd1;border-radius:10px;padding:.6rem;font:inherit}
.avs-free-consent{display:flex;gap:.5rem;align-items:flex-start;font-size:13px;line-height:1.5;cursor:pointer}
.avs-free-consent input{margin-top:.25rem;flex:0 0 auto}
.avs-free-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.6rem}
.avs-free-send{border:0;border-radius:999px;background:#3f6b52;color:#fff;padding:.65rem 1.4rem;font:inherit;cursor:pointer}
.avs-free-send[disabled]{opacity:.6;cursor:default}
.avs-free-cancel{border:1px solid #e5ddd1;border-radius:999px;background:#fff;padding:.65rem 1.2rem;font:inherit;cursor:pointer}
.avs-free-error{background:#fdecea;border:1px solid #f3c9c4;border-radius:10px;padding:.5rem .7rem;color:#8a2b20;font-size:13px}
.avs-free-done{background:#e4f1e9;border:1px solid #cfe0d5;border-radius:10px;padding:.5rem .7rem;color:#2f5a42;font-size:13px}
/* בעיצוב החינמי אין מחיר להציג */
.avs-is-free .avs-finish-info strong{display:none}

/* ---- מעל קו הקיפול ----
   כותרת התבנית מוסתרת בעמוד הסטודיו: היא אמרה בדיוק את מה שהכותרת שלנו
   אומרת, ושתיהן יחד דחפו את הקנבס ואת המחיר מתחת לקו הקיפול של המסך. */
body.avigai-studio-page .entry-title,
body.avigai-studio-page .page-title,
body.avigai-studio-page .wp-block-post-title,
body.avigai-studio-page .entry-header .entry-title{display:none}
/* והרווח שנשאר אחריה */
body.avigai-studio-page .entry-header,
body.avigai-studio-page .page-header{margin-block:0;padding-block:0}

/* ---- עמוד הנחיתה: איך זה עובד, שאלות, וכך זה נראה מודפס ---- */
.avs-lp-how,.avs-lp-faq,.avs-lp-printed{margin:2rem 0;text-align:center}
.avs-lp-how h2,.avs-lp-faq h2,.avs-lp-printed h2{margin:0 0 .8rem}
.avs-lp-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.2rem;
  list-style:none;margin:0;padding:0;color:#6f6261}
.avs-lp-steps li{display:flex;align-items:center;gap:.4rem}
.avs-lp-steps span{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:50%;background:var(--avs-accent,#c08a3e);color:#fff;font-size:12px;font-weight:700;flex:0 0 auto}
.avs-lp-faq details{max-width:640px;margin:0 auto .5rem;border:1px solid #e5ddd1;border-radius:12px;
  background:#fff;padding:.7rem .9rem;text-align:start}
.avs-lp-faq summary{cursor:pointer;font-weight:600}
.avs-lp-faq p{margin:.5rem 0 0;color:#6f6261;line-height:1.7}
.avs-lp-printed img{max-width:100%;height:auto;border-radius:14px}
.avs-lp-printed.is-empty{border:1px dashed #e5ddd1;border-radius:14px;padding:1rem;color:#8a7f72}
@media(max-width:600px){.avs-lp-steps{font-size:.9rem;gap:.4rem .7rem}}

/* ארבעת השלבים */
.avs-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem .9rem;
  list-style:none;margin:0 0 14px;padding:0;font-size:13px;color:#6f6261}
.avs-steps li{display:flex;align-items:center;gap:.35rem}
.avs-steps li+li::before{content:'←';margin-inline-end:.5rem;color:#c9bcae}
.avs-steps span{display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--avs-accent,#c08a3e);color:#fff;
  font-size:11px;font-weight:700;flex:0 0 auto}
@media(max-width:600px){.avs-steps{font-size:11.5px;gap:.3rem .5rem}
  .avs-steps li+li::before{margin-inline-end:.25rem}}

/* שלוש ההבטחות מתחת לכפתור הקנייה */
.avs-buy-trust{margin:.45rem 0 0;font-size:12px;line-height:1.5;color:#6f6261;text-align:center}

/* תווית "הכי משתלם" על הסט */
.avs-chip-badge{display:block;font-style:normal;font-size:10.5px;font-weight:700;
  background:#3f6b52;color:#fff;border-radius:999px;padding:.1rem .5rem;margin-bottom:.25rem}
.avs-chip-bundle.is-active .avs-chip-badge{background:#fff;color:#3f6b52}

/* תצוגות מקדימות של שלושת חלקי הסט במחוון */
.avs-bundle-step{display:inline-flex;align-items:center;gap:.35rem}
.avs-bundle-thumb{width:26px;height:26px;object-fit:cover;border-radius:5px;
  background:#fff;flex:0 0 auto}

.avs-intro{text-align:center;padding:10px 0 12px;scroll-margin-top:100px}
/* הכיתוב הקטן מעל הכותרת. הריווח הורד מ-1.2px: הוא נועד לשורה לועזית
   באותיות גדולות, ובעברית - שאין בה אותיות גדולות - הוא פירק את המילים. */
.avs-kicker{font-size:12px;font-weight:800;letter-spacing:.3px;color:var(--wine)}
.avs-intro h1{font-size:clamp(30px,4vw,52px);line-height:1.15;margin:8px 0;color:var(--wine)}
.avs-intro p{margin:0;color:#6f6261}

.avs-panel{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 10px 34px rgba(77,44,39,.07);padding:22px;margin:0 0 20px}
.avs-heading{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.avs-heading>span{flex:0 0 34px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--wine);color:#fff;font-weight:800}
.avs-heading h2{margin:0;font-size:22px;line-height:1.25;color:var(--wine)}
.avs-heading p{margin:3px 0 0;font-size:13px;color:#847572}

/* ---- לשוניות נושא ורשת העיצובים ---- */
.avs-theme-row{display:grid;grid-template-columns:1fr;gap:16px}
.avs-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:0 0 14px}
.avs-tabs button{display:flex!important;min-width:0!important;min-height:64px!important;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--line)!important;border-radius:14px!important;padding:7px!important;background:#fff!important;color:#d92f61!important;font-size:13px!important;cursor:pointer!important;box-shadow:none!important}
.avs-tabs button i{font-style:normal;font-size:18px;line-height:1}
.avs-tabs button.is-active{background:#fff7f8!important;color:var(--wine)!important;border-color:var(--wine)!important;box-shadow:0 0 0 2px rgba(113,49,68,.08)!important}

.avs-design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.avs-design{display:grid!important;grid-template-columns:82px 1fr 20px;align-items:center;gap:10px;width:100%!important;min-height:64px;text-align:right!important;border:1px solid var(--line)!important;border-radius:15px!important;padding:8px 10px!important;background:#fff!important;color:#d92f61!important;cursor:pointer!important;box-shadow:none!important}
.avs-design[hidden]{display:none!important}
.avs-design.is-active{outline:3px solid rgba(13,119,116,.22)!important;border-color:var(--teal)!important}
.avs-design:after{content:"";width:20px;height:20px;border-radius:50%;background:#eee5df;grid-column:3;grid-row:1}
.avs-design.is-active:after{content:"✓";display:grid;place-items:center;background:var(--wine);color:#fff;font-weight:800}
/* התמונה הממוזערת היא קובץ העיצוב עצמו, מוזרק inline מ-PHP. אין כאן שום
   כלל לכל עיצוב - וזה בדיוק מה שמאפשר להוסיף עיצוב בלי לגעת ב-CSS. */
.avs-design .avs-thumb{grid-column:1;grid-row:1;display:block;width:82px;height:48px;border-radius:10px;background-color:#f7efe5;background-size:cover;background-position:center 32%}
.avs-design span{grid-column:2;grid-row:1;display:grid;gap:2px;padding:0;font-weight:700}
.avs-design small{color:#8b7b74;font-size:11px;font-weight:400}

/* ---- סרגל העריכה ---- */
.avs-workspace{display:grid;grid-template-columns:minmax(300px,370px) minmax(0,1fr);gap:20px;align-items:start}
.avs-editor{position:sticky;top:90px}
.avs-editor>label,.avs-text-controls>label,.avs-photo-controls>label{display:grid;gap:7px;margin-bottom:12px;font-weight:700}
.avs-field{width:100%!important;max-width:none!important;border:1px solid #d9cbc2!important;border-radius:11px!important;padding:10px 12px!important;background:#fff!important;color:var(--ink)!important;box-shadow:none!important}
.avs-field:focus{outline:3px solid rgba(13,119,116,.16)!important;border-color:var(--teal)!important}
.avs-upload{position:relative}
.avs-upload input{position:absolute;opacity:0;width:1px;height:1px}
.avs-upload span{display:block;text-align:center;border:1px dashed var(--teal);color:var(--teal);border-radius:12px;padding:12px;cursor:pointer}

.avs-upgrade-start{display:grid;gap:8px}
.avs-upgrade-start small{color:#7c6c68;text-align:center}
.avs-upgrade{width:100%;padding:13px 15px!important;border:1px solid var(--teal)!important;border-radius:12px!important;background:#f2fbfa!important;color:var(--teal)!important;font-weight:800!important;cursor:pointer!important}
.avs-upgrade b{float:left;color:var(--wine)}
.avs-downgrade{display:block!important;width:100%!important;margin-top:8px!important;padding:9px 10px!important;border:1px dashed #c9a3ab!important;border-radius:10px!important;background:transparent!important;color:#a1495a!important;font-size:12px!important;font-weight:700!important;cursor:pointer!important}
.avs-downgrade:hover{background:#fdf3f4!important;border-color:#a1495a!important}
.avs-photo-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
.avs-photo-tools button{padding:9px 7px!important;border:1px solid var(--line)!important;border-radius:10px!important;background:#fff!important;color:var(--wine)!important;font-size:12px!important;font-weight:700!important;cursor:pointer!important}
.avs-photo-tools button:hover{border-color:var(--teal)!important;background:#f2fbfa!important;color:var(--teal)!important}

/* ---- הרשאות לפי מסלול ---- */
.avs.avs-plan-ready .avs-upgrade-start{display:grid}
.avs.avs-plan-text .avs-upgrade-start,.avs.avs-plan-photo .avs-upgrade-start,.avs.avs-plan-photoonly .avs-upgrade-start{display:none}
.avs.avs-plan-ready .avs-text-controls,.avs.avs-plan-ready .avs-photo-controls{display:none}
.avs.avs-plan-text .avs-text-controls,.avs.avs-plan-photo .avs-text-controls{display:block}
.avs.avs-plan-photoonly .avs-text-controls{display:none}
.avs.avs-plan-text .avs-photo-controls{display:none}
.avs.avs-plan-photo .avs-photo-controls,.avs.avs-plan-photoonly .avs-photo-controls{display:block}
.avs.avs-plan-photo .avs-add-photo{display:none}
.avs .avs-add-text-too{display:none}
.avs.avs-plan-photoonly .avs-add-text-too{display:block}
.avs .avs-downgrade-to-ready{display:none!important}
.avs.avs-plan-photoonly .avs-downgrade-to-text{display:none!important}
.avs.avs-plan-photoonly .avs-downgrade-to-ready{display:block!important}
/* במסלול "תמונה בלבד" אין כיתוב, ובמסלול הבסיס אין תמונה - כך שאף פעם אין חפיפה */
.avs.avs-plan-ready .avs-layer-text,.avs.avs-plan-photoonly .avs-layer-text{display:none!important}
.avs.avs-plan-ready .avs-photo-crop,.avs.avs-plan-text .avs-photo-crop{display:none!important}

/* ---- רשימת שורות הכיתוב בסרגל ---- */
.avs-lines-head{display:grid;gap:3px;margin-bottom:9px}
.avs-lines-head small{font-weight:400;color:#847572;font-size:12px;line-height:1.4}
.avs-lines{display:grid;gap:7px}
.avs-line-row{display:grid;grid-template-columns:1fr 34px;gap:6px;align-items:center}
.avs-line-row input{width:100%!important;max-width:none!important;border:1px solid #d9cbc2!important;border-radius:11px!important;padding:9px 12px!important;background:#fff!important;color:var(--ink)!important;box-shadow:none!important}
.avs-line-row input:focus{outline:3px solid rgba(13,119,116,.16)!important;border-color:var(--teal)!important}
.avs-line-row.is-selected input{border-color:var(--teal)!important;background:#f6fdfc!important}
.avs-line-del{width:34px;height:34px;padding:0!important;border:1px dashed #c9a3ab!important;border-radius:10px!important;background:transparent!important;color:#a1495a!important;font-weight:800!important;cursor:pointer!important}
.avs-line-del:hover{background:#fdf3f4!important;border-color:#a1495a!important}
.avs-add-line{width:100%;margin:9px 0 12px;padding:10px 12px!important;border:1px dashed var(--teal)!important;border-radius:11px!important;background:#f2fbfa!important;color:var(--teal)!important;font-weight:800!important;cursor:pointer!important}
.avs-add-line[disabled]{opacity:.5;cursor:default!important}

/* ---- מדבקות: תוספת רשות, ולכן מקופלת ולא בולטת כמו שאר השלבים ---- */
.avs-stickers{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.avs-sticker-toggle{display:flex!important;width:100%!important;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 12px!important;border:1px solid var(--line)!important;border-radius:12px!important;background:#fff!important;color:var(--wine)!important;font-weight:800!important;cursor:pointer!important;box-shadow:none!important}
.avs-sticker-toggle small{font-weight:400;font-size:12px;color:#847572}
.avs-sticker-toggle[aria-expanded=true]{border-color:var(--teal)!important;color:var(--teal)!important}
.avs-sticker-panel{margin-top:10px}
.avs-sticker-hint{margin:0 0 9px;font-size:12px;color:#847572;line-height:1.45}
.avs-sticker-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}
.avs-sticker-pick{min-height:44px;padding:0!important;border:1px solid var(--line)!important;border-radius:11px!important;background:#fff!important;font-size:22px!important;line-height:1!important;cursor:pointer!important;box-shadow:none!important}
.avs-sticker-pick:hover{border-color:var(--teal)!important;background:#f2fbfa!important}

/* ---- סיום והצעות משלימות ---- */
.avs-finish{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}
.avs-finish>div{font-size:18px;color:var(--wine)}
.avs-submit-area{display:flex;align-items:center;gap:12px}
.avs-submit-error{max-width:360px;margin:0;color:#a12635;font-size:13px;font-weight:700}
.avs-cta{border:0!important;border-radius:14px!important;background:var(--teal)!important;color:#fff!important;padding:15px 22px!important;font-weight:800!important;font-size:16px!important;cursor:pointer!important;box-shadow:0 8px 18px rgba(13,119,116,.2)!important;white-space:nowrap}
.avs-cta:hover{filter:brightness(.94)}
.avs-offer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.avs-offer-card{display:block;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 10px 30px rgba(77,44,39,.07);transition:.2s}
.avs-offer-card:hover{transform:translateY(-3px);border-color:var(--teal)}
.avs-offer-card>span{font-size:38px}
.avs-offer-card h2{margin:9px 0 3px;color:var(--wine);font-size:21px}
.avs-offer-card p{margin:0;color:#7c6c68}
.avs-offer-actions{display:flex;justify-content:center;align-items:center;gap:14px;margin:28px 0}
.avs-cart-link{padding:14px 22px;border:1px solid var(--teal);border-radius:14px;color:var(--teal);text-decoration:none;font-weight:800}

/* ======================= 2. התצוגה העטופה (הבמה) ======================= */

/* .avs-wrapper הוא בדיוק תיבת האריזה: assets/images/base-wrapped.png חתוכה
   לגבולות האלפא שלה (1645×735). זה מה שנותן משמעות ליחסי הקיפול שנמדדו
   ונשמרו ב-assets/data/fold-contour-v2.json תחת wrap_display.

   סדר השכבות:
     1 .avs-design-art     - קנבס. העיצוב השטוח, מעוות לצורת האריזה ב-JS.
     2 .avs-wrap-base      - תמונת האריזה הריקה ב-multiply: רק הקמטים וההצללה
                             מכהים את מה שמתחת, הלבן הוא פעולת סרק.
     4 .avs-layer-text     - שורות הכיתוב, כל אחת אלמנט עצמאי
     5 .avs-layer-sticker  - המדבקות
     6 .avs-photo-crop     - התמונה של הלקוחה
     7 .avs-fold-guides    - קווי הקיפול, רק בזמן גרירה או שינוי גודל

   הצל אינו צרוב בתמונה (הקובץ שסופק נקי ושקוף), ולכן הוא נוסף כאן כ-drop-shadow
   על הבמה - כך הוא עוקב אחרי צללית האריזה ולא אחרי מלבן.

   על יחס הצדדים: --avs-wrap-aspect נקבע ב-JS מתוך טבלת הקיפול, ולא מיחס
   הפיקסלים של base-wrapped.png. התצלום הוא של אריזה ארוכה וצרה יותר מזו
   שהגיליון נועד לה, וציור הגיליון לתוך יחס התצלום מתח את העיצוב לרוחב.
   ההסבר המלא ב-assets/wrap-map.js תחת trueAspect(). הערך שכאן משמש רק עד
   שה-JS מספיק למדוד. */
.avs-preview{position:relative;min-height:430px;padding:34px 22px 18px;border-radius:22px;background:radial-gradient(circle at 50% 42%,#fff 0,#fffaf2 52%,#f4e9dd 100%);overflow:hidden}
.avs-preview-inner{display:grid;grid-template-columns:1fr;align-items:center;min-height:330px}
/* הצללה עמוקה יותר: החטיף צריך להיראות מונח על משטח, לא גזור ומודבק */
.avs-stage{display:grid;place-items:center;width:100%;direction:rtl;
  filter:drop-shadow(0 10px 12px rgba(43,28,20,.16)) drop-shadow(0 26px 34px rgba(43,28,20,.22))}
.avs-wrapper{position:relative;width:min(660px,96%);aspect-ratio:var(--avs-wrap-aspect,1645/735);isolation:isolate;overflow:visible;background:none;border:0;border-radius:0;box-shadow:none;transform:none;--avs-ink:#5c4326;--avs-wrap-shade:1;--avs-font:inherit}

/* בלי מסכת CSS: החיתוך לצללית החטיף נעשה בתוך הקנבס עצמו (paintArt).
   ראו את ההערה אצל .avs .avs-design-art למטה - מסכה כאן היא מלכודת. */
.avs-design-art{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;pointer-events:none}
/* שכבת המסך הישנה. base-wrapped.png כבר אינו נארז בתוסף - בסיס האריזה היום
   הוא bar-base.png, והוא מצויר לתוך הקנבס ולא כשכבת רקע. */
.avs-wrap-base{display:none}

/* ---- שורות הכיתוב והמדבקות ----

   כל שורה היא אלמנט עצמאי שהלקוחה מוסיפה, גוררת, משנה גודל ומוחקת בנפרד,
   ולכן ה-JS הוא שיוצר אותן. המיקום, הרוחב, הגובה וגודל הגופן נקבעים כולם
   ב-JS מתוך הקואורדינטות בסנטימטרים על הגיליון השטוח - כאן רק המראה.

   משפחת הגופן מגיעה מ---avs-font, שה-JS מציב מתוך רישום סגנונות הכתב שבקובץ
   התוסף. אין כאן מחלקת font-* לכל סגנון: הוספת סגנון כתב היא שורה אחת ברישום
   ולא בלוק CSS, ובעיקר - כל גופן ברישום הוא גופן שיש בו אותיות עבריות. */
.avs-layer{position:absolute;inset:0;pointer-events:none}
.avs-layer-text{z-index:4}
.avs-layer-sticker{z-index:5}
.avs-layer>*{pointer-events:auto}

.avs-text-item,.avs-sticker-item{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;touch-action:none;user-select:none;-webkit-user-select:none;cursor:move}
.avs-text-item{color:var(--avs-ink);font-family:var(--avs-font,inherit);text-shadow:0 1px 2px rgba(255,255,255,.55);line-height:1.05;white-space:nowrap}
.avs-wrapper.ink-on-dark .avs-text-item{text-shadow:0 1px 3px rgba(0,0,0,.55)}
/* flex:0 0 auto הוא מה שמאפשר למדוד את הרוחב הטבעי של השורה: בלעדיו הדפדפן
   מכווץ את הפריט לרוחב התיבה, ואז אי אפשר לדעת בכמה הטקסט חורג ממנה - וההקטנה
   האוטומטית של הגופן (renderItems ב-studio.js) לא הייתה מזהה חריגה בכלל. */
.avs-text-item .avs-text-body{flex:0 0 auto;white-space:nowrap}
.avs-text-item.is-empty .avs-text-body:after{content:"שורה ריקה";opacity:.45}
.avs-sticker-item{font-size:1px;line-height:1}
.avs-sticker-item .avs-sticker-glyph{display:block;width:100%;text-align:center}
.avs-text-item.is-selected,.avs-sticker-item.is-selected{outline:2px dashed var(--teal);outline-offset:4px}

/* כפתור המחיקה של אלמנט בודד, מופיע רק כשהוא נבחר */
.avs-item-remove{display:none;position:absolute;top:-13px;right:-13px;width:24px;height:24px;padding:0;border-radius:50%;background:#fff!important;border:1px solid #d9b6bd!important;color:#a1495a!important;font-size:13px!important;font-weight:800!important;line-height:1;cursor:pointer;box-shadow:0 2px 7px rgba(40,25,20,.3);z-index:9}
.avs-text-item.is-selected .avs-item-remove,.avs-sticker-item.is-selected .avs-item-remove{display:block}
.avs-item-remove:hover{border-color:#a1495a!important;background:#fdf3f4!important}

.avs-photo-crop{position:absolute;z-index:6;left:38%;top:28%;width:24%;aspect-ratio:1;border-radius:50%;overflow:visible;touch-action:none;cursor:move}
.avs-photo-viewport{position:absolute;inset:0;display:block;border-radius:50%;overflow:hidden;pointer-events:none}
.avs-photo-crop img{position:absolute;left:50%;top:50%;width:115%;height:115%;max-width:none!important;object-fit:cover;transform:translate(-50%,-50%);pointer-events:none;user-select:none;clip-path:none!important}
.avs-photo-crop.is-selected{outline:2px dashed var(--teal);outline-offset:5px}
.avs-photo-handle{display:none;position:absolute;width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:var(--teal);box-shadow:0 2px 7px #555;z-index:8}
.avs-photo-crop.is-selected .avs-photo-handle{display:block}
.avs-handle-nw{left:-10px;top:-10px;cursor:nwse-resize}
.avs-handle-ne{right:-10px;top:-10px;cursor:nesw-resize}
.avs-handle-sw{left:-10px;bottom:-10px;cursor:nesw-resize}
.avs-handle-se{right:-10px;bottom:-10px;cursor:nwse-resize}

.avs-hint{display:none;text-align:center;color:#7c6c68;font-size:13px;margin:10px 0 0}
.avs.avs-has-photo .avs-hint{display:block}

/* ============================= 3. העורך ============================= */

/* קווי הקיפול ותוויות האזורים. מיקומם נקבע ב-JS מתוך wrap_display, ולכן שום
   מספר גיאומטרי לא מקובע כאן.

   הם מופיעים אך ורק בזמן גרירה או שינוי גודל של אלמנט (‎.is-placing‎, שה-JS
   מוסיף רק אחרי תזוזה ממשית). בכוונה אין כאן ‎:hover‎ ואין ‎:focus-within‎:
   ריחוף סתם מעל האריזה הציג ללקוחה "גב עליון" ו"גב תחתון" ונראה כמו שרטוט
   לא גמור. התוויות הן כלי עזר לרגע המיקום עצמו, לא חלק מהמוצר. */
.avs-fold-guides{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;transition:opacity .18s ease}
.avs-wrapper.is-placing .avs-fold-guides{opacity:1}
.avs-fold-line{position:absolute;left:2.5%;right:2.5%;height:0;border-top:1px dashed rgba(13,119,116,.85)}
.avs-fold-zone{position:absolute;right:4.5%;height:auto!important;margin-top:4px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.88);box-shadow:0 1px 3px rgba(60,40,30,.2);font-size:10px;font-weight:800;letter-spacing:.3px;line-height:1.5;color:#0b6663;white-space:nowrap}

/* ידיות ההזזה ושינוי הגודל. כל תזוזה נשמרת כסנטימטרים על הגיליון - ראו
   assets/wrap-map.js. */
.avs-place-grip{display:none;position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--teal);box-shadow:0 2px 7px rgba(40,25,20,.35);z-index:9;touch-action:none}
.avs-place-grip:before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:var(--teal)}
.avs-place-move{left:50%;top:-27px;transform:translateX(-50%);cursor:grab}
.avs-place-move:before{content:"\271B"}
.avs-place-size{right:-11px;bottom:-11px;cursor:nwse-resize}
.avs-place-size:before{content:"\21F2"}
.avs-text-item.is-selected>.avs-place-grip,.avs-sticker-item.is-selected>.avs-place-grip,.avs-photo-crop.is-selected>.avs-place-grip{display:block}

/* אייקוני מראה/סיבוב, יושבים על התמונה עצמה */
.avs-icon-btn{display:none;position:absolute;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(48,31,24,.22);align-items:center;justify-content:center;color:var(--wine);cursor:pointer;z-index:9;padding:0}
.avs-icon-btn svg{width:17px;height:17px;pointer-events:none}
.avs-icon-btn:hover{border-color:var(--teal);color:var(--teal)}
.avs-icon-btn[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.avs-photo-crop.is-selected .avs-icon-btn{display:flex}
.avs-icon-mirror{top:-16px;left:50%;transform:translateX(-50%)}
.avs-icon-group-rotate{display:none;position:absolute;top:50%;right:100%;transform:translateY(-50%);margin-right:10px;flex-direction:column;gap:7px;z-index:9}
.avs-photo-crop.is-selected .avs-icon-group-rotate{display:flex}
.avs-icon-group-rotate .avs-icon-btn{position:static;display:flex}

/* ============================ רספונסיביות ============================ */

@media(max-width:1000px){.avs-design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.avs{padding-top:20px}.avs-workspace{grid-template-columns:1fr}.avs-editor{position:static}.avs-preview{min-height:390px}}
@media(max-width:800px){.avs-offer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.avs-design-grid{grid-template-columns:1fr}}
@media(max-width:600px){
 .avs{padding:12px 8px 38px}
 .avs-intro{padding-top:14px}
 .avs-panel{padding:16px;border-radius:16px}
 .avs-preview{min-height:300px;padding:16px 8px 12px}
 .avs-preview-inner{min-height:225px}
 .avs-wrapper{width:99%}
 .avs-hint{padding:0 8px}
 .avs-sticker-palette{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}
 .avs-tabs{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:5px}
 .avs-place-grip{width:24px;height:24px}
 .avs-fold-zone{font-size:9px;right:6px}
 .avs-icon-group-rotate{right:auto;left:100%;margin-right:0;margin-left:10px}
 .avs-submit-area{width:100%;flex-direction:column}
}
@media(max-width:560px){.avs-finish,.avs-offer-actions{flex-direction:column;align-items:stretch}.avs-offer-grid{grid-template-columns:1fr}.avs-finish .avs-cta,.avs-offer-actions a{text-align:center;width:100%}}


.avs .avs-trust{margin:.35rem 0 0;font-size:.82rem;line-height:1.5;color:#6b6257}
.avs .avs-add-personal{width:100%;text-align:center}
/* ================= הסטודיו (מסך אחד: פאנל בחירה + אזור עריכה) ================= */
.avs-v2{--avs-line:#e5ddd1;--avs-ink:#4a4038;--avs-accent:#c08a3e;--avs-soft:#faf7f2}
.avs-v2 .avs-intro{text-align:center;margin-bottom:1rem}
.avs-v2 .avs-studio{display:grid;gap:1rem;align-items:start}
/*
 * שתי הגנות רוחב, ושתיהן מכסות את הסיבה הנפוצה ביותר לעמוד שרחב מהמסך:
 *
 * 1. פריט של grid/flex מקבל min-width:auto כברירת מחדל, ולכן תוכן רחב אחד
 *    (קנבס, טבלה, מחרוזת בלי רווחים) מותח את כל העמודה ואיתה את המסמך.
 * 2. תמונה או קנבס עם מידות טבעיות גדולות - בסיס האריזה הוא 1400 פיקסלים -
 *    חייבים להצטמצם לרוחב ההורה ולא לכפות את גודלם.
 */
.avs-v2 .avs-studio>*,.avs-v2 .avs-edit>*,.avs-v2 .avs-canvas-col>*{min-width:0}
.avs-v2 img,.avs-v2 canvas,.avs-v2 svg{max-width:100%}
@media(min-width:901px){.avs-v2 .avs-studio{grid-template-columns:300px minmax(0,1fr)}}

/* ---- פאנל הבחירה ---- */
.avs-v2 .avs-select{display:flex;flex-direction:column;gap:.6rem}
.avs-v2 .avs-sel{border:1px solid var(--avs-line);border-radius:12px;background:#fff;overflow:hidden}
.avs-v2 .avs-sel>summary{cursor:pointer;padding:.7rem .9rem;font-weight:600;list-style:none}
.avs-v2 .avs-sel>summary::-webkit-details-marker{display:none}
/* חץ סגור מצביע למעלה, חץ פתוח מצביע למטה - לכיוון התוכן שנפתח מתחתיו */
.avs-v2 .avs-sel>summary::after{content:'▴';float:left;color:var(--avs-accent)}
.avs-v2 .avs-sel[open]>summary::after{content:'▾'}
.avs-v2 .avs-sel-body{padding:.7rem .9rem;border-top:1px solid var(--avs-line);display:flex;flex-wrap:wrap;gap:.45rem}
.avs-v2 .avs-chip{border:1px solid var(--avs-line);background:var(--avs-soft);border-radius:999px;padding:.4rem .8rem;cursor:pointer;font:inherit;color:var(--avs-ink);display:flex;flex-direction:column;line-height:1.25}
.avs-v2 .avs-chip small{color:#8a7f72;font-size:.75rem}
.avs-v2 .avs-chip.is-active{border-color:var(--avs-accent);background:#fff5e6}
/* אריחי העיצוב: גדולים יותר, ובחירה שאי אפשר לפספס.
   מסגרת דקה בצבע המותג לא נראתה כמו בחירה - לקוחות לא ידעו איזה עיצוב פעיל.
   עכשיו: מסגרת עבה, טבעת מסביבה, הגדלה קלה וסימן וי בפינה. */
.avs-v2 .avs-design-list{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.avs-v2 .avs-design-tile{position:relative;border:2px solid transparent;border-radius:12px;padding:0;
  background:var(--avs-soft);cursor:pointer;aspect-ratio:1/1;overflow:hidden;
  transition:transform .12s ease,box-shadow .12s ease}
.avs-v2 .avs-design-tile img{width:100%;height:100%;object-fit:cover;display:block}
.avs-v2 .avs-design-tile:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(60,45,30,.14)}
.avs-v2 .avs-design-tile.is-active{border-color:var(--avs-accent);
  box-shadow:0 0 0 3px rgba(192,138,62,.32),0 6px 16px rgba(60,45,30,.18);transform:translateY(-1px)}
.avs-v2 .avs-design-tile.is-active::after{content:'✓';position:absolute;inset-block-start:4px;
  inset-inline-end:4px;width:20px;height:20px;border-radius:50%;background:var(--avs-accent);color:#fff;
  font-size:12px;line-height:20px;text-align:center;pointer-events:none}
/* אריח בלי תמונה מוקטנת - מוצג בשמו. האריח "דף ריק" עצמו הוסר: כל מוצר
   מתחיל מעיצוב, כולל דף הברכה. */
.avs-v2 .avs-design-tile:not(.has-mockup):not(.is-missing):empty,
.avs-v2 .avs-design-tile>span:only-child{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;font-size:.8rem;color:#8a7f72;text-align:center;padding:.2rem}
/* "דף ריק": אריח לבן עם מסגרת מקווקוות, כדי שייראה כמו נייר ולא כמו תקלה */
/*
 * שורת ההודעות שומרת לעצמה מקום, גם כשהיא ריקה.
 *
 * הבאג שזה מתקן: האזהרה "פריט יוצא מאזור החזית" הופיעה בתוך עמודת הקנבס,
 * שגובהה מחולק בין הקנבס לבין מה שמתחתיו. עצם ההופעה שלה הקטינה את הקנבס -
 * וכל הכיתובים שעליו שינו גודל ונשברו מחדש לשורות. הלקוחה גררה כיתוב אחד
 * וראתה כיתוב אחר, שלא נגעה בו, זז ומשנה צורה.
 *
 * מקום שמור פירושו שהופעה והיעלמות של הודעה אינן משנות דבר בפריסה.
 */
.avs-v2 .avs-notes{min-height:1.6rem;display:flex;flex-direction:column;justify-content:center}
.avs-v2 .avs-notes>p{margin:0}

.avs-v2 .avs-tile-blank{background:#fff;border:2px dashed var(--avs-line);
  display:flex;align-items:center;justify-content:center}
.avs-v2 .avs-tile-blank span{font-size:.85rem;color:#6b6257;font-weight:600}
.avs-v2 .avs-tile-blank.is-active{border-style:solid;border-color:var(--avs-accent)}
.avs-v2 .avs-soon{color:#8a7f72;margin:0}
.avs-v2 .avs-custom-cta{border:1px dashed var(--avs-line);border-radius:12px;padding:.8rem;text-align:center}
.avs-v2 .avs-custom-cta p{margin:0 0 .5rem;color:#8a7f72;font-size:.9rem}
/* הכיתוב גולש לשתי שורות במקום להיחתך.
   כפתור עגול עם white-space ברירת המחדל חתך את סוף המשפט בעמודה צרה; כאן הוא
   נשבר לשורות, והרדיוס מתרכך כדי ששתי שורות ייראו כמו כפתור ולא כמו גלולה. */
.avs-v2 .avs-custom-order{background:#3f6b52;color:#fff;border:0;border-radius:16px;
  padding:.6rem .9rem;cursor:pointer;font:inherit;width:100%;
  white-space:normal;overflow-wrap:anywhere;line-height:1.35;min-height:2.6rem}

/* ---- אזור העריכה ---- */
.avs-v2 .avs-edit{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.avs-v2 .avs-stage{display:flex;justify-content:center;min-width:0}
.avs-v2 .avs-canvas{position:relative;width:100%;max-width:760px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 6px 22px rgba(60,45,30,.12);touch-action:none}
/* רק החזית מוצגת. הפרופורציה המדויקת נקבעת ב-JS מטבלת הקיפול; זו נפילה חזרה. */
/* פרופורציית צילום האריזה. ה-JS מדייק אותה מהקובץ עצמו; זו נפילה חזרה. */
.avs-v2 .avs-canvas[data-shape=wrap]{aspect-ratio:1880/998}
/* ---- מראה החטיף העטוף ----
   שתי שכבות, ושתיהן מוצגות רק כשהצורה היא עטיפה:
   1 .avs-wrap-mockup - צילום האריזה הריקה ב-multiply. ממנו מגיעים הקמטים,
     הקיפולים בצדדים וההצללה של הפאות - כלומר כל מה שגורם לעיצוב להיראות
     על חטיף אמיתי ולא על מלבן שטוח.
   2 .avs-wrap-shade  - הצללה עדינה מעל, שמעגלת את השוליים העליונים והתחתונים.
   קווי הקיפול והתוויות "גב עליון / חזית / גב תחתון" אינם חלק מזה: הם הוסרו
   לגמרי בסעיף 9 ואין להם שום ייצוג כאן. */
/* ---- העטיפה: רק החטיף, בלי מסגרת מסביבו ----
   צילום האריזה אינו שכבת CSS יותר: הוא מצויר לתוך קנבס העיצוב עצמו (ראו
   paintArt), ומשם מגיעים גם ההצללה וגם החיתוך לצללית החטיף. שכבת DOM עם
   mix-blend-mode הייתה תלויה בהקשר הערבוב של הדפדפן, וברגע שהוקפה מסכה על
   הקנבס המיזוג הפסיק לחול והצילום הלבן כיסה את העיצוב לגמרי.
   מה שנשאר כאן הוא רק ההצללה העדינה של הקצוות, והיא שקופה למחצה מעצם טבעה
   ולכן אינה יכולה להסתיר שום דבר. */
/* שכבת ההצללה הישנה בוטלה. ההצללה של החטיף מגיעה מצילום האריזה עצמו, שמוכפל
   לתוך הקנבס ונחתך יחד איתו לצללית; שכבת DOM נוספת פרסה מלבן אפור גם מחוץ
   לחטיף, כי היא כיסתה את כל המלבן ולא רק את צורת האריזה. */
.avs-v2 .avs-wrap-shade{display:none}
/* העטיפה: רק החטיף על רקע העמוד. הצללית וההצללה מגיעות מצילום האריזה שמצויר
   לתוך הקנבס, ולכן אין כאן רקע, מסגרת או פינות מעוגלות. overflow נשאר hidden
   כדי שפריט שנגרר רחוק לא ייצא מהמוצר וייחת על הכותרת של העמוד. */
.avs-v2 .avs-canvas[data-shape=wrap]{background:none;box-shadow:none;border-radius:0;overflow:hidden}
/* דף ברכה וכרטיס: מלבן רגיל עם פינות ישרות וצל רך. הצללית של החטיף שייכת
   לעטיפה בלבד - דף ברכה הוא דף, ואין לו קצוות מקומטים ואין לו פינות קטומות. */
.avs-v2 .avs-canvas[data-shape=a5],
.avs-v2 .avs-canvas[data-shape=card]{background:#fff;border-radius:0;overflow:hidden;
  box-shadow:0 6px 22px rgba(60,45,30,.14)}
/* פריטי הלקוחה יושבים מעל שכבות האריזה, אחרת המדבקות היו נבלעות בהצללה */
.avs-v2 .avs-items{z-index:4}
.avs-v2 .avs-fold-warn{margin:.4rem 0 0;text-align:center;font-size:.84rem;color:#9a6b2f;background:#fff7ea;border:1px solid #f0dcb8;border-radius:10px;padding:.4rem .7rem}
.avs-v2 .avs-canvas[data-shape=a5]{aspect-ratio:148/210;max-width:520px}
.avs-v2 .avs-canvas[data-shape=card]{aspect-ratio:99/70;max-width:620px}
/* z-index מפורש: העיצוב הוא השכבה התחתונה, ומעליו האריזה, ההצללה, הפריטים
   וסימן המים. בלי ערך מפורש הסדר תלוי בסדר ה-DOM ובקלות נשבר בעריכה. */
.avs-v2 .avs-design-art{position:absolute;inset:0;z-index:1;background-size:100% 100%;background-position:center;background-repeat:no-repeat}
.avs-v2 .avs-items{position:absolute;inset:0}
/* ---- סימן מים (סעיף 24) ----
   על כל שלוש הצורות - עטיפה, דף ברכה וכרטיס. הוא חי בתצוגה המקדימה בלבד
   ולעולם אינו נצרב לקובץ ההדפסה; המיתוג שכן נצרב הוא עניין נפרד לגמרי. */
.avs-v2 .avs-watermark{position:absolute;inset:0;z-index:6;pointer-events:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.avs-v2 .avs-watermark span{font:700 clamp(15px,4.2vw,34px)/1 "Heebo",Arial,sans-serif;letter-spacing:.22em;color:#fff;
  transform:rotate(-22deg);text-shadow:0 1px 3px rgba(0,0,0,.35);white-space:nowrap}
/* לוגו במקום טקסט, כשהועלה כזה בהגדרות */
.avs-v2 .avs-watermark img{width:44%;max-width:44%;height:auto;object-fit:contain;
  transform:rotate(-22deg);filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}
/*
 * רעפים: אותו סימן חוזר על כל השטח.
 * הסיבוב עובר מהתוכן אל המיכל כולו, והמיכל נמתח מעבר לקצוות - אחרת פינות
 * הקנבס נשארות ריקות בדיוק במקום שממנו קל לחתוך צילום מסך נקי.
 */
.avs-v2 .avs-wm-tiled{display:flex;flex-wrap:wrap;align-content:center;gap:6% 8%;
  inset:-30%;transform:rotate(-22deg)}
.avs-v2 .avs-wm-tiled span,.avs-v2 .avs-wm-tiled img{transform:none}
.avs-v2 .avs-wm-tiled span{font-size:clamp(11px,2.4vw,18px)}
.avs-v2 .avs-wm-tiled img{width:22%;max-width:22%}

/* ---- פריטים על הקנבס ---- */
.avs-v2 .avs-item{position:absolute;transform-origin:50% 50%;cursor:move;touch-action:none}
.avs-v2 .avs-item>img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
/* גוף הכיתוב בלבד. pointer-events:none כאן ורק כאן - אילו הכלל היה חל גם על
   מיכל הפריט (שנקרא avs-item-text), כל לחיצה על כיתוב הייתה עוברת דרכו ולא
   היה אפשר לבחור אותו בכלל. */
.avs-v2 .avs-text-body{display:flex;align-items:center;justify-content:center;width:100%;height:100%;line-height:1.15;white-space:pre;pointer-events:none}
.avs-v2 .avs-photo-fill{position:absolute;inset:0;overflow:hidden;display:block;border-radius:4px}
/* צורת התמונה החופשית. העיגול חייב להיות זהה למסכה שבקובץ ההדפסה
   (apply_circle_mask ב-print-export.php), אחרת מה שנראה אינו מה שמודפס. */
.avs-v2 .avs-photo-circle{border-radius:50%}
.avs-v2 .avs-photo-square{border-radius:2px}
.avs-v2 .avs-photo-shape{margin:.6rem 0 .2rem}
.avs-v2 .avs-photo-shape[hidden]{display:none}
.avs-v2 .avs-photo-shape-title{display:block;font-size:.85rem;color:#6b6257;margin-bottom:.3rem}
.avs-v2 .avs-photo-shape-row{display:flex;gap:.4rem}
.avs-v2 .avs-photo-shape-row button{flex:1 1 0;border:1px solid var(--avs-line);background:#fff;
  border-radius:999px;padding:.4rem .6rem;font:inherit;cursor:pointer;color:var(--avs-ink)}
.avs-v2 .avs-photo-shape-row button.is-active{border-color:var(--avs-accent);
  background:#fff5e6;font-weight:600}
.avs-v2 .avs-photo-fill img{position:absolute;object-fit:cover;pointer-events:none}
.avs-v2 .avs-frame-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.avs-v2 .avs-frame-plus{position:absolute;inset:22%;border:2px dashed var(--avs-accent);border-radius:50%;background:rgba(255,255,255,.7);color:var(--avs-accent);font-size:1.6rem;cursor:pointer}
.avs-v2 .avs-item.is-selected{outline:1.5px dashed var(--avs-accent);outline-offset:2px}
.avs-v2 .avs-item-del,.avs-v2 .avs-item-grip{position:absolute;width:26px;height:26px;border-radius:50%;border:1px solid var(--avs-line);background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;font-size:13px;color:var(--avs-ink)}
.avs-v2 .avs-item-del{top:-13px;left:-13px}
.avs-v2 .avs-item-grip{bottom:-13px;right:-13px;cursor:nwse-resize;background:var(--avs-accent);border-color:var(--avs-accent)}

/* ---- סרגל הכלים ---- */
.avs-v2 .avs-toolbar{display:flex;align-items:center;justify-content:center;gap:.5rem;background:#fff;border:1px solid var(--avs-line);border-radius:999px;padding:.45rem .7rem;box-shadow:0 4px 16px rgba(60,45,30,.1);align-self:center}
.avs-v2 .avs-tool{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:transparent;cursor:pointer;font:inherit;font-size:.72rem;color:var(--avs-ink);padding:.35rem .6rem;border-radius:12px}
.avs-v2 .avs-tool svg{width:26px;height:26px}
.avs-v2 .avs-tool.is-active{background:#fff5e6;color:var(--avs-accent)}
.avs-v2 .avs-tool-sep{width:1px;height:28px;background:var(--avs-line)}
.avs-v2 .avs-mini{border:0;background:transparent;cursor:pointer;padding:.35rem;border-radius:10px;color:var(--avs-ink)}
.avs-v2 .avs-mini svg{width:20px;height:20px}
.avs-v2 .avs-mini[disabled]{opacity:.3;cursor:default}

/* ---- הפאנלים של הכלים ---- */
.avs-v2 .avs-tool-panels{min-width:0}
.avs-v2 .avs-tp{border:1px solid var(--avs-line);border-radius:12px;background:#fff;padding:.8rem;display:flex;flex-direction:column;gap:.6rem}
/* display:flex גובר על תכונת hidden, ובלי השורה הזאת כל הפאנלים היו נראים
   בבת אחת - גם זה של התמונות וגם זה של המדבקות. */
.avs-v2 .avs-tp[hidden]{display:none}
.avs-v2 .avs-sticker-grid,.avs-v2 .avs-frame-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.5rem;max-height:260px;overflow:auto}
.avs-v2 .avs-asset{border:1px solid var(--avs-line);border-radius:10px;background:var(--avs-soft);padding:4px;cursor:pointer;aspect-ratio:1/1}
.avs-v2 .avs-asset img{width:100%;height:100%;object-fit:contain;display:block}
.avs-v2 .avs-asset-none{font-size:.75rem;color:#8a7f72;display:flex;align-items:center;justify-content:center;text-align:center}
.avs-v2 .avs-upload{display:block;background:var(--avs-accent);color:#fff;border-radius:999px;padding:.6rem 1rem;text-align:center;cursor:pointer}
.avs-v2 .avs-upload input{display:none}
.avs-v2 .avs-tp-field{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem;color:#6b6257}
.avs-v2 .avs-tp-field select,.avs-v2 .avs-tp-field textarea,.avs-v2 .avs-tp-field input[type=color]{border:1px solid var(--avs-line);border-radius:8px;padding:.5rem;font:inherit}
/* שדה הכיתוב גדל עם הטקסט. overflow:hidden ולא auto: פס גלילה פנימי בתוך
   שדה של שתי שורות הסתיר בדיוק את מה שהלקוחה הקלידה זה עתה. הגובה נקבע
   ב-JS לפי scrollHeight (ראו autoGrow). */
.avs-v2 .avs-text-input{overflow:hidden;resize:none;min-height:3.2rem;line-height:1.5}
.avs-v2 .avs-font-select{font-size:18px}
.avs-v2 .avs-font-preview{border:1px dashed var(--avs-line);border-radius:8px;padding:.6rem;text-align:center;font-size:1.6rem;min-height:2.6rem}
.avs-v2 .avs-add-text-item{background:var(--avs-accent);color:#fff;border:0;border-radius:999px;padding:.55rem 1rem;cursor:pointer;font:inherit}
.avs-v2 .avs-align-row{display:flex;gap:.4rem}
.avs-v2 .avs-align-row button{flex:1;border:1px solid var(--avs-line);background:var(--avs-soft);border-radius:8px;padding:.4rem;cursor:pointer;font:inherit}
.avs-v2 .avs-align-row button.is-active{border-color:var(--avs-accent);background:#fff5e6}

/* ---- דף ברכה במחשב: הדף דומיננטי, סרגל צר משמאלו, פאנל צר עוד יותר משמאלו ----
   שלושת האלמנטים האלה חייבים לשבת באותה שורה: דף ← סרגל ← פאנל.
   בלי grid-row מפורש כל אח אחר בתוך avs-edit (שורת "נשמר אוטומטית", דיאלוג
   האישור) נשתל אוטומטית בתא הפנוי הראשון - כלומר בעמודה השלישית של השורה
   הראשונה - והפאנל נדחק לשורה הבאה. כך הוא נפתח בפינה השמאלית התחתונה,
   הרחק מתחת לסרגל, עם שטח ריק גדול משמאל לדף. */
/* עמודת הקנבס. במובייל היא שקופה לגמרי - הילדים שלה יושבים ישירות בתוך
   avs-edit, בדיוק כמו לפני שהיא נוספה. */
.avs-v2 .avs-canvas-col{display:contents}

/* ---- עטיפה וכרטיס במחשב: הקנבס מימין, הפאנל בעמודה משמאלו ----
   הבעיה שזה פותר: הפאנל (כיתוב / מדבקה / תמונה) נפתח מתחת לקנבס, ולכן כל
   עריכת כיתוב דרשה גלילה - והקנבס, כלומר הדבר היחיד שחשוב לראות בזמן
   העריכה, יצא מהמסך בדיוק כשהתחילו לערוך.
   הפתרון: שתי עמודות. הקנבס והסרגל יחד בעמודה אחת שנדבקת למסך, והפאנל
   בעמודה שלידו. ב-RTL העמודה השנייה היא זו שמשמאל, וזה מה שרצינו.
   הפאנל גם נגלל בתוך עצמו, כדי שפאנל ארוך (רשת מדבקות) לא יגרור את העמוד
   ולא ידחוף את הקנבס למעלה. */
@media(min-width:901px){
 .avs-v2.avs-shape-wrap .avs-edit,
 .avs-v2.avs-shape-card .avs-edit{
   display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,32%);
   gap:1rem;align-items:start}
 /* כל שאר הילדים (סיכום, דיאלוג האישור) - שורה משלהם מתחת לשתי העמודות */
 .avs-v2.avs-shape-wrap .avs-edit>*,
 .avs-v2.avs-shape-card .avs-edit>*{grid-column:1/-1}
 /* מחוון הסט תמיד ראשון, על כל הרוחב, מעל הכול.
    בלי שורה מפורשת הוא נשתל אוטומטית בשורה הפנויה הראשונה - וזו כבר השורה
    שמתחת לקנבס, כי שורה 1 תפוסה על ידי הקנבס והפאנל. כך "2/3 · דף ברכה"
    הופיע מתחת לעיצוב במקום מעליו. */
 .avs-v2.avs-shape-wrap .avs-bundle-bar,
 .avs-v2.avs-shape-card .avs-bundle-bar{grid-column:1/-1;grid-row:1}
 .avs-v2.avs-shape-wrap .avs-canvas-col,
 .avs-v2.avs-shape-card .avs-canvas-col{
   display:flex;flex-direction:column;gap:.7rem;min-width:0;
   grid-column:1;grid-row:2;position:sticky;top:1rem;align-self:start}
 .avs-v2.avs-shape-wrap .avs-tool-panels,
 .avs-v2.avs-shape-card .avs-tool-panels{
   grid-column:2;grid-row:2;align-self:start;position:sticky;top:1rem;
   max-height:calc(100vh - 2rem);overflow:auto}
 /* הסרגל נשאר מרחף מתחת לקנבס ובמרכזו, לא נמתח לרוחב העמודה */
 .avs-v2.avs-shape-wrap .avs-toolbar,
 .avs-v2.avs-shape-card .avs-toolbar{align-self:center}
}

@media(min-width:901px){
 /* דף הברכה שומר על הפריסה שלו: דף ← סרגל אנכי ← פאנל */
 .avs-v2.avs-shape-a5 .avs-canvas-col{display:contents}
 .avs-v2.avs-shape-a5 .avs-edit{display:grid;grid-template-columns:minmax(0,60fr) auto minmax(0,32fr);gap:.8rem;align-items:start}
 /* ברירת מחדל לכל שאר הילדים: שורה משלהם על כל הרוחב, מתחת לשלושת הראשיים */
 .avs-v2.avs-shape-a5 .avs-edit>*{grid-column:1/-1}
 /* מחוון הסט מעל הכול. אותו באג בדיוק כמו בעטיפה ובכרטיס: בלי שורה מפורשת
    הוא נדחק לשורה הפנויה הראשונה, כלומר אל מתחת לדף. */
 .avs-v2.avs-shape-a5 .avs-bundle-bar{grid-column:1/-1;grid-row:1}
 .avs-v2.avs-shape-a5 .avs-stage{grid-column:1;grid-row:2}
 .avs-v2.avs-shape-a5 .avs-toolbar{grid-column:2;grid-row:2;flex-direction:column;border-radius:20px;align-self:start;position:sticky;top:1rem}
 .avs-v2.avs-shape-a5 .avs-tool-sep{width:28px;height:1px}
 /* הפאנל נדבק בדיוק כמו הסרגל ובאותו גובה. בלי זה הסרגל מטייל עם הגלילה
    והפאנל נשאר במקומו, והשניים מתפצלים - הפאנל נראה תלוי הרחק מתחת לסרגל. */
 .avs-v2.avs-shape-a5 .avs-tool-panels{grid-column:3;grid-row:2;align-self:start;position:sticky;top:1rem}
 .avs-v2.avs-shape-a5 .avs-canvas{max-width:none}
}

/* ================= מחשב רחב: שלוש עמודות שממלאות את המסך =================
 *
 * הבעיה שזה פותר: במסך של 1366 ומעלה התוכן תפס כמחצית מהרוחב, עם שוליים
 * לבנים ענקיים משני הצדדים ורווחים אנכיים גדולים - ולכן כל עריכה דרשה גלילה
 * למעלה ולמטה. הפריסה הקודמת בנתה שתי עמודות **בתוך** אזור העריכה, וכך נוצרו
 * שתי רשתות מקוננות שאף אחת מהן לא ידעה על גובה המסך.
 *
 * כאן: avs-edit הופך ל-display:contents, כלומר הוא נעלם כמיכל, וילדיו הופכים
 * לתאים של רשת אחת יחד עם פאנל הבחירה. התוצאה היא שלוש עמודות אמיתיות -
 * ב-RTL עמודה 1 היא הימנית:
 *   1 (ימין)  בחירת מוצר, נושא ועיצוב
 *   2 (מרכז)  מחוון הסט, הקנבס, סרגל הכלים וההסבר שמתחתיו
 *   3 (שמאל)  הפאנל הפתוח: כיתוב / מדבקה / תמונה
 *
 * הגובה נגזר מהמסך ולא מהתוכן: הקנבס מקבל גובה מחושב, ושתי עמודות הצד
 * נגללות בתוך עצמן. כך הכול נכנס למסך אחד גם ב-768 פיקסלים גובה, ואין גלילה
 * אנכית בזמן עריכה.
 *
 * הבורר הוא .avs-v2[data-shape] ולא שם הצורה: הצורה מתחלפת בדפדפן בסט המלא,
 * והפריסה הזאת נכונה לשלושת המוצרים. הסגוליות שווה לזו של כללי הצורה שמעליו
 * ולכן הסדר בקובץ הוא שמכריע - ומכאן שהבלוק הזה חייב להישאר אחריהם.
 */
@media(min-width:1200px){
 /*
  * תקציב הגובה, במקום אחד.
  *   --avs-head  הכותרת, המשפט ושורת השלבים יחד
  *   --avs-bar   שורת המחיר המקובעת בתחתית
  *   --avs-grid  מה שנשאר לרשת: זה גם הגובה שהעמוד כולו תופס
  * הרשת נחתכת לגובה הזה, שתי עמודות הצד נגללות בתוך עצמן, והקנבס מקבל את
  * מה שנשאר אחרי סרגל הכלים וההסברים שמתחתיו. כך העמוד שווה בדיוק לגובה
  * המסך ואין גלילה אנכית בזמן עריכה.
  */
 /*
  * --avs-slack: מרווח ביטחון קטן.
  * 100vh אינו תמיד שווה לגובה החלון בפועל - בדפדפן ללא חלון הפער נמדד ב-24
  * פיקסלים, ובדפדפן אמיתי פס גלילה או שורת כתובת יכולים לשנות אותו. בלי
  * המרווח הזה העמוד יוצא ארוך בכמה פיקסלים מהמסך, וזה מספיק כדי להחזיר את
  * הגלילה שבאנו למחוק.
  */
 .avs-v2{--avs-head:150px;--avs-bar:80px;--avs-slack:24px;
   --avs-grid:calc(100vh - var(--avs-head) - var(--avs-bar) - var(--avs-slack))}
 /* פס ההנחה מחברה מופיע רק ללקוחה שהגיעה מקישור, ואז הראש גבוה יותר.
    בלי זה דווקא אצלה - הלקוחה שהכי כדאי שתצליח - הייתה חוזרת גלילה. */
 .avs-v2:has(.avs-ref-gift){--avs-head:196px}
 .avs-v2 .avs-ref-gift{margin:.4rem 0 0;padding:.45rem .8rem;font-size:.85rem}

 /* --- הראש: כותרת, משפט ושורת השלבים - יחד עד כ-120 פיקסלים ---
    הרוחב הוא 95% מהמסך ועד 1700: שתי עמודות הצד קבועות, ולכן כל פיקסל
    שנוסף לרוחב הולך כולו אל עמודת האמצע - כלומר אל הקנבס. */
 .avs-v2{max-width:min(95vw,1700px);padding-top:14px;padding-bottom:var(--avs-bar)}
 .avs-v2 .avs-intro{margin:0}
 .avs-v2 .avs-intro h1{font-size:1.55rem;line-height:1.2;margin:0}
 .avs-v2 .avs-intro .avs-trust{margin:.2rem 0 0;font-size:.86rem}
 .avs-v2 .avs-steps{margin:.55rem 0 .7rem;padding:.3rem .7rem;font-size:.84rem;gap:.3rem .9rem}

 /* --- שלוש העמודות --- */
 .avs-v2 .avs-studio{display:grid;grid-template-columns:290px minmax(0,1fr) 330px;
   grid-template-rows:auto minmax(0,1fr);gap:.9rem;align-items:stretch;
   height:var(--avs-grid)}
 .avs-v2[data-shape] .avs-edit{display:contents}
 /*
  * העמודה הימנית: עמודה אחת שנגללת, לא שלושה תאים שנדחסים.
  *
  * הבאג שדווח: "מה מעצבים?" הראה חצי מהאריחים, "בחירת נושא" התכווץ לפס ריק,
  * ורשת העיצובים נחתכה באמצע שורה.
  *
  * הסיבה: העמודה היא flex אנכי בגובה קבוע, ולילדי flex יש flex-shrink:1
  * כברירת מחדל - כלומר הדפדפן **דחס** כל פאנל כדי שכולם ייכנסו לגובה, ולכל
  * פאנל יש overflow:hidden (בשביל הפינות המעוגלות), ולכן מה שנדחס פשוט נעלם.
  * זה גם למה דווקא הפאנל האמצעי נראה ריק: הוא נדחס עד האפס.
  *
  * התיקון: אף פאנל אינו מתכווץ (flex:0 0 auto), כל אחד מקבל את גובהו
  * הטבעי, והגלילה עוברת לעמודה כולה.
  */
 .avs-v2[data-shape] .avs-select{grid-column:1;grid-row:1/3;
   height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;
   padding-inline-end:.35rem}
 .avs-v2[data-shape] .avs-select>*{flex:0 0 auto;min-height:0}
 /* ומה שבתוך הפאנל נשבר לשורות במקום להיחתך */
 .avs-v2[data-shape] .avs-sel{overflow:visible}
 .avs-v2[data-shape] .avs-sel-body{flex-wrap:wrap;overflow:visible}
 .avs-v2[data-shape] .avs-design-list{overflow:visible}
 .avs-v2[data-shape] .avs-bundle-bar{grid-column:2;grid-row:1;margin:0}
 /* בדף הברכה avs-canvas-col הוא display:contents (הסרגל שם אנכי, לצד הדף).
    בפריסה הזאת הוא חייב לחזור להיות מיכל אמיתי, אחרת אין מה למקם במרכז. */
 .avs-v2[data-shape] .avs-canvas-col{display:flex;flex-direction:column;gap:.55rem;
   min-width:0;min-height:0;height:100%;grid-column:2;grid-row:2;position:static}
 /* העמודה השמאלית באותו היגיון: נגללת בעצמה, ואינה דוחסת את תוכנה */
 .avs-v2[data-shape] .avs-tool-panels{grid-column:3;grid-row:1/3;position:static;
   height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;
   align-self:stretch}
 .avs-v2[data-shape] .avs-tool-panels>*{flex:0 0 auto}

 /* --- הקנבס: גדול ככל שהמסך מרשה, ולא יותר ---
    הגובה נחתך מגובה המסך פחות הראש, סרגל הכלים, ההסבר ושורת המחיר המקובעת.
    עם aspect-ratio קבוע, קביעת height ו-width:auto נותנת לרוחב להיגזר ממנו,
    ו-max-width מחזיר את החישוב אחורה כשהצורה רחבה מדי לעמודה. */
 /*
  * הקנבס לוקח בדיוק את מה שנשאר.
  *
  * לא מספר קבוע: ההסברים שמתחת לקנבס נשברים לשורות שונות לפי רוחב העמודה
  * ולפי המוצר, וכל ניחוש מראש יוצא שגוי במסך אחר. כאן העמודה מקבלת את גובה
  * השורה, ההסברים והסרגל תופסים את גובהם הטבעי, והבמה בולעת את היתרה. עם
  * aspect-ratio קבוע, הרוחב נגזר מהגובה - ו-max-width מחזיר את החישוב אחורה
  * כשהצורה רחבה מכדי להיכנס לעמודה.
  */
 .avs-v2[data-shape] .avs-stage{flex:1 1 auto;min-height:0;
   align-items:center;justify-content:center}
 .avs-v2[data-shape] .avs-canvas{width:auto;height:100%;max-height:100%;
   max-width:100%;margin-inline:auto}

 /*
  * סדר עמודת האמצע: סרגל הכלים למעלה, ואחריו הקנבס.
  *
  * הסרגל ישב מתחת לקנבס, כלומר הכלים היו רחוקים משורת השלבים שמסבירה מה
  * לעשות, והעין נאלצה לרדת ולעלות בין ההסבר לכלים. כאן הוא צמוד לשורת
  * השלבים, והאזהרה על פריט שיוצא מהחזית נשארת ליד הקנבס - מיד מתחתיו,
  * לפני ההסברים - כי היא מדברת על מה שרואים עכשיו.
  */
 .avs-v2[data-shape] .avs-toolbar{order:-2}
 .avs-v2[data-shape] .avs-stage{order:-1}
 .avs-v2[data-shape] .avs-fold-warn,
 .avs-v2[data-shape] .avs-art-warn,
 .avs-v2[data-shape] .avs-photo-note{order:0;margin:0}
 .avs-v2[data-shape] .avs-what-you-get{order:1}
 .avs-v2[data-shape] .avs-mockup-note{order:2}
 .avs-v2[data-shape] .avs-save-row{order:3}

 /* הסרגל אופקי וממורכז - גם בדף הברכה, שבו הוא אנכי בפריסה הצרה.
    האייקון והמילה זה לצד זה ולא זה מעל זה: כך הסרגל נמוך ב-20 פיקסלים. */
 .avs-v2[data-shape] .avs-toolbar{align-self:center;flex-direction:row;border-radius:999px;
   padding:.3rem .5rem}
 .avs-v2[data-shape] .avs-toolbar .avs-tool{flex-direction:row;gap:.35rem;padding:.35rem .7rem}
 .avs-v2[data-shape] .avs-tool-sep{width:1px;height:26px}
 /* ההסברים שמתחת לקנבס: קומפקטיים, כדי שלא ידחפו את הקנבס למעלה */
 .avs-v2[data-shape] .avs-what-you-get,
 .avs-v2[data-shape] .avs-mockup-note{margin:0;font-size:.78rem;line-height:1.3}
 .avs-v2[data-shape] .avs-save-row{margin:0;min-height:0}

 /* --- שורת המחיר: שורה אחת נמוכה, בגובה --avs-bar ---
    המשפט "קובץ להדפסה ביתית..." כבר מופיע תחת הכותרת, ואין טעם לחזור עליו
    כאן במחיר של 40 פיקסלים מגובה הקנבס. */
 .avs-v2 .avs-finish{padding:.45rem clamp(12px,3vw,28px);gap:.7rem;align-items:center}
 .avs-v2 .avs-finish .avs-trust{display:none}
 .avs-v2 .avs-finish .avs-submit-area{flex-direction:row;align-items:center;gap:.7rem}
 .avs-v2 .avs-finish .avs-buy-trust{margin:0;font-size:.76rem}
 .avs-v2 .avs-finish .avs-cta,
 .avs-v2 .avs-finish .avs-bundle-next{padding:.6rem 1.4rem}
}

/* ---- סיכום ותשלום ---- */
/* ---- המחיר וכפתור הקנייה: מקובעים לתחתית המסך ----
 *
 * position:sticky לא עבד כאן, ולא במקרה: שורת הסיכום היא האלמנט האחרון
 * בעמוד, ואלמנט דביק עם bottom נשאר צמוד רק כל עוד יש **תוכן אחריו** לגלול.
 * בפועל היא ישבה אחרי בחירת העיצוב ואחרי קופסת העיצוב האישי, והלקוחה נאלצה
 * לגלול הרבה כדי למצוא איפה קונים.
 *
 * fixed מוציא אותה מהזרימה ומצמיד אותה למסך עצמו, ולכן היא נראית תמיד - גם
 * בזמן עריכה. הריפוד בתחתית העורך שומר לה מקום כדי שהיא לא תכסה את התוכן.
 */
/* בקופה אין מקום לטופס העיצוב האישי של הפוטר ולא להודעות מידע של הסל:
   הלקוחה כבר החליטה, וכל דבר נוסף שם הוא הסחה. הודעות **שגיאה** נשארות -
   בלעדיהן היא לא תדע למה ההזמנה לא עברה. */
body.avigai-checkout-page .avs-co,
body.avigai-checkout-page .avs-custom-cta,
body.avigai-checkout-page .woocommerce-info,
body.avigai-checkout-page .woocommerce-message{display:none}
body.avigai-checkout-page .woocommerce-error,
body.avigai-checkout-page .woocommerce-NoticeGroup{display:block}

:root{--avs-buybar:96px;--avs-toolbar:64px}
.avs-v2 .avs-finish{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;
  position:fixed;inset-inline:0;bottom:0;z-index:40;margin:0;
  border:0;border-top:1px solid var(--avs-line);border-radius:0;background:#fff;
  padding:.7rem clamp(12px,4vw,32px);box-shadow:0 -6px 22px rgba(60,45,30,.16)}
/* מקום פנוי מתחת לתוכן, כדי שהשורה המקובעת לא תשב על סוף העמוד */
.avs-v2{padding-bottom:calc(var(--avs-buybar) + 8px)}
/*
 * חגורת ביטחון לרוחב: שום דבר בעורך אינו רשאי לחרוג מרוחב המסך.
 *
 * הבאג שזה מתקן: בטלפון העמוד נראה לבן, והתוכן התגלה רק בהקטנה מלאה, קטן
 * ודחוק לקצה - כלומר משהו מתח את הפריסה לרוחב גדול בהרבה מהמסך. התבנית
 * מגדירה html,body{overflow-x:hidden !important}, וחיתוך כזה מסתיר את הראיה:
 * scrollWidth נשאר תקין, ולכן הבדיקה שלנו דיווחה "אין גלישה" בזמן שהיתה.
 *
 * overflow-x:clip חוסם בלי ליצור גלילה פנימית ובלי לשבור position:sticky,
 * בניגוד ל-hidden. שתי השורות המקובעות ננעלות לרוחב המסך עצמו (100vw ולא
 * 100%), כי הן יושבות מחוץ לזרימת העמוד ואינן מושפעות מהחיתוך שלו.
 */
/* ---- קישורי ההורדה בעמוד התודה וב"החשבון שלי" ----
 *
 * דווח שהקופסאות יצאו ריקות - כיתוב לבן על רקע לבן - ובפריסה של 2-2-1
 * ברוחבים שונים. כפתור בלי טקסט אינו כפתור, ולכן הצבעים כאן מפורשים ואינם
 * יורשים מהתבנית, והרשימה אנכית: שורה אחת לכל קובץ, מיושרת לימין.
 */
.avs-ty-files{list-style:none;margin:1rem 0;padding:0;display:flex;
  flex-direction:column;gap:.6rem;text-align:right}
.avs-ty-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.avs-dl-btn{display:inline-block;flex:1 1 auto;background:#3f6b52!important;
  color:#fff!important;border-radius:999px;padding:.7rem 1.3rem;text-decoration:none;
  font-weight:600;font-size:1rem;text-align:center}
.avs-dl-btn:hover,.avs-dl-btn:focus{background:#345a45!important;color:#fff!important}
.avs-dl-alt{color:#6b6257!important;text-decoration:underline;font-size:.9rem;white-space:nowrap}
@media(max-width:600px){
 .avs-ty-row{flex-direction:column;align-items:stretch}
 .avs-dl-alt{text-align:center}
}

/* ---- עמוד ההשלמה: כרטיס עם תמונה, ולא כותרת ומחיר בלבד ---- */
.avs-offers .avs-offer-card{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid #e5ddd1;border-radius:14px;background:#fff;text-decoration:none;
  color:inherit;transition:transform .12s ease,box-shadow .12s ease}
.avs-offers .avs-offer-card:hover{transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(60,45,30,.14)}
.avs-offers .avs-offer-card .avs-lp-shot{display:block;width:100%;background:#faf7f2}
.avs-offers .avs-offer-card .avs-lp-shot img,
.avs-offers .avs-offer-card canvas{width:100%;height:auto;display:block}
.avs-offers .avs-offer-body{padding:.8rem .9rem}
.avs-offers .avs-offer-body h2{margin:0 0 .2rem;font-size:1.05rem}
.avs-offers .avs-offer-note{margin:0 0 .4rem;color:#8a7f72;font-size:.85rem}
.avs-offers .avs-offer-price{margin:0;color:#2f5a42;font-size:.9rem;line-height:1.5}
.avs-offers .avs-offer-extra .avs-offer-price{color:#6b6257}
.avs-offers .avs-save-line{margin:.6rem 0 0;padding:.6rem .9rem;border:1px solid #cfe0d5;
  background:#f2f8f4;border-radius:12px;color:#2f5a42;font-weight:600}
/* כפתור נראה לעין בכל כרטיס: כותרת שהיא קישור נבלעת בתוך כרטיס עם תמונה */
.avs-offers .avs-offer-btn{display:inline-block;margin-top:.6rem;background:#3f6b52;
  color:#fff;border-radius:999px;padding:.45rem 1.1rem;font-weight:600;font-size:.9rem}
.avs-offers .avs-offer-extra .avs-offer-btn{background:#c08a3e}

/* ---- "רוצה להשלים את הסט?": מה שכבר בסל, ושורת הסט ---- */
.avs-lp-card-mine{border-color:#3f6b52;box-shadow:0 0 0 2px rgba(63,107,82,.18)}
.avs-in-cart{display:inline-block;margin-inline-start:.4rem;padding:.1rem .5rem;border-radius:999px;
  background:#e4f1e9;color:#2f5a42;font-size:.75rem;font-weight:700;vertical-align:middle}
.avs-set-line{margin:.9rem 0 0;padding:.7rem .9rem;border:1px solid #cfe0d5;background:#f2f8f4;
  border-radius:12px;color:#2f5a42;font-weight:600;text-align:center}
.avs-set-link{display:inline-block;margin-inline-start:.5rem;background:#3f6b52;color:#fff;
  border-radius:999px;padding:.35rem .9rem;text-decoration:none;font-weight:600}

/* פס ההנחה מחברה בראש העורך. מוגדר גם כאן וגם בסגנון של קובץ ההפניות, כי
   בעורך הסגנון ההוא נטען רק כשהכפתור הצף מוצג. */
.avs-v2 .avs-ref-gift{margin:.5rem 0 0;padding:.55rem .9rem;border:1px solid #cfe0d5;
  background:#f2f8f4;border-radius:12px;color:#2f5a42;font-size:.9rem}
.avs-v2 .avs-ref-gift-off{border-color:#e5ddd1;background:#faf7f2;color:#6b6257}

/* ================= עמוד הסל בטלפון =================
 *
 * דווח שבטלפון הסל מוזז ימינה ונחתך בקצה. הסיבה היא טבלה: טבלת הסל של
 * ווקומרס נבנית מעמודות עם רוחב קבוע, וטבלה אינה מצטמצמת מתחת לרוחב התוכן
 * שלה - היא פשוט גולשת. במסמך RTL הגלישה יוצאת מהצד הימני, וזה בדיוק מה
 * שנראה: התוכן נדחף החוצה ונחתך.
 *
 * לכן שתי החלטות: הטבלה נעולה לרוחב ההורה ומותר לה לשבור מילים, ומתחת ל-600
 * פיקסלים היא מפסיקה להיות טבלה - כל שורה הופכת לכרטיס, וכותרת העמודה מגיעה
 * מ-data-title שווקומרס כבר שם על כל תא. כך אין עמודות שנדחסות ואין חיתוך.
 */
body.woocommerce-cart .woocommerce,
body.woocommerce-cart .wc-block-cart,
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .elementor-section,
body.woocommerce-cart .elementor-container,
body.woocommerce-cart .elementor-widget-container{max-width:100%;min-width:0}
body.woocommerce-cart table.shop_table{width:100%;max-width:100%;table-layout:auto;
  border-collapse:collapse}
body.woocommerce-cart table.shop_table th,
body.woocommerce-cart table.shop_table td{width:auto;min-width:0;overflow-wrap:anywhere}
/*
 * עמודת התמונה בסל: רוחב קבוע, בלי מתיחה.
 *
 * הבאג שדווח: התמונה יצאה כרצועה של כ-20 פיקסלים ביחס צדדים שבור. הסיבה היא
 * טבלה - עמודה בלי רוחב מוגדר מקבלת את מה שנשאר אחרי שאר העמודות, והתמונה
 * נדחסת אליו. object-fit:contain שומר על היחס בתוך הריבוע במקום למתוח אותו.
 */
body.woocommerce-cart table.shop_table th.product-thumbnail,
body.woocommerce-cart table.shop_table td.product-thumbnail{width:96px;min-width:96px}
body.woocommerce-cart table.shop_table td.product-thumbnail img,
body.woocommerce-checkout table.shop_table td.product-thumbnail img,
.avs-cart-thumb{width:80px;height:80px;max-width:80px;object-fit:contain;
  display:block;border-radius:8px;background:#faf7f2}
/* התמונה והשם על אותו קו, ולא התמונה תלויה מעל השם */
body.woocommerce-cart table.shop_table td.product-thumbnail,
body.woocommerce-cart table.shop_table td.product-name{vertical-align:middle}
body.woocommerce-cart table.shop_table img{max-width:100%;height:auto}
/* קופת הבלוקים: אותה דרישה, מבנה אחר */
body.woocommerce-cart .wc-block-cart-items,
body.woocommerce-cart .wc-block-cart-items__row{max-width:100%;min-width:0}
body.woocommerce-cart .wc-block-cart-items td{overflow-wrap:anywhere}

/*
 * בלוק הסל של ווקומרס עם alignwide - השוליים השליליים.
 *
 * נמדד בעמוד הסל: div.wp-block-woocommerce-cart.alignwide עם שוליים של
 * 80px- בכל צד, כלומר הוא חורג 80 פיקסלים מעבר לרוחב המסך משני הצדדים. זה
 * מה שדוחף את העמוד ימינה במובייל ומה שחותך את המקטע שמתחתיו.
 *
 * "alignwide" נועד לתבניות שיש להן אזור תוכן צר ומרווח מסביבו; כאן אין
 * מרווח כזה, ולכן הרוחב הנוסף יוצא אל מחוץ למסך. הבלוק עצמו נשאר - ייתכן
 * שהוא מרנדר את הסל - ורק ההזזה מבוטלת.
 */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart.alignwide,
.wp-block-woocommerce-checkout,
.wp-block-woocommerce-checkout.alignwide{margin-left:0!important;margin-right:0!important;
  inset-inline:auto!important;max-width:100%!important;width:auto!important}

/*
 * "עריכה" בשורת הסל ובשורת הקופה.
 *
 * שורה משלו ולא המשך של שם המוצר: מי שסורקת את הסל מחפשת את השם, ומילה
 * שנצמדת לסופו נקראת כחלק ממנו. display:block מוציא אותה לשורה נפרדת בלי
 * להיות תלוי במה שהתבנית עושה סביב.
 */
.avs-edit-link{display:block;margin-top:.25rem;font-size:.85rem;
  color:#3f6b52!important;text-decoration:underline;font-weight:600}
.avs-edit-link:hover,.avs-edit-link:focus{color:#345a45!important}

/*
 * הבקשה לבדוק, ליד כפתור התשלום.
 *
 * היא בולטת יותר משורת הביטחון שמתחתיה במכוון: זו ההודעה האחרונה שעוד אפשר
 * לפעול לפיה, ואם היא נראית כמו עוד שורת שיווק היא לא תיקרא.
 */
.avs-check-before-pay{margin:.9rem 0 .4rem;padding:.7rem .9rem;
  background:#fdf6e8;border:1px solid #e3d3ae;border-radius:10px;
  color:#6b5836;font-size:.92rem;line-height:1.55;text-align:right}

/* --------------- עמוד התודה: אקורדיון, הפניה מקוצרת, כתובת -------------- */

/*
 * טבלת פרטי ההזמנה מקופלת. הכפתור נראה ככפתור ולא כמשולש קטן, כי אחרת
 * לא לוחצים עליו.
 */
.avs-order-details{margin:1.2rem 0;border:1px solid var(--avs-line,#e6ded2);
  border-radius:10px;background:#fff;overflow:hidden}
.avs-order-details>summary,
.avs-ref-more>summary{cursor:pointer;list-style:none;padding:.75rem 1rem;
  font-weight:600;color:#3f6b52;background:#faf7f2;user-select:none}
.avs-order-details>summary::-webkit-details-marker,
.avs-ref-more>summary::-webkit-details-marker{display:none}
.avs-order-details>summary::after,
.avs-ref-more>summary::after{content:' ▾';font-size:.85em}
.avs-order-details[open]>summary::after,
.avs-ref-more[open]>summary::after{content:' ▴'}
.avs-order-details>*:not(summary){padding:0 1rem 1rem}

/* ההפניה בעמוד התודה: משפט, יתרה, וכפתור שפותח את הטופס */
.avs-ref-compact{margin:1.2rem 0;padding:.9rem 1rem;border-radius:12px;
  border:1px solid var(--avs-line,#e6ded2);background:#fff;text-align:right}
.avs-ref-compact-line{margin:0 0 .5rem;font-size:.95rem;line-height:1.6}
.avs-ref-more{margin-top:.6rem;border:1px solid var(--avs-line,#e6ded2);
  border-radius:999px;overflow:hidden}
.avs-ref-more[open]{border-radius:10px}
.avs-ref-more>summary{text-align:center}
/* בתוך הפתיחה הפאנל כבר ממוסגר בעצמו - בלי מסגרת כפולה */
.avs-ref-more .avs-ref{border:0;padding:.6rem 1rem 1rem;margin:0}

/*
 * כתובת לחיוב בהזמנה דיגיטלית.
 *
 * המוצר הוא קובץ ואין לאן לשלוח אותו: הקופה כבר אינה מבקשת כתובת (ראו
 * digital_only_fields), ולכן הצגת "כתובת לחיוב" עם שם ומייל בלבד נראית
 * כמו טופס חסר. שם ומייל מופיעים ממילא בשורת הכותרת של עמוד התודה.
 */
body.avigai-digital-order .woocommerce-customer-details .woocommerce-columns--addresses,
body.avigai-digital-order .woocommerce-customer-details address{display:none!important}

/* ---------------- הבדיקה האחרונה: הודעה, תצוגות, מחיר, עריכה ------------- */

.avs-fc{margin:1rem 0 1.4rem;max-width:100%;box-sizing:border-box}
.avs-fc-notice{margin:0 0 .9rem;padding:.8rem 1rem;background:#fdf6e8;
  border:1px solid #e3d3ae;border-radius:10px;color:#6b5836;
  font-size:.95rem;line-height:1.6;text-align:right;font-weight:600}
.avs-fc-lines{display:flex;flex-direction:column;gap:1rem}
.avs-fc-line{border:1px solid var(--avs-line,#e6ded2);border-radius:12px;
  padding:.9rem 1rem;background:#fff;box-sizing:border-box;max-width:100%}
.avs-fc-title{margin:0 0 .5rem;font-size:1.02rem;text-align:right}

/* המחיר של הסט: המלא מחוק, הסופי גדול, והחיסכון במילים */
.avs-fc-price{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin:0 0 .7rem;text-align:right}
.avs-fc-was{color:#8a7f72;font-size:.92rem}
.avs-fc-was s{text-decoration:line-through}
.avs-fc-now{font-size:1.25rem;font-weight:700;color:#3f6b52}
.avs-fc-save{flex:1 1 100%;font-size:.86rem;color:#3f6b52;font-weight:600}

/*
 * שלוש התצוגות זו לצד זו, ובמסך צר - זו מתחת לזו.
 * minmax(0,1fr) ולא 1fr: בלעדיו קנבס רחב מנפח את העמודה ומוציא את הכרטיס
 * מהמסך, וזה בדיוק סוג החריגה שהמסך הזה אמור למנוע.
 */
.avs-fc-previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:.7rem;margin:0 0 .8rem}
.avs-fc-preview{margin:0;min-width:0}
.avs-fc-preview figcaption{margin-top:.3rem;font-size:.8rem;color:#6b6257;text-align:center}
.avs-preview-box{width:100%;background:#faf7f2;border:1px solid var(--avs-line,#e6ded2);
  border-radius:8px;overflow:hidden;cursor:zoom-in;position:relative}
.avs-preview-box:focus-visible{outline:2px solid #c08a3e;outline-offset:2px}
.avs-preview-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.avs-preview-items{position:absolute;inset:0}
.avs-preview-item{position:absolute;display:flex;align-items:center;
  justify-content:center;overflow:visible}
.avs-preview-item img{width:100%;height:100%;object-fit:contain;display:block}
.avs-preview-item span{display:block;width:100%;line-height:1.15;
  white-space:pre-wrap;word-break:break-word}

.avs-fc-edit{display:inline-block;background:#fff;color:#3f6b52!important;
  border:1.5px solid #3f6b52;border-radius:999px;padding:.5rem 1.1rem;
  text-decoration:none;font-weight:600;font-size:.92rem}
.avs-fc-edit:hover,.avs-fc-edit:focus{background:#3f6b52;color:#fff!important}

/* עמוד התודה: אותן תצוגות, קטנות, בלי כפתור ובלי הודעה */
.avs-fc-small .avs-fc-previews{grid-template-columns:repeat(auto-fit,minmax(90px,140px))}

/* ההגדלה */
.avs-preview-lightbox{position:fixed;inset:0;z-index:2147483000;
  background:rgba(30,26,22,.85);display:flex;align-items:center;
  justify-content:center;padding:1rem;box-sizing:border-box}
.avs-preview-stage{position:relative;width:min(96vw,900px);max-height:92vh;
  display:flex;flex-direction:column;gap:.5rem}
.avs-preview-big{width:100%;max-height:80vh;position:relative;background:#faf7f2;
  border-radius:10px;overflow:hidden}
.avs-preview-caption{margin:0;color:#fff;text-align:center;font-size:.95rem}
.avs-preview-close{position:absolute;inset-block-start:-.2rem;inset-inline-end:-.2rem;
  transform:translate(0,-100%);background:#fff;color:#3a3128;border:0;
  border-radius:999px;width:2.2rem;height:2.2rem;font-size:1.1rem;cursor:pointer}

@media(max-width:600px){
 .avs-fc-previews{grid-template-columns:1fr}
 .avs-fc-small .avs-fc-previews{grid-template-columns:repeat(auto-fit,minmax(80px,1fr))}
}

@media(max-width:600px){
 /* מטבלה לכרטיסים. thead נעלם כי הכותרות עוברות אל התאים עצמם. */
 body.woocommerce-cart table.shop_table thead{position:absolute;width:1px;height:1px;
   overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 body.woocommerce-cart table.shop_table,
 body.woocommerce-cart table.shop_table tbody,
 body.woocommerce-cart table.shop_table tr,
 body.woocommerce-cart table.shop_table td{display:block;width:100%;max-width:100%;
   box-sizing:border-box}
 body.woocommerce-cart table.shop_table tr{margin:0 0 .8rem;padding:.6rem .7rem;
   border:1px solid #eadfd5;border-radius:12px;background:#fff}
 body.woocommerce-cart table.shop_table td{border:0;padding:.3rem 0;text-align:start}
 /* שם העמודה לפני הערך, מתוך ה-data-title שווקומרס כבר שם על כל תא */
 body.woocommerce-cart table.shop_table td[data-title]::before{
   content:attr(data-title) ": ";font-weight:600;color:#6b6257}
 body.woocommerce-cart table.shop_table td.product-remove::before,
 body.woocommerce-cart table.shop_table td.product-thumbnail::before{content:none}
 /* בכרטיס המובייל התמונה קטנה יותר, ועדיין ריבועית ובלי מתיחה */
 body.woocommerce-cart table.shop_table td.product-thumbnail img,
 body.woocommerce-cart table.shop_table td.product-thumbnail .avs-cart-thumb{
   width:64px;height:64px;max-width:64px;object-fit:contain}
 body.woocommerce-cart table.shop_table td.product-thumbnail{width:auto;min-width:0}
 body.woocommerce-cart table.shop_table td.actions{padding:.5rem 0}
 body.woocommerce-cart table.shop_table .quantity input{max-width:5rem}
 body.woocommerce-cart .coupon,
 body.woocommerce-cart .coupon input,
 body.woocommerce-cart .coupon button{max-width:100%;box-sizing:border-box}
}

body.avigai-studio-page{max-width:100vw}
body.avigai-studio-page .avs,
body.avigai-studio-page .entry-content,
body.avigai-studio-page .elementor-section,
body.avigai-studio-page .elementor-container,
body.avigai-studio-page .elementor-widget-container{max-width:100vw;min-width:0}
.avs .avs-v2,.avs-v2{max-width:100vw;overflow-x:clip}
/* height:auto רק לתמונות: לקנבס העיצוב יש מיקום מוחלט וגובה משלו */
.avs-v2 img{max-width:100%;height:auto}
.avs-v2 canvas,.avs-v2 svg,.avs-v2 video{max-width:100%}
.avs-v2 .avs-finish,.avs-v2 .avs-toolbar{max-width:100vw;box-sizing:border-box}
.avs-v2 .avs-submit-area{display:flex;flex-direction:column;gap:.4rem;align-items:stretch}
.avs-v2 .avs-cta{background:var(--avs-accent);color:#fff;border:0;border-radius:999px;padding:.75rem 1.6rem;font:inherit;font-weight:600;cursor:pointer}
.avs-v2 .avs-bundle-next{background:#3f6b52;color:#fff;border:0;border-radius:999px;padding:.75rem 1.6rem;font:inherit;font-weight:600;cursor:pointer}
.avs-v2 .avs-cta[hidden],.avs-v2 .avs-bundle-next[hidden]{display:none}

/* ---- הסט המלא: מחוון 1/3 · 2/3 · 3/3 ---- */
.avs-v2 .avs-bundle-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;border:1px solid #cfe0d5;background:#f2f8f4;border-radius:12px;padding:.55rem .8rem}
.avs-v2 .avs-bundle-bar[hidden]{display:none}
.avs-v2 .avs-bundle-count{font-weight:700;color:#2f5a42}
.avs-v2 .avs-bundle-steps{display:flex;flex-wrap:wrap;gap:.35rem}
.avs-v2 .avs-bundle-step{border:1px solid #cfe0d5;background:#fff;border-radius:999px;padding:.3rem .7rem;font:inherit;font-size:.8rem;color:#4a4038;cursor:pointer}
.avs-v2 .avs-bundle-step.is-done{background:#e4f1e9;color:#2f5a42}
.avs-v2 .avs-bundle-step.is-active{border-color:#3f6b52;background:#3f6b52;color:#fff}
.avs-v2 .avs-chip-bundle{border-color:#3f6b52;background:#f2f8f4}
.avs-v2 .avs-chip-bundle.is-active{background:#3f6b52;color:#fff}
.avs-v2 .avs-chip-bundle.is-active small{color:#dfeee6}

/* ---- תמונה קטנה של עיצוב עטיפה: על האריזה, לא כגיליון שטוח ---- */
/* אריח עטיפה: התמונה מצוירת לקנבס אחרי הטעינה, ועד אז לאריח אין גובה משלו -
   הוא יצא נמוך מכדי לגעת בו, והנגיעה נחתה על מה שמתחתיו. גובה מזערי פותר
   את זה בלי לשנות את הפריסה אחרי הציור. */
.avs-v2 .avs-design-tile.has-mockup{aspect-ratio:auto;display:flex;align-items:center;background:#fff;
  min-height:72px}
.avs-v2 .avs-tile-wrap{position:relative;display:block;width:100%;line-height:0}
.avs-v2 .avs-tile-wrap canvas{width:100%;height:auto;display:block}
.avs-v2 .avs-tile-mockup{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat;mix-blend-mode:multiply;opacity:.85}

/* ---- מובייל ---- */
@media(max-width:900px){
 .avs-v2 .avs-select{order:-1}
 .avs-v2 .avs-design-list{grid-template-columns:repeat(3,1fr)}
 /* סרגל הכלים נדבק לתחתית כדי שיהיה בהישג אצבע, ולכן הוא מרחף מעל מה שמתחתיו.
    בלי מקום פנוי מתחת לקנבס הוא נח בדיוק עליו ובולע כל לחיצה על פריט שיושב
    שם - וזה נראה בדיוק כמו "אי אפשר לבחור את הכיתוב". הריפוד שומר לו מקום. */
 /*
  * סרגל הכלים מקובע מעל שורת הקנייה, ולא דביק.
  *
  * הבאג שזה מתקן: בטלפון אי אפשר היה ללחוץ על "איפוס העיצוב" ועל כלי העריכה.
  * שורת הקנייה מקובעת לתחתית המסך, וסרגל דביק נשאר צמוד רק כל עוד יש תוכן
  * אחריו לגלול - ולכן בסוף העמוד הוא נח **מתחת** לשורה המקובעת. הנגיעה
  * נחתה על שורת המחיר במקום על הכפתור, וזה נראה כאילו הכפתורים מתים.
  */
 .avs-v2 .avs-toolbar{position:fixed;inset-inline:0;margin-inline:auto;width:max-content;max-width:calc(100% - 20px);
   bottom:calc(var(--avs-buybar) + 8px);z-index:41}
 /* מקום פנוי לשניהם יחד, אחרת הם מכסים את סוף התוכן */
 .avs-v2{padding-bottom:calc(var(--avs-buybar) + var(--avs-toolbar) + 24px)}
 .avs-v2 .avs-edit{padding-bottom:8px}
 .avs-v2.avs-shape-a5 .avs-canvas{max-width:100%}
 .avs-v2 .avs-finish{flex-direction:column;align-items:stretch;text-align:center}
 .avs-v2 .avs-cta{width:100%}
}
@media(max-width:420px){
 .avs-v2 .avs-design-list{grid-template-columns:repeat(2,1fr)}
 .avs-v2 .avs-sticker-grid,.avs-v2 .avs-frame-row{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}
}
.avs.avs-plan-photoonly .avs-photo-crop{display:block}

/* Version 0.5: real artwork, accurate 2.76:1 pack and print integration */
.avs .avs-wrapper{width:min(700px,96%);aspect-ratio:1230/445;background:none!important;border-radius:0;isolation:isolate;overflow:visible;filter:drop-shadow(0 15px 12px rgba(43,28,20,.22))}
.avs .avs-wrapper:after{content:"";position:absolute;inset:0;z-index:3;background:url("images/mockup-base-real.png") center/100% 100% no-repeat;mix-blend-mode:multiply;pointer-events:none}
/* ---- זה מה שקטם את הפינות בדף הברכה ובכרטיס ----
   הכלל הזה נשאר מגרסה ישנה: הוא הכניס את קנבס העיצוב פנימה ב-10%-15% וחתך
   אותו למתומן עם פינות קטומות - צורת החטיף. הבורר .avs תופס גם את המסך
   החדש, ולכן הוא חל על **כל** הצורות, וגם דף ברכה וכרטיס קיבלו את צללית
   החטיף בתוך מלבן ישר. הצללית של העטיפה נעשית היום בתוך הקנבס עצמו
   (paintOnBar), ובדף ברכה ובכרטיס אין צללית כלל.
   הכלל צומצם לסימון של המסך הישן בלבד, שאינו קיים יותר בעורך. */
.avs-wrapper .avs-design-art{position:absolute;z-index:1;left:10%;right:10%;top:13%;bottom:15%;background-position:center;background-size:cover;background-repeat:no-repeat;clip-path:polygon(4% 7%,96% 7%,100% 18%,100% 82%,96% 94%,4% 94%,0 82%,0 18%)}
/* בעורך: הקנבס ממלא את המלבן, בלי חיתוך CSS ובלי כניסות */
.avs-v2 .avs-design-art{inset:0;left:0;right:0;top:0;bottom:0;clip-path:none}
.avs .palette-cream .avs-design-art{background-image:url("images/design-botanical.svg")}
.avs .palette-joy .avs-design-art{background-image:url("images/design-celebration.svg")}
.avs .palette-luxury .avs-design-art{background-image:url("images/design-luxury.svg")}
.avs .avs-print-shading{position:absolute;z-index:2;left:10%;right:10%;top:13%;bottom:15%;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.52) 0,transparent 18%,transparent 72%,rgba(45,24,13,.2) 100%),linear-gradient(90deg,rgba(255,255,255,.35),transparent 8%,transparent 92%,rgba(42,24,14,.18));mix-blend-mode:soft-light}
.avs .avs-copy{z-index:4;inset:19% 17% 20% 43%;text-shadow:0 1px 1px rgba(255,255,255,.4)}
.avs .palette-luxury .avs-copy{color:#fff5d8;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.avs .avs-photo-crop{z-index:5;left:17%;top:24%;width:22%}
.avs .avs-thumb-cream{background-image:url("images/design-botanical.svg")!important}
.avs .avs-thumb-joy{background-image:url("images/design-celebration.svg")!important}
.avs .avs-thumb-luxury{background-image:url("images/design-luxury.svg")!important}
.avs .avs-submit-area{display:flex;align-items:center;gap:12px}.avs .avs-submit-error{max-width:360px;margin:0;color:#a12635;font-size:13px;font-weight:700}
@media(max-width:600px){.avs .avs-wrapper{aspect-ratio:1230/445}.avs .avs-copy{inset:19% 15% 20% 43%}.avs .avs-photo-crop{left:16%;top:24%;width:23%}.avs .avs-submit-area{width:100%;flex-direction:column}}

/* Version 0.5.1: tightly cropped, shorter pack; artwork follows the full printed wrapper */
.avs .avs-wrapper{width:min(650px,94%);aspect-ratio:1110/427}
.avs .avs-wrapper:after{background-image:url("images/mockup-base-real.png");mix-blend-mode:multiply}
/* ---- זה היה הבאג "החטיף לבן לגמרי" ----
   השורה הזאת נשארה מגרסה ישנה של המסך, והיא הקיפה על קנבס העיצוב מסכת CSS
   שמצביעה על images/mockup-base-real.png - קובץ שכבר אינו קיים בתוסף.
   מסכה שמצביעה על תמונה חסרה אינה "לא עושה כלום": היא מסתירה את האלמנט
   לחלוטין. הקנבס נצבע כראוי (קופסת האבחון אמרה "painted", והתמונה שנשלפה
   ממנו הראתה את העיצוב), אבל הדפדפן פשוט לא הציג אותו, ומה שנראה היה הרקע
   הלבן של העמוד.
   הבורר .avs תופס גם את המסך החדש, ולכן זה חל על כל עטיפה.
   החיתוך לצללית נעשה היום בתוך הקנבס, ואין כאן צורך במסכה בכלל. */
.avs .avs-design-art{inset:0}
.avs .avs-print-shading{inset:4% 7% 5%;background:linear-gradient(180deg,rgba(255,255,255,.56),transparent 19%,transparent 70%,rgba(35,20,12,.3));mix-blend-mode:soft-light}
.avs .avs-copy{inset:18% 16% 19% 42%}
.avs .avs-photo-crop{left:16%;top:22%;width:24%}
@media(max-width:600px){.avs .avs-wrapper{aspect-ratio:1110/427}.avs .avs-copy{inset:18% 14% 19% 42%}}

/* Version 0.6: choose design first, then optional paid upgrades */
.avs .avs-upgrade-start{display:grid;gap:8px}.avs .avs-upgrade-start small{color:#7c6c68;text-align:center}
.avs .avs-upgrade{width:100%;padding:13px 15px!important;border:1px solid var(--teal)!important;border-radius:12px!important;background:#f2fbfa!important;color:var(--teal)!important;font-weight:800!important;cursor:pointer!important}.avs .avs-upgrade b{float:left;color:var(--wine)}
.avs.avs-plan-ready .avs-upgrade-start{display:grid}.avs.avs-plan-text .avs-upgrade-start,.avs.avs-plan-photo .avs-upgrade-start,.avs.avs-plan-photoonly .avs-upgrade-start{display:none}
.avs.avs-plan-ready .avs-text-controls,.avs.avs-plan-ready .avs-photo-controls{display:none}.avs.avs-plan-text .avs-text-controls,.avs.avs-plan-photo .avs-text-controls{display:block}.avs.avs-plan-photoonly .avs-text-controls{display:none}
.avs.avs-plan-text .avs-photo-controls{display:none}.avs.avs-plan-photo .avs-photo-controls,.avs.avs-plan-photoonly .avs-photo-controls{display:block}.avs.avs-plan-photo .avs-add-photo{display:none}
.avs .avs-hint{display:none}.avs.avs-has-photo .avs-hint{display:block}

/* Version 0.6.1: complete photo controls and safe crop placement */
.avs .avs-photo-crop{left:18%;top:24%;width:19%}
.avs .avs-photo-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.avs .avs-photo-tools button{padding:9px 7px!important;border:1px solid var(--line)!important;border-radius:10px!important;background:#fff!important;color:var(--wine)!important;font-size:12px!important;font-weight:700!important;cursor:pointer!important}.avs .avs-photo-tools button:hover,.avs .avs-photo-tools button.is-active{border-color:var(--teal)!important;background:#f2fbfa!important;color:var(--teal)!important}.avs .avs-photo-tools [data-photo-action="mirror"]{grid-column:1/-1}
@media(max-width:600px){.avs .avs-photo-crop{left:18%;top:25%;width:19%}}

/* Version 0.6.2: allow cancelling a paid upgrade, and balance the theme/design layout */
.avs .avs-downgrade{display:block!important;width:100%!important;margin-top:8px!important;padding:9px 10px!important;border:1px dashed #c9a3ab!important;border-radius:10px!important;background:transparent!important;color:#a1495a!important;font-size:12px!important;font-weight:700!important;cursor:pointer!important}
.avs .avs-downgrade:hover{background:#fdf3f4!important;border-color:#a1495a!important}
.avs .avs-downgrade-to-ready{display:none!important}
.avs.avs-plan-photoonly .avs-downgrade-to-text{display:none!important}
.avs.avs-plan-photoonly .avs-downgrade-to-ready{display:block!important}
.avs .avs-theme-row{grid-template-columns:1fr!important}
.avs .avs-theme-row .avs-tabs{grid-template-columns:repeat(6,1fr)!important;margin-bottom:14px!important}
@media(max-width:700px){.avs .avs-theme-row .avs-tabs{grid-template-columns:repeat(3,1fr)!important}}

/* Version 0.7.0: real photographed Rosh Hashana designs (already-wrapped artwork, no mockup mask needed) */
.avs .avs-thumb-rh-cheerful{background-image:url("images/rh-cheerful.png")!important;background-position:center}
.avs .avs-thumb-rh-delicate{background-image:url("images/rh-delicate.png")!important;background-position:center}
.avs .avs-thumb-rh-luxury{background-image:url("images/rh-luxury.png")!important;background-position:center}
.avs .avs-design[hidden]{display:none!important}
.avs .avs-wrapper.palette-rh-cheerful,.avs .avs-wrapper.palette-rh-delicate,.avs .avs-wrapper.palette-rh-luxury{background:none!important;aspect-ratio:700/323!important}
.avs .avs-wrapper.palette-rh-cheerful:after,.avs .avs-wrapper.palette-rh-delicate:after,.avs .avs-wrapper.palette-rh-luxury:after{content:none!important}
.avs .avs-wrapper.palette-rh-cheerful .avs-design-art,.avs .avs-wrapper.palette-rh-delicate .avs-design-art,.avs .avs-wrapper.palette-rh-luxury .avs-design-art,.avs .avs-wrapper.palette-rh-cheerful .avs-print-shading,.avs .avs-wrapper.palette-rh-delicate .avs-print-shading,.avs .avs-wrapper.palette-rh-luxury .avs-print-shading{display:none!important}
.avs .avs-wrapper.palette-rh-cheerful{background:url("images/rh-cheerful.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-rh-delicate{background:url("images/rh-delicate.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-rh-luxury{background:url("images/rh-luxury.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-rh-cheerful .avs-copy{inset:24% 22% 24% 22%;color:#7a2a1c}
.avs .avs-wrapper.palette-rh-delicate .avs-copy{inset:26% 20% 28% 30%;color:#7a3b52}
.avs .avs-wrapper.palette-rh-luxury .avs-copy{inset:24% 22% 22% 26%;color:#f4e6bd;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.avs .avs-wrapper.palette-rh-cheerful .avs-photo-crop{left:34%;top:26%;width:32%}
.avs .avs-wrapper.palette-rh-delicate .avs-photo-crop{left:38%;top:28%;width:28%}
.avs .avs-wrapper.palette-rh-luxury .avs-photo-crop{left:36%;top:24%;width:30%}
@media(max-width:600px){
 .avs .avs-wrapper.palette-rh-cheerful .avs-copy{inset:20% 18% 20% 18%}
 .avs .avs-wrapper.palette-rh-delicate .avs-copy{inset:22% 16% 24% 26%}
 .avs .avs-wrapper.palette-rh-luxury .avs-copy{inset:20% 18% 18% 22%}
}

/* Version 0.8.0: real photographed designs for birthday, thanks and success themes */
.avs .avs-thumb-bd-cheerful{background-image:url("images/birthday-cheerful.png")!important;background-position:center}
.avs .avs-thumb-bd-delicate{background-image:url("images/birthday-delicate.png")!important;background-position:center}
.avs .avs-thumb-bd-luxury{background-image:url("images/birthday-luxury.png")!important;background-position:center}
.avs .avs-thumb-th-cheerful{background-image:url("images/thanks-cheerful.png")!important;background-position:center}
.avs .avs-thumb-th-delicate{background-image:url("images/thanks-delicate.png")!important;background-position:center}
.avs .avs-thumb-th-luxury{background-image:url("images/thanks-luxury.png")!important;background-position:center}
.avs .avs-thumb-su-cheerful{background-image:url("images/success-cheerful.png")!important;background-position:center}
.avs .avs-thumb-su-delicate{background-image:url("images/success-delicate.png")!important;background-position:center}
.avs .avs-thumb-su-luxury{background-image:url("images/success-luxury.png")!important;background-position:center}

.avs .avs-wrapper.palette-bd-cheerful,.avs .avs-wrapper.palette-bd-delicate,.avs .avs-wrapper.palette-bd-luxury,
.avs .avs-wrapper.palette-th-cheerful,.avs .avs-wrapper.palette-th-delicate,.avs .avs-wrapper.palette-th-luxury,
.avs .avs-wrapper.palette-su-cheerful,.avs .avs-wrapper.palette-su-delicate,.avs .avs-wrapper.palette-su-luxury{
 background:none!important;aspect-ratio:700/323!important
}
.avs .avs-wrapper.palette-bd-cheerful:after,.avs .avs-wrapper.palette-bd-delicate:after,.avs .avs-wrapper.palette-bd-luxury:after,
.avs .avs-wrapper.palette-th-cheerful:after,.avs .avs-wrapper.palette-th-delicate:after,.avs .avs-wrapper.palette-th-luxury:after,
.avs .avs-wrapper.palette-su-cheerful:after,.avs .avs-wrapper.palette-su-delicate:after,.avs .avs-wrapper.palette-su-luxury:after{content:none!important}
.avs .avs-wrapper.palette-bd-cheerful .avs-design-art,.avs .avs-wrapper.palette-bd-delicate .avs-design-art,.avs .avs-wrapper.palette-bd-luxury .avs-design-art,
.avs .avs-wrapper.palette-th-cheerful .avs-design-art,.avs .avs-wrapper.palette-th-delicate .avs-design-art,.avs .avs-wrapper.palette-th-luxury .avs-design-art,
.avs .avs-wrapper.palette-su-cheerful .avs-design-art,.avs .avs-wrapper.palette-su-delicate .avs-design-art,.avs .avs-wrapper.palette-su-luxury .avs-design-art,
.avs .avs-wrapper.palette-bd-cheerful .avs-print-shading,.avs .avs-wrapper.palette-bd-delicate .avs-print-shading,.avs .avs-wrapper.palette-bd-luxury .avs-print-shading,
.avs .avs-wrapper.palette-th-cheerful .avs-print-shading,.avs .avs-wrapper.palette-th-delicate .avs-print-shading,.avs .avs-wrapper.palette-th-luxury .avs-print-shading,
.avs .avs-wrapper.palette-su-cheerful .avs-print-shading,.avs .avs-wrapper.palette-su-delicate .avs-print-shading,.avs .avs-wrapper.palette-su-luxury .avs-print-shading{display:none!important}

.avs .avs-wrapper.palette-bd-cheerful{background:url("images/birthday-cheerful.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-bd-delicate{background:url("images/birthday-delicate.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-bd-luxury{background:url("images/birthday-luxury.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-th-cheerful{background:url("images/thanks-cheerful.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-th-delicate{background:url("images/thanks-delicate.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-th-luxury{background:url("images/thanks-luxury.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-su-cheerful{background:url("images/success-cheerful.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-su-delicate{background:url("images/success-delicate.png") center/100% 100% no-repeat!important}
.avs .avs-wrapper.palette-su-luxury{background:url("images/success-luxury.png") center/100% 100% no-repeat!important}

.avs .avs-wrapper.palette-bd-cheerful .avs-copy{inset:24% 30% 28% 33%;color:#2a3a52}
.avs .avs-wrapper.palette-bd-delicate .avs-copy{inset:26% 28% 30% 31%;color:#5c4a4a}
.avs .avs-wrapper.palette-bd-luxury .avs-copy{inset:26% 30% 30% 24%;color:#f4e6bd;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.avs .avs-wrapper.palette-th-cheerful .avs-copy{inset:22% 27% 22% 22%;color:#7a2a3d}
.avs .avs-wrapper.palette-th-delicate .avs-copy{inset:22% 24% 24% 30%;color:#4a5a42}
.avs .avs-wrapper.palette-th-luxury .avs-copy{inset:24% 24% 22% 25%;color:#5c4a2f}
.avs .avs-wrapper.palette-su-cheerful .avs-copy{inset:20% 34% 26% 27%;color:#1c3a5c}
.avs .avs-wrapper.palette-su-delicate .avs-copy{inset:26% 32% 40% 26%;color:#3a3a42}
.avs .avs-wrapper.palette-su-luxury .avs-copy{inset:25% 31% 18% 29%;color:#f4e6bd;text-shadow:0 1px 3px rgba(0,0,0,.5)}

.avs .avs-wrapper.palette-bd-cheerful .avs-photo-crop{left:38%;top:28%;width:26%}
.avs .avs-wrapper.palette-bd-delicate .avs-photo-crop{left:37%;top:29%;width:26%}
.avs .avs-wrapper.palette-bd-luxury .avs-photo-crop{left:33%;top:30%;width:24%}
.avs .avs-wrapper.palette-th-cheerful .avs-photo-crop{left:32%;top:26%;width:28%}
.avs .avs-wrapper.palette-th-delicate .avs-photo-crop{left:40%;top:34%;width:22%}
.avs .avs-wrapper.palette-th-luxury .avs-photo-crop{left:34%;top:26%;width:26%}
.avs .avs-wrapper.palette-su-cheerful .avs-photo-crop{left:36%;top:24%;width:24%}
.avs .avs-wrapper.palette-su-delicate .avs-photo-crop{left:36%;top:30%;width:24%}
.avs .avs-wrapper.palette-su-luxury .avs-photo-crop{left:38%;top:30%;width:24%}

@media(max-width:600px){
 .avs .avs-wrapper.palette-bd-cheerful .avs-copy,.avs .avs-wrapper.palette-bd-delicate .avs-copy{inset:18% 24% 20% 26%}
 .avs .avs-wrapper.palette-bd-luxury .avs-copy{inset:18% 24% 20% 18%}
 .avs .avs-wrapper.palette-th-cheerful .avs-copy{inset:16% 22% 16% 18%}
 .avs .avs-wrapper.palette-th-delicate .avs-copy{inset:22% 26% 24% 30%}
 .avs .avs-wrapper.palette-th-luxury .avs-copy{inset:18% 20% 16% 20%}
 .avs .avs-wrapper.palette-su-cheerful .avs-copy{inset:16% 28% 20% 22%}
 .avs .avs-wrapper.palette-su-delicate .avs-copy{inset:20% 26% 32% 20%}
 .avs .avs-wrapper.palette-su-luxury .avs-copy{inset:18% 25% 14% 22%}
}

/* Version 0.10.0: fix photo/text overlap on the 12 photo-real designs.
   When only a photo was purchased (no text), hide the default greeting and let the
   photo use the whole safe zone. When BOTH text and photo are purchased, split the
   zone: photo on the left third, text on the right two-thirds, so they never overlap. */
.avs.avs-plan-photoonly .avs-copy{display:none!important}

.avs.avs-plan-photoonly .avs-wrapper.palette-rh-cheerful .avs-photo-crop{left:39.4%;top:27.1%;width:21.1%}
.avs.avs-plan-photoonly .avs-wrapper.palette-rh-delicate .avs-photo-crop{left:45.7%;top:28.8%;width:18.7%}
.avs.avs-plan-photoonly .avs-wrapper.palette-rh-luxury .avs-photo-crop{left:41.0%;top:27.2%;width:21.9%}
.avs.avs-plan-photoonly .avs-wrapper.palette-bd-cheerful .avs-photo-crop{left:41.8%;top:26.9%;width:19.5%}
.avs.avs-plan-photoonly .avs-wrapper.palette-bd-delicate .avs-photo-crop{left:42.6%;top:28.6%;width:17.9%}
.avs.avs-plan-photoonly .avs-wrapper.palette-bd-luxury .avs-photo-crop{left:38.1%;top:28.6%;width:17.9%}
.avs.avs-plan-photoonly .avs-wrapper.palette-th-cheerful .avs-photo-crop{left:36.1%;top:25.4%;width:22.7%}
.avs.avs-plan-photoonly .avs-wrapper.palette-th-delicate .avs-photo-crop{left:42.0%;top:25.2%;width:21.9%}
.avs.avs-plan-photoonly .avs-wrapper.palette-th-luxury .avs-photo-crop{left:39.5%;top:27.2%;width:21.9%}
.avs.avs-plan-photoonly .avs-wrapper.palette-su-cheerful .avs-photo-crop{left:35.5%;top:23.2%;width:21.9%}
.avs.avs-plan-photoonly .avs-wrapper.palette-su-delicate .avs-photo-crop{left:40.1%;top:28.0%;width:13.8%}
.avs.avs-plan-photoonly .avs-wrapper.palette-su-luxury .avs-photo-crop{left:37.4%;top:28.4%;width:23.1%}

.avs.avs-plan-photo .avs-wrapper.palette-rh-cheerful .avs-photo-crop{left:23.0%;top:30.6%;width:17.9%}
.avs.avs-plan-photo .avs-wrapper.palette-rh-cheerful .avs-copy{inset:24% 22% 24% 44.9%}
.avs.avs-plan-photo .avs-wrapper.palette-rh-delicate .avs-photo-crop{left:31.0%;top:31.7%;width:16.0%}
.avs.avs-plan-photo .avs-wrapper.palette-rh-delicate .avs-copy{inset:26% 20% 28% 51.0%}
.avs.avs-plan-photo .avs-wrapper.palette-rh-luxury .avs-photo-crop{left:27.0%;top:33.0%;width:16.6%}
.avs.avs-plan-photo .avs-wrapper.palette-rh-luxury .avs-copy{inset:24% 22% 22% 47.6%}
.avs.avs-plan-photo .avs-wrapper.palette-bd-cheerful .avs-photo-crop{left:34.0%;top:35.2%;width:11.8%}
.avs.avs-plan-photo .avs-wrapper.palette-bd-cheerful .avs-copy{inset:24% 30% 28% 49.8%}
.avs.avs-plan-photo .avs-wrapper.palette-bd-delicate .avs-photo-crop{left:32.0%;top:33.8%;width:13.1%}
.avs.avs-plan-photo .avs-wrapper.palette-bd-delicate .avs-copy{inset:26% 28% 30% 49.1%}
.avs.avs-plan-photo .avs-wrapper.palette-bd-luxury .avs-photo-crop{left:25.0%;top:32.0%;width:14.7%}
.avs.avs-plan-photo .avs-wrapper.palette-bd-luxury .avs-copy{inset:26% 30% 30% 43.7%}
.avs.avs-plan-photo .avs-wrapper.palette-th-cheerful .avs-photo-crop{left:23.0%;top:32.3%;width:16.3%}
.avs.avs-plan-photo .avs-wrapper.palette-th-cheerful .avs-copy{inset:22% 27% 22% 43.3%}
.avs.avs-plan-photo .avs-wrapper.palette-th-delicate .avs-photo-crop{left:31.0%;top:33.0%;width:14.7%}
.avs.avs-plan-photo .avs-wrapper.palette-th-delicate .avs-copy{inset:22% 24% 24% 49.7%}
.avs.avs-plan-photo .avs-wrapper.palette-th-luxury .avs-photo-crop{left:26.0%;top:33.3%;width:16.3%}
.avs.avs-plan-photo .avs-wrapper.palette-th-luxury .avs-copy{inset:24% 24% 22% 46.3%}
.avs.avs-plan-photo .avs-wrapper.palette-su-cheerful .avs-photo-crop{left:28.0%;top:33.5%;width:12.5%}
.avs.avs-plan-photo .avs-wrapper.palette-su-cheerful .avs-copy{inset:20% 34% 26% 44.5%}
.avs.avs-plan-photo .avs-wrapper.palette-su-delicate .avs-photo-crop{left:27.0%;top:28.6%;width:13.3%}
.avs.avs-plan-photo .avs-wrapper.palette-su-delicate .avs-copy{inset:26% 32% 40% 44.3%}
.avs.avs-plan-photo .avs-wrapper.palette-su-luxury .avs-photo-crop{left:30.0%;top:39.6%;width:12.8%}
.avs.avs-plan-photo .avs-wrapper.palette-su-luxury .avs-copy{inset:25% 31% 18% 46.8%}

/* Version 0.10.0: let a "photo only" customer also add text afterwards */
.avs .avs-add-text-too{display:none}
.avs.avs-plan-photoonly .avs-add-text-too{display:block}

/* Version 0.11.0: clear icon buttons for mirror/rotate, sitting directly on the photo
   itself (like Word's picture-format icons) instead of text buttons in the side list. */
.avs-icon-btn{display:none;position:absolute;width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 2px 8px rgba(48,31,24,.22);align-items:center;justify-content:center;color:var(--wine);cursor:pointer;z-index:9;padding:0}
.avs-icon-btn svg{width:17px;height:17px;pointer-events:none}
.avs-icon-btn:hover{border-color:var(--teal);color:var(--teal)}
.avs-icon-btn[aria-pressed="true"]{background:var(--teal);color:#fff;border-color:var(--teal)}
.avs-photo-crop.is-selected .avs-icon-btn{display:flex}
.avs-icon-mirror{top:-16px;left:50%;transform:translateX(-50%)}
.avs-icon-group-rotate{display:none;position:absolute;top:50%;right:100%;transform:translateY(-50%);margin-right:10px;flex-direction:column;gap:7px;z-index:9}
.avs-photo-crop.is-selected .avs-icon-group-rotate{display:flex}
.avs-icon-group-rotate .avs-icon-btn{position:static;display:flex}
@media(max-width:600px){.avs-icon-group-rotate{right:auto;left:100%;margin-right:0;margin-left:10px}}

/* Version 1.1: the real wrapped base (base-warped.png).

   This is the empty pack, cropped to its own bounding box out of the supplied
   1880x998 render, so the .avs-wrapper box IS the pack - which is what makes the
   measured fold ratios in fold-contour.json mean anything.

   It is laid over the artwork with mix-blend-mode:multiply. The image has an
   opaque white ground (the pack is white on white, so it cannot be keyed out),
   but multiply treats white as a no-op: only the creases and the shading under
   the folded edges darken what is beneath, exactly the trick mockup-base-real.png
   already used. Sitting above the art and below the copy/photo means the customer's
   own content stays crisp while the pack form reads through the design.

   The 12 photographic designs were authored at 700/323 (2.167) and the pack
   measures 1648/748 (2.203) - a 1.7% difference, so aligning them shifts nothing
   perceptible. */
   Scoped to the 12 photographic palettes only. The three generic palettes
   (cream / joy / luxury) are deliberately left exactly as they were: they keep
   their own aspect ratio, their own background and their own masked artwork, and
   they do not get the warped base. Note the consequence - on those three the fold
   guides are drawn against a silhouette that is not this pack, so they are
   indicative only. Giving them real geometry needs design files for this pack. */
.avs .avs-wrapper.palette-rh-cheerful,.avs .avs-wrapper.palette-rh-delicate,.avs .avs-wrapper.palette-rh-luxury,
.avs .avs-wrapper.palette-bd-cheerful,.avs .avs-wrapper.palette-bd-delicate,.avs .avs-wrapper.palette-bd-luxury,
.avs .avs-wrapper.palette-th-cheerful,.avs .avs-wrapper.palette-th-delicate,.avs .avs-wrapper.palette-th-luxury,
.avs .avs-wrapper.palette-su-cheerful,.avs .avs-wrapper.palette-su-delicate,.avs .avs-wrapper.palette-su-luxury{aspect-ratio:1648/748!important}
.avs .avs-wrap-base{position:absolute;inset:0;z-index:3;pointer-events:none;background:url("images/base-warped.png") center/100% 100% no-repeat;mix-blend-mode:multiply;opacity:.62}
.avs .palette-cream .avs-wrap-base,.avs .palette-joy .avs-wrap-base,.avs .palette-luxury .avs-wrap-base{display:none}

/* Version 1.1: wrapped-canvas <-> flat-sheet coordinate mapping.
   The two fold lines are straight horizontals in the wrapped view; JS sets their
   position from the fold table (6/20 and 15/20 of the sheet height), so nothing
   here hardcodes the geometry. Guides stay hidden until the customer is actually
   working on the canvas, so the plain preview keeps looking like the product. */
.avs .avs-fold-guides{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:0;transition:opacity .18s ease}
.avs .avs-stage:hover .avs-fold-guides,.avs .avs-wrapper:focus-within .avs-fold-guides,.avs .avs-wrapper.is-placing .avs-fold-guides{opacity:1}
.avs .avs-fold-line{position:absolute;left:2.5%;right:2.5%;height:0;border-top:1px dashed rgba(13,119,116,.85)}
/* small chips pinned just under each zone's upper edge, inside the pack so they stay
   readable over artwork instead of floating on the background */
.avs .avs-fold-zone{position:absolute;right:4.5%;height:auto!important;margin-top:4px;padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.88);box-shadow:0 1px 3px rgba(60,40,30,.2);font-size:10px;font-weight:800;letter-spacing:.3px;line-height:1.5;color:#0b6663;white-space:nowrap}

/* Placement affordances. The customer drags on the wrapped canvas, but every
   move is stored as flat centimetres - see assets/wrap-map.js. */
.avs .avs-copy{cursor:move;touch-action:none;user-select:none;-webkit-user-select:none}
.avs .avs-copy.is-selected{overflow:visible;outline:2px dashed var(--teal);outline-offset:4px}
.avs .avs-place-grip{display:none;position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--teal);box-shadow:0 2px 7px rgba(40,25,20,.35);z-index:9;touch-action:none}
.avs .avs-place-grip:before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1;color:var(--teal)}
.avs .avs-place-move{left:50%;top:-27px;transform:translateX(-50%);cursor:grab}
.avs .avs-place-move:before{content:"\271B"}
.avs .avs-place-size{right:-11px;bottom:-11px;cursor:nwse-resize}
.avs .avs-place-size:before{content:"\21F2"}
.avs .avs-copy.is-selected>.avs-place-grip,.avs .avs-photo-crop.is-selected>.avs-place-grip{display:block}
@media(max-width:600px){.avs .avs-place-grip{width:24px;height:24px}.avs .avs-fold-zone{font-size:9px;right:6px}}


/* ================= עמוד הנחיתה, השלמת הסט ועמוד התודה (15-18, 20-21) =================
   כל המסכים האלה חולקים ערכת צבעים אחת עם הסטודיו, ולכן הם מגדירים אותם
   משתנים: אחרת מעבר מהגלריה לעורך היה נראה כמו מעבר בין שני אתרים. */
.avs-lp,.avs-co,.avs-ty{--avs-line:#e5ddd1;--avs-ink:#4a4038;--avs-accent:#c08a3e;--avs-soft:#faf7f2;
  color:var(--avs-ink);max-width:1080px;margin:0 auto;padding:0 .8rem}
.avs-lp-hero{text-align:center;margin:1.2rem 0 1.6rem}
.avs-lp-hero h1{margin:.3rem 0}
.avs-lp-hero p{margin:.3rem 0;color:#6b6257}

.avs-lp-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.avs-lp-grid-small{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.avs-lp-card{border:1px solid var(--avs-line);border-radius:14px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.avs-lp-body{padding:.8rem 1rem 1rem;text-align:center}
.avs-lp-body h2,.avs-lp-body h3{margin:0 0 .3rem;font-size:1.05rem}
.avs-lp-body p{margin:0 0 .7rem;color:#6b6257;font-size:.88rem}
.avs-lp-body .avs-cta{display:inline-block;background:var(--avs-accent);color:#fff;border-radius:999px;
  padding:.55rem 1.2rem;text-decoration:none;font-weight:600}

/* תיבת התצוגה. בעטיפה יושב בתוכה קנבס ש-wrap-map.js צובע, ומעליו צילום
   האריזה ב-multiply - אותו מראה בדיוק כמו בקנבס הגדול של העורך. */
.avs-lp-shot{display:block;position:relative;background:var(--avs-soft);line-height:0}
.avs-lp-shot img{width:100%;height:auto;display:block}
.avs-lp-shot canvas{width:100%;height:auto;display:block}
.avs-lp-wrap{padding:14px 10px}
/* .avs-lp-mockup הוסר: ההצללה נצרבת לקנבס עצמו ב-paintOnBar, ושכבה נוספת
   הייתה מכפילה אותה. הכלל נשאר ריק בכוונה כדי שתבנית ישנה לא תישבר. */
.avs-lp-mockup{display:none}

.avs-lp-bundle,.avs-lp-custom{margin:1.6rem 0;padding:1.2rem;border:1px dashed var(--avs-line);
  border-radius:14px;background:var(--avs-soft);text-align:center}
.avs-lp-bundle h2,.avs-lp-custom h2{margin:0 0 .4rem}
.avs-lp-bundle p,.avs-lp-custom p{margin:0 0 .8rem;color:#6b6257}
.avs-lp-bundle .avs-cta{display:inline-block;background:#3f6b52;color:#fff;border-radius:999px;
  padding:.65rem 1.4rem;text-decoration:none;font-weight:600}

/* ---- טופס עיצוב אישי ועיצוב חינם ---- */
.avs-co{max-width:640px;padding:1.2rem;border:1px solid var(--avs-line);border-radius:14px;background:#fff}
.avs-co h2{margin:0 0 .4rem;text-align:center}
.avs-co>p{margin:0 0 1rem;text-align:center;color:#6b6257}
.avs-co-tracks{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-bottom:1.2rem}
.avs-co-track{border:1px solid var(--avs-line);border-radius:12px;padding:.8rem;background:var(--avs-soft)}
.avs-co-track b{display:block}
.avs-co-track p{margin:.4rem 0 0;font-size:.85rem;color:#6b6257}
.avs-co-price{display:inline-block;margin-top:.2rem;color:#3f6b52;font-weight:700}
.avs-co label{display:block;margin-bottom:.7rem;font-size:.9rem}
.avs-co label input,.avs-co label select,.avs-co label textarea{display:block;width:100%;box-sizing:border-box;
  margin-top:.25rem;border:1px solid var(--avs-line);border-radius:10px;padding:.6rem;font:inherit}
.avs-co-opt{color:#8a7f72;font-size:.8rem}
.avs-co .avs-cta{width:100%;background:var(--avs-accent);color:#fff;border:0;border-radius:999px;
  padding:.75rem 1.2rem;font:inherit;font-weight:600;cursor:pointer}
.avs-co-ok{background:#e4f1e9;border:1px solid #cfe0d5;border-radius:10px;padding:.8rem;text-align:center;color:#2f5a42}
.avs-co-err{background:#fdecea;border:1px solid #f3c9c4;border-radius:10px;padding:.8rem;text-align:center;color:#8a2b20}
.avs-free-shot{max-width:260px;height:auto;border-radius:10px;display:block;margin:0 auto}

/* ---- עמוד התודה ---- */
.avs-ty{margin:1.4rem auto;padding:1.2rem;border:1px solid var(--avs-line);border-radius:14px;background:#fff}
.avs-ty h2{margin:0 0 .4rem}
.avs-ty-files{list-style:none;margin:.6rem 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.avs-ty-files .avs-cta{display:inline-block;background:var(--avs-accent);color:#fff;border-radius:999px;
  padding:.6rem 1.2rem;text-decoration:none;font-weight:600}
.avs-ty-guide{background:var(--avs-soft);border:1px solid var(--avs-line);border-radius:10px;
  padding:.8rem 1rem;line-height:1.8}

@media(max-width:480px){
 .avs-lp-grid,.avs-lp-grid-small{grid-template-columns:1fr}
 .avs-ty-files{flex-direction:column}
 .avs-ty-files .avs-cta{text-align:center}
}

/* ---- סינון מדבקות לפי צבע ולוח הצבעים של העיצוב (סעיף 23) ---- */
.avs-v2 .avs-color-filter{display:flex;flex-wrap:wrap;gap:.35rem}
.avs-v2 .avs-color-filter:empty{display:none}
.avs-v2 .avs-color-chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid var(--avs-line);
  background:#fff;border-radius:999px;padding:.28rem .7rem;font:inherit;font-size:.78rem;color:var(--avs-ink);cursor:pointer}
.avs-v2 .avs-color-chip::before{content:'';width:12px;height:12px;border-radius:50%;background:var(--chip,#fff);
  border:1px solid rgba(0,0,0,.15);flex:0 0 auto}
.avs-v2 .avs-color-chip.avs-color-all::before{background:linear-gradient(135deg,#c0392b,#d99b2e,#4a7c59,#3d6fa5)}
.avs-v2 .avs-color-chip.is-active{border-color:var(--avs-accent);background:#fff5e6}
.avs-v2 .avs-color-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.avs-v2 .avs-palette{display:flex;flex-wrap:wrap;gap:.3rem}
.avs-v2 .avs-palette:empty{display:none}
.avs-v2 .avs-swatch{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.18);padding:0;cursor:pointer}
.avs-v2 .avs-swatch:hover{outline:2px solid var(--avs-accent);outline-offset:1px}

/* ---- מסגרת ותמונה: חיתוך לפתח, ושתי מערכות ידיות נפרדות (סעיף 1) ---- */
/* המסגרת נמתחת על המלבן במלואו. מלבן הפריט מיושר ל-JS ליחס הצדדים של קובץ
   המסגרת, ולכן אין כאן עיוות - וזה מה שמאפשר למסכה ולציור להתלכד בדיוק. */
.avs-v2 .avs-frame-img{object-fit:fill}
/* ---- ידיות: שתי מערכות בו-זמנית על מסגרת שיש בה תמונה ----
 *
 *      ✕ מסגרת ──────── ✕ תמונה
 *          זכוכית ──── סיבוב/גודל
 *
 * ידיות המסגרת מלאות בצבע המותג, ידיות התמונה הן מתאר ירוק על לבן - ההבדל
 * ניכר במבט אחד, בלי צורך לזכור איזו מהן פעילה. 32 פיקסלים הם המינימום שאפשר
 * לפגוע בו באצבע, ולכן זו המידה גם במחשב וגם בנייד. */
.avs-v2 .avs-handle{position:absolute;width:32px;height:32px;min-width:32px;min-height:32px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;
  cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.22);font-size:14px;line-height:1;z-index:2}
.avs-v2 .avs-handle svg{width:17px;height:17px;display:block}
.avs-v2 .avs-at-tl{top:2px;left:2px}
.avs-v2 .avs-at-tr{top:2px;right:2px}
.avs-v2 .avs-at-bl{bottom:2px;left:2px}
.avs-v2 .avs-at-br{bottom:2px;right:2px}

/* הפריט עצמו: זהב מלא. ✕ לבן, סיבוב וגודל מלאים. */
.avs-v2 .avs-handle-item.avs-handle-del{background:#fff;border:1px solid var(--avs-line);color:var(--avs-ink)}
.avs-v2 .avs-handle-item.avs-handle-rotate,
.avs-v2 .avs-handle-item.avs-handle-resize{background:var(--avs-accent);border:1px solid var(--avs-accent);color:#fff}

/* התמונה שבתוך המסגרת: אותם שלושה מקומות, במתאר ירוק */
.avs-v2 .avs-handle-photo{background:#fff;border:2px solid #3f6b52;color:#3f6b52}
.avs-v2 .avs-item.is-photo-selected{outline:1.5px dashed #3f6b52;outline-offset:2px}

/* הסמן אומר מה הידית עושה עוד לפני הלחיצה */
.avs-v2 .avs-handle-resize{cursor:nwse-resize}
.avs-v2 .avs-handle-rotate{cursor:grab}
.avs-v2 .avs-handle-rotate:active{cursor:grabbing}
/* הידיות יושבות בתוך גבולות הפריט: הקנבס חותך את מה שחורג ממנו, ופריט ליד
   הקצה היה מאבד אותן לגמרי */
/* המיקומים מגיעים מהמחלקות avs-at-* למעלה, לפי הפינה שהידית שייכת לה */
.avs-v2 .avs-text-body{white-space:pre-wrap;word-break:break-word}

/* ---- איפוס, אישור מחיקה וחיווי שמירה ---- */
.avs-v2 .avs-reset{color:#a0453a}
.avs-v2 .avs-reset:hover{background:#fdf3f2}

/* חלון האישור. הכיתוב על הכפתורים שלנו ובעברית, ולכן זה לא window.confirm. */
.avs-v2 .avs-confirm{position:fixed;inset:0;z-index:9995;background:rgba(30,22,16,.45);
  display:flex;align-items:center;justify-content:center;padding:1rem}
.avs-v2 .avs-confirm[hidden]{display:none}
.avs-v2 .avs-confirm-box{background:#fff;border-radius:14px;padding:1.2rem;max-width:340px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);text-align:center}
.avs-v2 .avs-confirm-box p{margin:0 0 1rem;font-size:1rem;color:var(--avs-ink)}
.avs-v2 .avs-confirm-actions{display:flex;gap:.5rem;justify-content:center}
.avs-v2 .avs-confirm-yes{background:#a0453a;color:#fff;border:0;border-radius:999px;
  padding:.6rem 1.4rem;font:inherit;cursor:pointer}
.avs-v2 .avs-confirm-no{background:#fff;color:var(--avs-ink);border:1px solid var(--avs-line);
  border-radius:999px;padding:.6rem 1.4rem;font:inherit;cursor:pointer}

.avs-v2 .avs-save-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem;margin:.35rem 0 0;min-height:1.2rem}
.avs-v2 .avs-save-status{margin:0;font-size:.78rem;color:#8a7f72}
.avs-v2 .avs-save-status.is-saving{color:var(--avs-accent)}
.avs-v2 .avs-save-status[hidden],.avs-v2 .avs-resumed[hidden]{display:none}
.avs-v2 .avs-resumed{margin:0;font-size:.82rem;color:#6b6257;background:#faf7f2;
  border:1px solid var(--avs-line);border-radius:999px;padding:.25rem .8rem}
.avs-v2 .avs-restart{background:none;border:0;color:var(--avs-accent);text-decoration:underline;
  cursor:pointer;font:inherit;font-size:.82rem;padding:0 .3rem}

/* מחיקת כיתוב */
.avs-v2 .avs-del-text-item{background:none;border:1px solid #e0c4c0;color:#8a2b20;border-radius:999px;
  padding:.45rem .9rem;font:inherit;cursor:pointer}

/* סוג מוצר שאין לו עדיין עמוד */
.avs-v2 .avs-chip.is-missing{opacity:.55}
/* עיצוב שקובץ התמונה שלו חסר - מסומן ולא נעלם */
.avs-v2 .avs-design-tile.is-missing{display:flex;align-items:center;justify-content:center;
  border:1px dashed #d9b3ad;color:#a0453a;font-size:.78rem;background:#fdf3f2}
/* הודעה כשקובץ העיצוב לא נטען */
.avs-v2 .avs-art-warn{margin:.4rem 0 0;text-align:center;font-size:.84rem;color:#8a2b20;
  background:#fdecea;border:1px solid #f3c9c4;border-radius:10px;padding:.4rem .7rem}
.avs-v2 .avs-art-warn[hidden]{display:none}

/* המסגרת והתמונה שבתוכה: קנבס אחד לשניהם (סעיף 1).
   הסיבוב יושב על .avs-item האב, ולכן תמונה, מסכה ומסגרת מסתובבות כגוף אחד
   ואי אפשר שייצא ביניהן טריז לבן. */
.avs-v2 .avs-frame-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}

/* קופסת האבחון: נפתחת רק עם ?avigai_debug=1 בכתובת */
.avs-v2 .avs-debug{margin:.5rem 0 0;padding:.6rem .8rem;border:1px solid #c9d6e2;border-radius:10px;
  background:#f2f7fb;font:12px/1.6 ui-monospace,Consolas,monospace;direction:ltr;text-align:left;
  white-space:pre-wrap;word-break:break-all;color:#24405c}
.avs-v2 .avs-debug[hidden]{display:none}