/* ===== Patch — 10% off email capture (centre-screen modal + corner bubble) =====
   promo.js drives all motion with GSAP; these styles are the static layer, so a
   CDN failure or prefers-reduced-motion still gets a fully usable widget. */
#promo{position:fixed;inset:0;z-index:108;pointer-events:none;font-family:var(--display)}
#promoScrim{position:fixed;inset:0;background:rgba(33,40,35,.55);opacity:0;pointer-events:none}
#promo.open #promoScrim{opacity:1;pointer-events:auto}

/* centred modal — two-column with a lifestyle image (distinct from the bubble) */
.promo-card{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:716px;max-width:calc(100vw - 36px);background:var(--cream);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 44px 110px -34px rgba(33,40,35,.62);display:none;grid-template-columns:1fr 1fr;pointer-events:auto}
#promo.open .promo-card{display:grid}
/* image bleeds 1px past its box so no cream hairline can peek through at the
   card's rounded edges (fractional-DPI rendering), incl. while GSAP scales it */
.pc-img{position:relative;background:var(--tint);min-height:420px;align-self:stretch;overflow:hidden}
.pc-img img{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);object-fit:cover;object-position:center;display:block}
.pc-img::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(75,88,80,.22),transparent 58%)}
.pc-body{padding:36px 34px 32px;position:relative;display:flex;flex-direction:column;justify-content:center}

.promo-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(254,255,241,.92);color:var(--ink);font-size:19px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .16s,transform .16s;z-index:3}
.promo-x:hover{background:#fff;transform:rotate(90deg)}
.promo-badge{width:48px;height:48px;border-radius:50%;background:var(--pink);color:#8a3b46;display:grid;place-items:center;margin-bottom:16px;font-size:23px}
.promo-badge svg{width:25px;height:25px}
.promo-card h3{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.02em;margin:0 0 8px;line-height:1.08}
.promo-card p{margin:0 0 16px;font-size:14px;color:#525447;line-height:1.5}
#promoFormEl{display:flex;flex-direction:column;gap:10px}
#promoFormEl input{width:100%;height:48px;border:1.5px solid var(--line);border-radius:12px;padding:0 15px;font:inherit;font-size:14.5px;background:#fff;color:var(--ink)}
#promoFormEl input:focus{outline:2px solid var(--sage);outline-offset:1px;border-color:var(--sage)}
#promoFormEl button{height:48px;border:0;border-radius:12px;background:var(--sage);color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:background .16s}
#promoFormEl button:hover{background:var(--sage-d)}
.promo-fine{margin:14px 0 0!important;font-size:11px!important;color:#8a907f!important;line-height:1.45!important}

/* success state */
#promo .promo-done{display:none}
#promo.done .promo-done{display:block}
#promo.done #promoForm{display:none}
.promo-done .promo-badge{background:var(--lime);color:#3f5226;font-size:25px}
.promo-code{display:flex;gap:8px;margin:2px 0 15px}
.promo-code code{flex:1;font-family:var(--label);letter-spacing:.2em;font-size:18px;font-weight:600;background:#fff;border:1.5px dashed var(--sage);border-radius:12px;padding:13px 10px;text-align:center;color:var(--sage-d)}
.promo-code button{border:0;border-radius:12px;background:var(--ink);color:#fff;padding:0 17px;font-weight:600;font-size:13px;cursor:pointer;transition:background .16s}
.promo-code button:hover{background:#000}
.promo-shop{display:block;text-align:center;background:var(--sage);color:#fff;text-decoration:none;border-radius:12px;padding:14px;font-weight:700;font-size:15px;transition:background .16s}
.promo-shop:hover{background:var(--sage-d)}

/* minimised bubble (bottom-left) — a circle that GSAP expands into a labelled
   pill on hover. Without GSAP the pill is simply always expanded (no hidden UI). */
.promo-min{position:fixed;left:22px;bottom:22px;display:none;pointer-events:auto}
#promo.min .promo-min{display:block}
.promo-bubble{height:64px;display:flex;align-items:center;border-radius:999px;background:var(--sage);border:0;box-shadow:0 18px 46px -14px rgba(33,40,35,.5);cursor:pointer;overflow:hidden;white-space:nowrap;padding:0;transition:background .18s ease}
.promo-bubble:hover{background:var(--sage-d)}
.pb-ico{flex:0 0 64px;height:64px;display:grid;place-items:center;color:#fff}
.pb-ico svg{width:26px;height:26px}
.pb-label{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:#fff;padding-right:24px}
.promo-bubble-x{position:absolute;top:-6px;right:-6px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;border:2px solid var(--cream);font-size:14px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .16s}
.promo-bubble-x:hover{background:#000}

@media (max-width:620px){
  .promo-card{grid-template-columns:1fr;width:calc(100vw - 28px);max-width:calc(100vw - 28px)}
  .pc-img{min-height:160px;height:auto}
  .pc-body{padding:26px 22px 24px}
  .promo-card h3{font-size:22px;overflow-wrap:break-word}
  /* 16px inputs so iOS Safari doesn't zoom on focus */
  #promoFormEl input{font-size:16px}
}
@media (max-width:480px){
  .promo-card{width:calc(100vw - 20px);max-width:calc(100vw - 20px);border-radius:20px}
  .pc-body{padding:22px 18px 20px}
  .promo-card h3{font-size:20px}
  /* discount-code row: allow wrap + trim tracking/size so it never overflows */
  .promo-code{flex-wrap:wrap}
  .promo-code code{flex:1 1 100%;font-size:16px;letter-spacing:.14em;padding:12px 8px;overflow-wrap:anywhere}
  .promo-code button{flex:1 1 100%}
  /* keep the minimised pill inside the viewport */
  .promo-bubble{max-width:calc(100vw - 24px)}
  .pb-label{overflow:hidden;text-overflow:ellipsis;padding-right:18px}
}
@media (max-width:960px){.promo-min{bottom:80px;left:14px}}