/* ==========================================================================
   share.css — the Share button, its sheet, and the channel buttons
   (share.js). Loaded on the product page only. Colours of the apps are their
   own brand colours; everything else follows the shop's theme (--violet).
   ========================================================================== */

/* The button on the product page */
.pd-share{display:inline-flex;align-items:center;gap:.4rem;border:1px solid #d9d4e8;background:#fff;color:#3a3450;
  border-radius:999px;padding:.32rem .85rem;font-size:.85rem;font-weight:500;min-height:36px;cursor:pointer;
  transition:border-color .15s,color .15s,background .15s;}
.pd-share:hover,.pd-share:focus-visible{border-color:var(--violet);color:var(--violet);background:color-mix(in srgb,var(--violet) 6%,#fff);}
.pd-share:focus-visible{outline:2px solid var(--violet);outline-offset:2px;}
.pd-share .bi{font-size:1rem;}
.pd-eyebrow-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;}

/* The sheet: centred on a computer, a bottom sheet on a phone */
html.zvs-lock{overflow:hidden;}
.zvs-sheet{position:fixed;inset:0;z-index:1090;display:flex;align-items:flex-end;justify-content:center;}
.zvs-sheet[hidden]{display:none;}
.zvs-backdrop{position:absolute;inset:0;background:rgba(20,16,32,.5);opacity:0;transition:opacity .2s;}
.zvs-sheet.is-open .zvs-backdrop{opacity:1;}
.zvs-panel{position:relative;width:100%;max-width:460px;max-height:90vh;overflow:auto;background:#fff;border-radius:1.1rem 1.1rem 0 0;
  padding:1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(20,16,32,.25);
  transform:translateY(24px);opacity:0;transition:transform .22s ease,opacity .22s ease;outline:none;}
.zvs-sheet.is-open .zvs-panel{transform:none;opacity:1;}
@media (min-width:576px){
  .zvs-sheet{align-items:center;}
  .zvs-panel{border-radius:1.1rem;}
}
.zvs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;}
.zvs-head h2{margin:0;font-size:1.1rem;font-weight:700;}
.zvs-x{border:0;background:#f1eff7;border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#3a3450;}
.zvs-x:hover{background:#e6e2f1;}
.zvs-what{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;padding:.55rem .7rem;background:#f7f6fb;border-radius:.75rem;font-size:.9rem;font-weight:500;line-height:1.3;}
.zvs-what img{width:44px;height:44px;border-radius:.5rem;object-fit:cover;flex:none;}
.zvs-what img[hidden]{display:none;}

/* The channel buttons (also used inline in the try-on window) */
.zvs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.35rem .25rem;align-items:start;}
.zvs-item{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:.45rem .15rem;border:0;background:none;
  color:#3a3450;text-decoration:none;cursor:pointer;border-radius:.7rem;min-height:44px;font:inherit;}
.zvs-item:hover{background:#f4f2fa;color:#3a3450;}
.zvs-item:focus-visible{outline:2px solid var(--violet);outline-offset:1px;}
.zvs-ico{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem;background:#6b647d;}
.zvs-lab{font-size:.74rem;line-height:1.2;text-align:center;}
.zvs-ch-whatsapp .zvs-ico{background:#25D366;}
.zvs-ch-facebook .zvs-ico{background:#1877F2;}
.zvs-ch-x .zvs-ico{background:#111;}
.zvs-ch-messenger .zvs-ico{background:#0084FF;}
.zvs-ch-instagram .zvs-ico{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);}
.zvs-ch-telegram .zvs-ico{background:#26A5E4;}
.zvs-ch-pinterest .zvs-ico{background:#E60023;}
.zvs-ch-email .zvs-ico{background:#6b647d;}
.zvs-ch-copy .zvs-ico,.zvs-ch-more .zvs-ico,.zvs-ch-save .zvs-ico{background:var(--violet);}
.zvs-ch-picture .zvs-ico{background:var(--violet);}
.zvs-msg{min-height:1.3em;margin-top:.5rem;text-align:center;font-size:.85rem;color:#1c7a45;}

/* Inside the try-on window: a lighter, smaller row */
.tryon-share{margin-top:1rem;padding-top:.9rem;border-top:1px solid #ece9f4;}
.tryon-share__title{text-align:center;font-weight:600;font-size:.95rem;margin-bottom:.5rem;}
.tryon-share .zvs-grid{grid-template-columns:repeat(auto-fit,minmax(64px,1fr));}
.tryon-share .zvs-ico{width:42px;height:42px;font-size:1.15rem;}
.tryon-share__note{margin:.4rem 0 0;text-align:center;font-size:.76rem;color:#6e6b7a;}

@media (prefers-reduced-motion:reduce){
  .zvs-backdrop,.zvs-panel,.pd-share{transition:none;}
}

/* The opt-in picture link in the try-on window (virtual-tryon.js) */
.tryon-look{margin:0 0 .8rem;padding:.7rem .85rem;border:1px dashed #d9d1ca;border-radius:12px;text-align:left;}
.tryon-look[hidden],.tryon-look__done[hidden],.tryon-look .btn[hidden]{display:none;}
.tryon-look__lead{margin:0 0 .5rem;font-size:.88rem;color:#4a4742;}
.tryon-look__row{display:flex;gap:.5rem;align-items:center;margin-bottom:.2rem;}
.tryon-look__row input{flex:1;min-width:0;font-size:.82rem;padding:.35rem .6rem;border:1px solid #e1dad3;border-radius:999px;background:#faf8f6;}
.tryon-look__stop{padding-left:0;font-size:.82rem;}
.tryon-look__msg{margin:.35rem 0 0;font-size:.82rem;color:#6b6862;min-height:1em;}