@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800;900&display=swap");\n\n:root {
  --ink:#15171a;
  --muted:#6b7280;
  --paper:#f7f5f0;
  --card:#ffffff;
  --brand:#ef4b3f;
  --brand-dark:#c9342a;
  --accent:#f5c84c;
  --success:#188a5b;
  --line:#e7e2d8;
  --shadow:0 14px 34px rgba(20,20,20,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.app-shell{min-height:100vh;max-width:480px;margin:0 auto;padding:env(safe-area-inset-top) 18px calc(28px + env(safe-area-inset-bottom))}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 0 12px}
.logo{font-weight:900;letter-spacing:-.04em;font-size:25px}.logo span{color:var(--brand)}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-size:13px;color:var(--muted)}
.hero{background:linear-gradient(145deg,#17191d,#2d3037);color:#fff;border-radius:26px;padding:26px 23px;margin:8px 0 18px;box-shadow:var(--shadow)}
.eyebrow{text-transform:uppercase;font-size:12px;letter-spacing:.11em;font-weight:800;color:var(--accent)}
h1{font-size:34px;line-height:1.02;letter-spacing:-.045em;margin:9px 0 10px}.hero p{margin:0;color:#e5e7eb;line-height:1.5}
.card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:20px;margin:14px 0;box-shadow:0 8px 22px rgba(20,20,20,.05)}
.offer-image{height:178px;border-radius:18px;background:radial-gradient(circle at 20% 20%,#ffd66b,transparent 30%),linear-gradient(135deg,#ef4b3f,#9d2f83 58%,#342b74);display:flex;align-items:flex-end;padding:18px;color:#fff;font-size:30px;font-weight:900;line-height:1}
.offer-title{font-size:25px;line-height:1.08;margin:18px 0 8px;letter-spacing:-.025em}.business{font-weight:700}.meta{color:var(--muted);font-size:14px;line-height:1.5}.btn{width:100%;border:0;border-radius:15px;padding:15px 18px;font-weight:850;background:var(--brand);color:#fff;margin-top:15px;box-shadow:0 7px 16px rgba(239,75,63,.24)}.btn:hover{background:var(--brand-dark)}
.btn.secondary{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}.btn:disabled{opacity:.45;cursor:not-allowed}
.back{background:none;border:0;padding:8px 0;font-weight:750;color:var(--muted)}
.input{width:100%;padding:15px 14px;border:1.5px solid #d9d4ca;border-radius:14px;background:#fff;outline:none;font-size:17px}.input:focus{border-color:var(--brand)}
.code{letter-spacing:.42em;text-align:center;font-size:25px;font-weight:800;padding-left:calc(14px + .42em)}
.help{font-size:13px;color:var(--muted);line-height:1.45}.error{color:#b42318;font-size:14px;margin-top:10px}.success{color:var(--success);font-weight:750}
.vendor{background:#101214;color:#fff;border-radius:28px;padding:24px;text-align:center;min-height:520px;display:flex;flex-direction:column;justify-content:center;box-shadow:var(--shadow);position:relative;overflow:hidden}.vendor::before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent,#34d39922,transparent 28%);animation:spin 3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.vendor>*{position:relative}.tick{width:92px;height:92px;border-radius:50%;background:#1fba78;margin:0 auto 18px;display:grid;place-items:center;font-size:52px;font-weight:900}.vendor h1{font-size:39px}.timer{font-size:66px;line-height:1;font-variant-numeric:tabular-nums;font-weight:900;letter-spacing:-.05em;margin:18px 0 8px}.vendor .small{color:#bac2ca;font-size:14px}.stamp{display:inline-block;border:1px solid #ffffff2a;border-radius:999px;padding:8px 12px;color:#fff;margin-top:16px;font-size:13px}
.note{background:#fff7d7;border:1px solid #eed27a;border-radius:16px;padding:13px 14px;font-size:13px;line-height:1.45;margin:14px 0}
.row{display:flex;gap:10px}.row>*{flex:1}

/* Membership sharing */
.membership-summary{border-color:#f0d9d4}.membership-person{display:flex;flex-direction:column;gap:5px;padding:14px 15px;margin:14px 0;border:1px solid var(--line);border-radius:15px;background:#faf9f6}.membership-person span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted)}.membership-person strong{font-size:15px;overflow-wrap:anywhere}.share-options{display:grid;gap:10px;margin-top:18px}.share-option{width:100%;display:flex;align-items:center;gap:14px;text-align:left;border:1px solid var(--line);border-radius:17px;padding:15px;background:#fff;color:var(--ink)}.share-option:hover{border-color:#d8c9c2;background:#fffaf8}.share-option:disabled{opacity:.5;cursor:not-allowed}.share-option strong{display:block;font-size:15px}.share-option small{display:block;color:var(--muted);line-height:1.4;margin-top:3px}.share-icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:#fff1ed;color:var(--brand);display:grid;place-items:center;font-size:23px;font-weight:900}.invite-panel{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.invite-panel h2{font-size:20px;margin:0 0 10px}.qr-wrap{display:flex;justify-content:center;align-items:center;background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px;margin:14px 0}.qr-wrap canvas{display:block;width:min(250px,100%);height:auto}.qr-status{text-align:center}.invite-expiry{text-align:center;border-radius:14px;background:#f7f5f0;padding:11px 14px;font-size:14px;margin:12px 0}.invite-expiry strong{font-variant-numeric:tabular-nums;font-size:17px}.invite-link{border:1px solid var(--line);border-radius:14px;background:#f7f5f0;padding:12px;font-size:12px;line-height:1.45;overflow-wrap:anywhere;margin:12px 0}.invite-landing{text-align:center;padding-top:26px;padding-bottom:26px}.invite-mark{width:78px;height:78px;border-radius:50%;margin:0 auto 20px;background:#fff1ed;color:var(--brand);display:grid;place-items:center;font-weight:900;font-size:28px}.success-mark{background:#e7f7ed;color:var(--success)}
.btn.danger-action{background:#fff;color:#b42318;border:1px solid #efc0b8;box-shadow:none}.btn.danger-action:hover{background:#fff6f4}.cooldown-box{background:#fff4ef;border:1px solid #f2c8bf;border-radius:16px;padding:13px 14px;font-size:13px;line-height:1.5;margin:14px 0;color:#7f2d23}.cooldown-box strong{color:#5f2119}


/* Paid membership checkout */
.join-membership-card{border-color:#efc9c2}.membership-price{display:flex;align-items:baseline;gap:8px;margin:8px 0 12px}.membership-price strong{font-size:28px;letter-spacing:-.035em}.membership-price span{color:var(--muted);font-size:14px;font-weight:700}.membership-price.large{margin:12px 0 15px}.membership-price.large strong{font-size:38px}.join-membership-card .btn{margin-top:16px}

/* Stripe billing portal */
.billing-panel{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.billing-panel h2{font-size:20px;margin:0 0 8px;letter-spacing:-.02em}
.billing-panel .btn{margin-top:12px}


/* Operator dashboard */
.operator-entry{border-color:#ead7d1}
.operator-entry .btn{margin-top:12px}
.operator-dashboard-head{background:#17191d;color:#fff;border-radius:24px;padding:23px;margin:8px 0 14px;box-shadow:var(--shadow)}
.operator-dashboard-head h1{font-size:29px;margin:8px 0 7px}
.operator-dashboard-head p{margin:0;color:#d8dce2;line-height:1.45}
.operator-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0 20px}
.operator-stat{background:#fff;border:1px solid var(--line);border-radius:17px;padding:14px 10px;text-align:center}
.operator-stat strong{display:block;font-size:23px;letter-spacing:-.035em}
.operator-stat span{display:block;margin-top:3px;font-size:11px;line-height:1.25;color:var(--muted);font-weight:700}
.operator-section-heading{display:flex;align-items:flex-end;justify-content:space-between;margin:20px 1px 4px}
.operator-section-heading h2{font-size:24px;letter-spacing:-.03em;margin:4px 0 0}
.operator-business-card{padding:17px 18px}
.operator-business-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.operator-business-top h3{margin:0;font-size:20px;letter-spacing:-.02em}
.operator-address{margin:6px 0 0}
.status-chip{display:inline-flex;align-items:center;border-radius:999px;padding:6px 9px;background:#f1f1ef;color:var(--muted);font-size:11px;font-weight:800;text-transform:capitalize;white-space:nowrap}
.status-chip.active{background:#e7f7ed;color:var(--success)}
.operator-offer-counts{display:flex;gap:9px;margin-top:15px;padding-top:13px;border-top:1px solid var(--line)}
.operator-offer-counts span{flex:1;background:#f7f5f0;border-radius:12px;padding:10px 11px;font-size:12px;color:var(--muted)}
.operator-offer-counts strong{color:var(--ink);font-size:16px;margin-right:3px}
.operator-next-step{border-style:dashed;box-shadow:none}


/* Operator add business */
.operator-add-btn{border:0;border-radius:999px;background:var(--brand);color:#fff;font-weight:850;padding:10px 13px;white-space:nowrap}
.operator-add-btn:hover{background:var(--brand-dark)}
.operator-success{background:#e7f7ed;color:var(--success);border:1px solid #bde7ce;border-radius:14px;padding:11px 13px;font-size:13px;font-weight:750;margin:10px 0 4px}
.operator-form-card{padding-top:22px}
.form-label{display:block;font-size:13px;font-weight:800;margin:17px 2px 7px;color:var(--ink)}
.operator-form-card .input{font-size:16px}
.operator-dashboard-help{margin:15px 3px 28px}


/* Operator edit business */
.operator-business-manage{
  width:100%;
  margin-top:12px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:13px;
  padding:11px 12px;
  font-weight:800;
  color:var(--ink)
}
.operator-business-manage:hover{background:#faf8f4}
.operator-business-status-box{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line)
}
.operator-business-status-box .btn{margin-top:12px}
.btn.danger-outline{
  background:#fff;
  color:#b42318;
  border:1px solid #efc3bd;
  box-shadow:none
}
.btn.danger-outline:hover{background:#fff5f3}


/* Operator offer management */
.operator-business-actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:12px
}
.operator-business-primary{
  border:0;
  background:var(--brand);
  color:#fff;
  border-radius:13px;
  padding:11px 13px;
  font-weight:850
}
.operator-business-primary:hover{background:var(--brand-dark)}
.operator-business-actions .operator-business-manage{margin-top:0;width:auto}
.operator-business-head{margin-bottom:18px}
.operator-offer-card{padding:18px}
.operator-offer-card h3{
  margin:0;
  font-size:20px;
  letter-spacing:-.025em
}
.operator-offer-card .meta{margin:6px 0 0}
.operator-offer-details{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid var(--line)
}
.operator-offer-details span{
  background:#f7f5f0;
  border-radius:12px;
  padding:9px;
  color:var(--muted);
  font-size:10px;
  line-height:1.3
}
.operator-offer-details strong{
  display:block;
  color:var(--ink);
  font-size:12px;
  margin-bottom:2px
}
.operator-offer-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px
}
.operator-offer-actions .operator-business-manage{margin-top:0}
.operator-publish-btn,
.operator-unpublish-btn{
  border-radius:13px;
  padding:11px 12px;
  font-weight:850
}
.operator-publish-btn{
  border:0;
  background:#e7f7ed;
  color:var(--success)
}
.operator-unpublish-btn{
  border:1px solid #efc3bd;
  background:#fff;
  color:#b42318
}
.operator-textarea{
  min-height:105px;
  resize:vertical;
  font-family:inherit;
  line-height:1.45
}
.operator-form-help{margin:12px 2px 4px}

@media (max-width:420px){
  .operator-offer-details{
    grid-template-columns:1fr
  }
}


/* Operator offer dates */
.operator-date-section{
  margin-top:18px;
  padding-top:2px
}
.operator-date-section > .form-label{
  margin-bottom:3px
}
.operator-date-section > .help{
  margin:0 2px 8px
}
.operator-date-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}
.operator-small-label{
  font-size:11px;
  margin-top:7px
}
.operator-offer-details{
  grid-template-columns:repeat(2,1fr)
}

@media (max-width:420px){
  .operator-date-grid{
    grid-template-columns:1fr
  }
}


/* Tighter offer entry */
.operator-saving-input{
  font-size:20px;
  font-weight:850;
  letter-spacing:-.02em
}
.operator-field-help{
  margin:5px 2px 1px
}
.operator-date-section{
  border:0;
  padding:0;
  margin-left:0;
  margin-right:0;
  min-width:0
}
.operator-date-section legend{
  padding:0
}
.operator-date-options{
  display:grid;
  gap:8px;
  margin-top:8px
}
.operator-radio-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 13px;
  background:#fff;
  cursor:pointer
}
.operator-radio-card:has(input:checked){
  border-color:var(--brand);
  background:#fff8f5
}
.operator-radio-card input{
  margin-top:3px;
  accent-color:var(--brand)
}
.operator-radio-card span{
  display:block
}
.operator-radio-card strong{
  display:block;
  font-size:13px;
  color:var(--ink)
}
.operator-radio-card small{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:var(--muted);
  line-height:1.3
}
.operator-date-grid{
  margin-top:10px
}
.is-hidden{
  display:none !important
}
.offer-saving{
  font-size:30px;
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:8px
}
.offer-detail{
  margin:0 0 9px;
  font-size:15px;
  line-height:1.35;
  font-weight:650;
  color:var(--ink)
}


/* Offer defaults */
.operator-offer-defaults{
  margin-top:18px;
  padding:15px;
  background:#f1f1ef;
  border:1px solid #e2e1dd;
  border-radius:16px
}
.operator-defaults-heading{
  margin-bottom:12px
}
.operator-defaults-heading strong{
  display:block;
  font-size:13px;
  color:var(--ink)
}
.operator-defaults-heading span{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:var(--muted)
}
.operator-default-field + .operator-default-field{
  margin-top:11px
}
.operator-default-field label{
  display:block;
  margin:0 2px 6px;
  font-size:11px;
  font-weight:800;
  color:var(--muted)
}
.operator-offer-defaults .input{
  background:#fafaf8
}

/* Offer-specific images */
.offer-image.has-upload{
  padding:0;
  overflow:hidden;
  background:#ece9e2
}
.offer-image.has-upload img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}

.operator-image-upload{
  margin:20px 0 4px;
  padding-top:18px;
  border-top:1px solid var(--line)
}
.operator-image-heading{
  display:flex;
  align-items:center;
  gap:8px
}
.operator-image-heading strong{
  font-size:13px
}
.operator-image-heading span{
  background:#f1f1ef;
  color:var(--muted);
  border-radius:999px;
  padding:3px 7px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em
}
.operator-image-upload > .help{
  margin:6px 0 10px
}
.operator-image-preview{
  height:168px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border:1px dashed #cbc7bf;
  border-radius:15px;
  background:#f7f5f0;
  color:var(--muted);
  font-size:12px
}
.operator-image-preview.has-image{
  border-style:solid
}
.operator-image-preview img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}
.operator-image-placeholder{
  padding:18px;
  text-align:center
}
.operator-file-input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none
}
.operator-file-button{
  display:block;
  margin-top:9px;
  width:100%;
  border:1px solid var(--line);
  border-radius:13px;
  padding:11px 13px;
  background:#fff;
  color:var(--ink);
  text-align:center;
  font-size:13px;
  font-weight:800;
  cursor:pointer
}
.operator-file-button:hover{
  background:#faf8f4
}
.operator-image-help{
  margin:7px 2px 0 !important
}
.operator-remove-image{
  margin-top:7px;
  padding:5px 0;
  border:0;
  background:transparent;
  color:#b42318;
  font-size:12px;
  font-weight:750
}

/* Registered-user access warning */
.operator-access-warning{
  margin-top:9px;
  padding:11px 12px;
  border:1px solid #e8c86a;
  border-radius:12px;
  background:#fff7d7;
  color:#725410
}
.operator-access-warning strong{
  display:block;
  font-size:12px;
  line-height:1.35
}
.operator-access-warning span{
  display:block;
  margin-top:4px;
  font-size:11px;
  line-height:1.4
}


/* Refined customer offer cards */
.offer-card{
  padding:0;
  overflow:hidden;
  border-radius:24px
}
.offer-card .offer-image{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  border-radius:0;
  margin:0;
  padding:18px 20px;
  align-items:flex-end
}
.offer-card .offer-image.has-upload{
  padding:0
}
.offer-card-body{
  padding:18px 19px 19px
}
.offer-card-business{
  color:var(--brand);
  font-size:12px;
  line-height:1.25;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.075em;
  margin-bottom:8px
}
.offer-card .offer-saving{
  margin:0 0 7px;
  font-size:37px;
  line-height:.98;
  letter-spacing:-.05em
}
.offer-card .offer-detail{
  margin:0;
  font-size:16px;
  line-height:1.38;
  font-weight:700
}
.offer-card-info{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px
}
.offer-card-info span{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  background:#f5f3ee;
  color:var(--muted);
  font-size:11px;
  font-weight:750
}
.offer-card-status{
  margin-top:12px
}
.offer-card-status .meta,
.offer-card-status .success{
  margin:0
}
.offer-card .btn{
  margin-top:14px
}
.offer-detail-business{
  margin-top:16px
}
.offer-detail-saving{
  margin-top:5px !important;
  font-size:40px !important
}
.offer-detail-page-copy{
  font-size:17px;
  margin-top:0
}

/* Image crop preview */
.operator-image-preview{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  position:relative
}
.operator-image-preview img,
.operator-crop-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}
.operator-crop-canvas{
  display:block
}
.operator-image-preview.is-cropping{
  border-style:solid;
  border-color:#bfb8ac
}
.operator-crop-controls{
  margin-top:11px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f7f5f0
}
.operator-crop-control label{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  color:var(--ink);
  font-size:11px;
  font-weight:800
}
.operator-crop-control label span{
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.operator-crop-control input[type="range"]{
  width:100%;
  accent-color:var(--brand)
}
.operator-crop-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:12px
}
.operator-crop-help{
  margin:11px 0 0
}

@media (max-width:390px){
  .offer-card .offer-saving{
    font-size:34px
  }
  .operator-crop-grid{
    grid-template-columns:1fr
  }
}


/* Direct crop gestures */
.operator-crop-canvas{
  touch-action:none;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none
}
.operator-image-preview.is-dragging .operator-crop-canvas{
  cursor:grabbing
}
.operator-image-preview.is-cropping::after{
  content:"Drag to move • Pinch to zoom";
  position:absolute;
  left:50%;
  bottom:9px;
  transform:translateX(-50%);
  z-index:3;
  padding:5px 9px;
  border-radius:999px;
  background:rgba(0,0,0,.58);
  color:#fff;
  font-size:10px;
  font-weight:750;
  line-height:1;
  pointer-events:none;
  white-space:nowrap
}
.operator-image-preview.is-dragging::after{
  opacity:.45
}


/* Cropper UX refinement */
.operator-crop-grid{
  display:none !important
}
#operator-offer-form.is-saving{
  cursor:wait
}
#operator-offer-form.is-saving .operator-image-preview{
  opacity:.98
}

/* Touch devices use direct drag + pinch; zoom slider is desktop-only. */
@media (pointer:coarse){
  .operator-crop-zoom-control{
    display:none !important
  }
  .operator-crop-controls{
    padding-top:10px
  }
  .operator-crop-help{
    margin-top:0
  }
}


/* ==========================================================
   Village Vouchers brand system — v0.18
   Logo colours: teal #007A72 and lavender #B889BD
   ========================================================== */

:root{
  --ink:#202226;
  --muted:#6f6d73;
  --paper:#f8f6f9;
  --card:#ffffff;
  --brand:#007a72;
  --brand-dark:#00635d;
  --brand-deep:#004d49;
  --brand-soft:#e8f4f2;
  --accent:#b889bd;
  --accent-dark:#855b8a;
  --accent-soft:#f3eaf4;
  --success:#16815b;
  --line:#e5dfe7;
  --shadow:0 14px 34px rgba(52,35,55,.09)
}

html,
body{
  background:linear-gradient(180deg,#fbfafb 0,var(--paper) 240px);
  font-family:"Exo 2",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}

/* Real brand lock-up */
.topbar{
  gap:14px;
  padding:17px 1px 13px
}
.brand-lockup{
  min-width:0;
  display:flex;
  align-items:center
}
.brand-wordmark{
  display:block;
  width:min(190px,52vw);
  height:auto
}
.topbar .pill{
  flex:0 0 auto;
  border-color:#dacbde;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  padding:7px 10px
}

/* Main branded introduction */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:linear-gradient(145deg,var(--brand-deep) 0%,var(--brand) 68%,#168d84 100%);
  border-radius:26px;
  box-shadow:0 16px 34px rgba(0,91,84,.18)
}
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:210px;
  height:210px;
  right:-58px;
  bottom:-72px;
  background:url("/village-vouchers-icon.png") center/contain no-repeat;
  opacity:.12;
  transform:rotate(-5deg);
  pointer-events:none
}
.hero .eyebrow{color:#ead9ec}
.hero p{color:#eef8f7}
.hero .meta{color:rgba(255,255,255,.78)}
.hero .success{color:#fff}

/* Core surfaces and controls */
.card{
  border-color:var(--line);
  box-shadow:0 9px 26px rgba(52,35,55,.055)
}
.btn{
  background:var(--brand);
  box-shadow:0 8px 18px rgba(0,122,114,.20)
}
.btn:hover{background:var(--brand-dark)}
.btn.secondary{
  background:#fff;
  color:var(--brand-dark);
  border-color:#cfdedc
}
.input{border-color:#d9d2dc}
.input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,122,114,.08)
}
.back{color:var(--brand-dark)}
.eyebrow{color:var(--accent-dark)}

/* Customer offer cards */
.offer-card{
  overflow:hidden;
  border:1px solid #e5dfe7;
  border-radius:25px;
  background:#fff;
  box-shadow:0 12px 30px rgba(52,35,55,.075)
}
.offer-card-media{
  position:relative;
  width:100%;
  overflow:hidden;
  background:var(--brand-soft)
}
.offer-card .offer-image{
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  margin:0;
  border-radius:0
}
.offer-card .offer-image.has-upload{padding:0}
.offer-card .offer-image.has-upload img{
  width:100%;
  height:100%;
  object-fit:cover
}

/* Branded fallback when no photo is supplied */
.offer-image-fallback{
  position:relative;
  align-items:center !important;
  justify-content:center;
  gap:17px;
  padding:23px !important;
  background:
    radial-gradient(circle at 84% 13%,rgba(184,137,189,.38),transparent 36%),
    linear-gradient(135deg,#00665f 0%,#00877e 100%) !important;
  color:#fff
}
.offer-fallback-icon{
  display:block;
  width:82px !important;
  height:82px !important;
  flex:0 0 82px;
  object-fit:contain !important
}
.offer-fallback-copy{
  display:flex;
  flex-direction:column;
  min-width:0
}
.offer-fallback-copy strong{
  font-size:25px;
  line-height:1;
  letter-spacing:-.035em
}
.offer-fallback-copy span{
  margin-top:6px;
  color:#ead9ec;
  font-size:13px;
  line-height:1.2;
  font-weight:750;
  letter-spacing:.03em
}

/* Small brand stamp on real offer photography */
.offer-image-brand{
  position:absolute;
  right:12px;
  bottom:12px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.72);
  border-radius:13px;
  background:rgba(255,255,255,.94);
  box-shadow:0 4px 14px rgba(20,20,20,.16);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px)
}
.offer-image-brand img{
  display:block;
  width:29px;
  height:29px;
  object-fit:contain
}

.offer-card-body{padding:19px 20px 20px}
.offer-card-business{
  margin-bottom:8px;
  color:var(--accent-dark);
  font-size:12px;
  line-height:1.25;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.075em
}
.offer-card .offer-saving{
  margin:0 0 7px;
  color:var(--brand-deep);
  font-size:clamp(32px,9vw,40px);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:900
}
.offer-card .offer-detail{
  max-width:36ch;
  margin:0;
  color:#303035;
  font-size:16px;
  line-height:1.4;
  font-weight:650
}
.offer-card-info{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px
}
.offer-card-info span{
  min-height:29px;
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  line-height:1.2;
  font-weight:800
}
.offer-card-info .offer-frequency{
  background:var(--brand-soft);
  color:var(--brand-dark)
}
.offer-card-info .offer-location{
  background:var(--accent-soft);
  color:var(--accent-dark)
}
.offer-card-status{
  margin-top:12px;
  min-height:20px
}
.offer-card-status .meta,
.offer-card-status .success{
  margin:0;
  font-size:13px;
  line-height:1.4;
  font-weight:700
}
.offer-card-status .success{color:var(--success)}
.offer-card-button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:15px;
  padding-left:17px;
  padding-right:13px
}
.offer-card-arrow{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.15);
  font-size:19px;
  line-height:1
}

/* Offer detail screen follows the same hierarchy */
.offer-detail-business{color:var(--accent-dark)}
.offer-detail-saving{color:var(--brand-deep)}

/* Membership areas */
.membership-summary,
.join-membership-card,
.operator-entry{border-color:#dbc9de}
.membership-price strong{color:var(--brand-deep)}
.share-icon,
.invite-mark{
  background:var(--accent-soft);
  color:var(--accent-dark)
}
.share-option:hover{
  border-color:#ccb5d0;
  background:#fcf9fc
}

/* Operator screens: branded, but restrained */
.operator-dashboard-head{
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,var(--brand-deep),var(--brand))
}
.operator-dashboard-head::after{
  content:"";
  position:absolute;
  width:130px;
  height:130px;
  right:-34px;
  bottom:-52px;
  background:url("/village-vouchers-icon.png") center/contain no-repeat;
  opacity:.11;
  pointer-events:none
}
.operator-dashboard-head > *{position:relative}
.operator-dashboard-head p{color:#e8f4f2}
.operator-stat{border-color:#e1d9e3}
.operator-stat strong{color:var(--brand-deep)}
.operator-add-btn,
.operator-business-primary{background:var(--brand)}
.operator-add-btn:hover,
.operator-business-primary:hover{background:var(--brand-dark)}
.status-chip.active{
  background:var(--brand-soft);
  color:var(--brand-dark)
}
.operator-offer-counts span,
.operator-offer-details span,
.operator-crop-controls{background:#f8f5f8}
.operator-radio-card:has(input:checked){
  border-color:#b9d6d2;
  background:var(--brand-soft)
}

/* Cropper and upload controls */
.operator-file-button{color:var(--brand-dark)}
.operator-image-preview.is-cropping{border-color:#9fc7c2}
.operator-crop-control input[type="range"]{accent-color:var(--brand)}

/* Active redemption remains unmistakable, but uses the brand */
.vendor{background:linear-gradient(155deg,#043d39,#0a201f)}

@media (max-width:360px){
  .brand-wordmark{width:min(166px,50vw)}
  .topbar .pill{
    font-size:10px;
    padding:6px 8px
  }
  .offer-fallback-icon{
    width:68px !important;
    height:68px !important;
    flex-basis:68px
  }
  .offer-fallback-copy strong{font-size:22px}
}


/* ==========================================================
   Village Vouchers home + card refinement — v0.19
   ========================================================== */

.brand-wordmark{
  width:min(215px,58vw)
}

.home-welcome{
  position:relative;
  overflow:hidden;
  margin:5px 0 10px;
  padding:13px 16px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--brand-deep),var(--brand));
  box-shadow:0 9px 22px rgba(0,91,84,.13);
  color:#fff
}
.home-welcome::after{
  content:"";
  position:absolute;
  width:102px;
  height:102px;
  right:-25px;
  bottom:-39px;
  background:url("/village-vouchers-icon.png") center/contain no-repeat;
  opacity:.11;
  pointer-events:none
}
.home-welcome-copy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-right:44px
}
.home-welcome-copy strong{
  font-size:15px;
  line-height:1.25;
  font-weight:850;
  letter-spacing:-.015em
}
.home-welcome-copy span{
  color:rgba(255,255,255,.83);
  font-size:12px;
  line-height:1.35;
  font-weight:550
}

.home-account-strip,
.home-operator-strip{
  min-height:62px;
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 10px;
  padding:10px 11px;
  border:1px solid #dfd6e2;
  border-radius:17px;
  background:#fff;
  box-shadow:0 5px 15px rgba(52,35,55,.045)
}
.home-account-strip.is-member{
  border-color:#c8dedb;
  background:linear-gradient(90deg,#f7fcfb,#fff 55%)
}
.home-account-icon{
  width:35px;
  height:35px;
  flex:0 0 35px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:14px;
  line-height:1;
  font-weight:900
}
.home-account-strip.is-member .home-account-icon{
  background:var(--brand-soft);
  color:var(--brand-dark)
}
.home-account-copy,
.home-operator-copy{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1px
}
.home-account-copy strong,
.home-operator-copy strong{
  color:var(--ink);
  font-size:13px;
  line-height:1.25;
  font-weight:850
}
.home-account-copy span,
.home-operator-copy span{
  overflow:hidden;
  color:var(--muted);
  font-size:11px;
  line-height:1.3;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap
}
.home-account-action{
  flex:0 0 auto;
  border:0;
  border-radius:11px;
  padding:9px 10px;
  background:var(--brand-soft);
  color:var(--brand-dark);
  font-family:inherit;
  font-size:11px;
  line-height:1;
  font-weight:850;
  cursor:pointer
}
.home-account-action:hover{
  background:#dcefeb
}
.home-account-action:disabled{
  opacity:.5;
  cursor:not-allowed
}
.home-operator-strip{
  min-height:54px;
  border-color:#e3d8e6;
  background:#fcf9fc
}

.offers-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:18px 2px 10px
}
.offers-heading .eyebrow{
  margin-bottom:2px;
  color:var(--accent-dark);
  font-size:10px
}
.offers-heading h1{
  margin:0;
  color:var(--brand-deep);
  font-size:26px;
  line-height:1;
  letter-spacing:-.04em
}
.offers-count{
  flex:0 0 auto;
  margin-bottom:1px;
  padding:6px 9px;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-size:10px;
  line-height:1;
  font-weight:850
}

.offer-card{
  margin-bottom:13px
}
.offer-card-body{
  position:relative;
  padding:15px 18px 16px;
  border-top:3px solid var(--accent)
}
.offer-card-business{
  margin-bottom:5px;
  font-size:10px
}
.offer-card .offer-saving{
  margin-bottom:5px;
  font-size:clamp(30px,8.5vw,38px)
}
.offer-card .offer-detail{
  font-size:14px;
  line-height:1.35
}
.offer-card-info{
  gap:6px;
  margin-top:11px
}
.offer-card-info span{
  min-height:26px;
  padding:5px 8px;
  font-size:10px
}
.offer-card-status{
  min-height:17px;
  margin-top:9px
}
.offer-card-status .meta,
.offer-card-status .success{
  font-size:11px
}
.offer-card-button{
  min-height:46px;
  margin-top:10px;
  padding:9px 10px 9px 14px
}
.offer-card-arrow{
  width:27px;
  height:27px;
  border-radius:9px;
  background:rgba(184,137,189,.42)
}

.offer-image-fallback{
  position:relative;
  isolation:isolate;
  padding:0 !important;
  overflow:hidden;
  background:linear-gradient(135deg,#00645e 0%,#00877e 100%) !important
}
.offer-image-fallback::before,
.offer-image-fallback::after{
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  background:rgba(184,137,189,.32)
}
.offer-image-fallback::before{
  width:150px;
  height:150px;
  top:-63px;
  right:-25px
}
.offer-image-fallback::after{
  width:95px;
  height:95px;
  left:-28px;
  bottom:-38px;
  background:rgba(255,255,255,.10)
}
.offer-fallback-icon{
  width:95px !important;
  height:95px !important;
  flex:0 0 95px;
  filter:drop-shadow(0 8px 13px rgba(0,0,0,.12))
}
.offer-image-brand{
  display:none !important
}

@media (max-width:480px){
  .brand-wordmark{
    width:min(205px,62vw)
  }
  .home-welcome{
    padding:12px 14px
  }
  .offers-heading{
    margin-top:15px
  }
}

@media (max-width:360px){
  .brand-wordmark{
    width:min(185px,60vw)
  }
  .home-account-strip,
  .home-operator-strip{
    gap:8px;
    padding:9px
  }
  .home-account-action{
    padding:8px 9px
  }
}


/* ==========================================================
   Sticky Village Vouchers navigation + card polish — v0.20
   ========================================================== */

/*
  The masthead starts with the full wordmark filling the app width.
  Once the page scrolls, it stays pinned but becomes compact so it
  does not consume too much phone screen space.
*/
.sticky-site-header{
  position:sticky;
  top:0;
  z-index:1000;
  margin:0 -8px 12px;
  padding:0 8px;
  background:rgba(251,250,251,.97);
  border-bottom:1px solid transparent;
  transition:
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px)
}
.sticky-site-header.is-compact{
  border-bottom-color:#e8e0e9;
  box-shadow:0 7px 22px rgba(44,31,47,.09)
}

.sticky-site-header .topbar{
  display:block;
  padding:10px 0 8px;
  transition:padding .18s ease
}
.brand-home{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer
}
.brand-lockup{
  width:100%
}
.sticky-site-header .brand-wordmark{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  margin:0;
  transform-origin:left center;
  transition:
    width .18s ease,
    max-width .18s ease
}

/* Compact sticky state after the user begins scrolling */
.sticky-site-header.is-compact .topbar{
  padding:6px 0 4px
}
.sticky-site-header.is-compact .brand-home{
  width:max-content
}
.sticky-site-header.is-compact .brand-wordmark{
  width:148px;
  max-width:148px
}

/* Permanent navigation strip underneath the logo */
.breadcrumb-nav{
  min-width:0;
  height:34px;
  display:flex;
  align-items:center;
  gap:6px;
  overflow:hidden;
  padding:0 2px 7px;
  color:#6c6670;
  font-size:11px;
  line-height:1;
  font-weight:700;
  white-space:nowrap
}
.breadcrumb-link,
.breadcrumb-current{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.breadcrumb-link{
  flex:0 1 auto;
  margin:0;
  padding:5px 2px;
  border:0;
  background:transparent;
  color:var(--brand-dark);
  font:inherit;
  cursor:pointer
}
.breadcrumb-link:hover{
  color:var(--brand-deep)
}
.breadcrumb-current{
  flex:0 1 auto;
  color:#373238;
  font-weight:850
}
.breadcrumb-separator{
  flex:0 0 auto;
  color:var(--accent);
  font-size:15px;
  font-weight:900
}

/* The separate welcome strip now sits below navigation cleanly */
.home-welcome{
  margin-top:0
}

/* Fine tuning agreed from the last card pass */
.offers-heading h1{
  font-size:25px
}
.offer-card-body{
  border-top-width:2px
}
.offer-card .offer-saving{
  font-size:clamp(27px,7.6vw,34px);
  line-height:1
}
.offer-card-status .meta{
  color:#5f5961;
  font-weight:750
}
.offer-card-status .success{
  font-weight:850
}

/* Cleaner CTA: no separate boxed arrow */
.offer-card-arrow{
  width:auto;
  height:auto;
  display:block;
  background:transparent;
  border-radius:0;
  font-size:20px;
  font-weight:800
}

/* Richer but still restrained no-photo fallback */
.offer-image-fallback{
  background:
    radial-gradient(
      circle at 84% 13%,
      rgba(255,255,255,.12) 0 14%,
      transparent 14.5%
    ),
    radial-gradient(
      circle at 9% 92%,
      rgba(184,137,189,.35) 0 18%,
      transparent 18.5%
    ),
    radial-gradient(
      circle at 78% 88%,
      rgba(184,137,189,.13) 0 8%,
      transparent 8.5%
    ),
    linear-gradient(
      135deg,
      #00645e 0%,
      #00877e 100%
    ) !important
}
.offer-image-fallback::before{
  width:118px;
  height:118px;
  top:-49px;
  right:-18px;
  background:rgba(184,137,189,.25)
}
.offer-image-fallback::after{
  width:74px;
  height:74px;
  left:-21px;
  bottom:-27px;
  background:rgba(255,255,255,.08)
}
.offer-fallback-icon{
  width:88px !important;
  height:88px !important;
  flex-basis:88px
}

@media (max-width:480px){
  .sticky-site-header{
    margin-left:-5px;
    margin-right:-5px;
    padding-left:5px;
    padding-right:5px
  }

  .sticky-site-header .topbar{
    padding-top:8px
  }

  .sticky-site-header.is-compact .brand-wordmark{
    width:136px;
    max-width:136px
  }

  .breadcrumb-nav{
    height:32px;
    font-size:10px
  }
}


/* ==========================================================
   Navigation + readability refinement — v0.21
   ========================================================== */

/*
  Better scrolling behaviour:
  - the large logo is part of the page and scrolls away naturally
  - only the breadcrumb becomes sticky
  - everything stays exactly the same width as the cards
*/
.sticky-site-header{
  position:static !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important
}

.site-masthead{
  width:100%;
  margin:0;
  padding:12px 0 7px
}
.site-masthead .brand-home{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent
}
.site-masthead .brand-wordmark,
.sticky-site-header .brand-wordmark{
  display:block;
  width:100% !important;
  max-width:none !important;
  height:auto;
  margin:0;
  transform:none !important
}

.breadcrumb-nav{
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  height:auto;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  overflow:hidden;
  margin:0 0 12px;
  padding:9px 12px;
  border:1px solid #e5dfe7;
  border-radius:14px;
  background:rgba(255,255,255,.96);
  box-shadow:0 5px 15px rgba(44,31,47,.07);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  color:#6c6670;
  font-size:13px;
  line-height:1.2;
  font-weight:750;
  white-space:nowrap
}
.breadcrumb-link{
  font-size:13px
}
.breadcrumb-current{
  font-size:13px
}
.breadcrumb-separator{
  font-size:18px
}

/* Breadcrumb replaces all separate ← Back / ← Home rows. */
.back{
  display:none !important
}

/* Exact home strapline requested */
.home-tagline{
  width:100%;
  margin:1px 0 13px;
  color:var(--brand-dark);
  text-align:center;
  white-space:nowrap;
  font-size:13px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.01em
}

/*
  Readability uplift across the whole app.
  Existing heading hierarchy is retained, while small UI copy is raised
  into a more comfortable phone-reading range.
*/
html,
body{
  font-size:17px
}

p{
  font-size:16px;
  line-height:1.5
}

.meta{
  font-size:15px;
  line-height:1.5
}
.help{
  font-size:15px;
  line-height:1.5
}
.error{
  font-size:15px
}
.success{
  font-size:15px
}
.note,
.cooldown-box{
  font-size:15px;
  line-height:1.5
}
.eyebrow{
  font-size:13px
}

.btn,
.operator-add-btn,
.operator-business-manage,
.operator-business-primary,
.operator-publish-btn,
.operator-unpublish-btn,
.home-account-action{
  font-size:16px
}

.input,
select,
textarea,
.operator-form-card .input{
  font-size:17px !important
}

.form-label,
.operator-small-label{
  font-size:15px
}

.home-account-copy strong,
.home-operator-copy strong{
  font-size:15px
}
.home-account-copy span,
.home-operator-copy span{
  font-size:13px
}
.home-account-action{
  font-size:13px
}

.offers-heading .eyebrow{
  font-size:12px
}
.offers-heading h1{
  font-size:29px
}
.offers-count{
  font-size:12px
}

/* Offer cards */
.offer-card-business{
  font-size:12px
}
.offer-card .offer-saving,
.offer-detail-saving{
  text-transform:uppercase;
  font-size:clamp(30px,8vw,37px);
  letter-spacing:-.04em
}
.offer-card .offer-detail{
  font-size:16px;
  line-height:1.4
}
.offer-card-info span{
  font-size:12px
}
.offer-card-status .meta,
.offer-card-status .success{
  font-size:13px;
  line-height:1.4
}
.offer-card-button{
  font-size:16px
}

/* Offer management reflects the same saving-title convention */
.operator-offer-card h3{
  text-transform:uppercase
}

/* Membership / sharing */
.membership-person span{
  font-size:13px
}
.membership-person strong{
  font-size:17px
}
.share-option strong{
  font-size:17px
}
.share-option small{
  font-size:15px
}
.invite-expiry{
  font-size:15px
}
.invite-link{
  font-size:14px
}
.membership-price span{
  font-size:15px
}
.billing-panel h2,
.invite-panel h2{
  font-size:22px
}

/* Operator dashboard and forms */
.operator-dashboard-head p{
  font-size:16px
}
.operator-stat span{
  font-size:13px
}
.operator-business-top h3,
.operator-offer-card h3{
  font-size:22px
}
.status-chip{
  font-size:13px
}
.operator-offer-counts span{
  font-size:14px
}
.operator-offer-counts strong{
  font-size:18px
}
.operator-success{
  font-size:15px
}
.operator-offer-details span{
  font-size:12px
}
.operator-offer-details strong{
  font-size:14px
}

/* Image editor / defaults */
.operator-image-heading strong,
.operator-defaults-title,
.operator-default-field label,
.operator-crop-control label{
  font-size:15px
}
.operator-image-heading span{
  font-size:12px
}
.operator-file-button,
.operator-remove-image{
  font-size:14px
}
.operator-access-warning strong{
  font-size:14px
}
.operator-access-warning span{
  font-size:13px
}

/* Redemption display */
.vendor .small{
  font-size:16px
}
.stamp{
  font-size:15px
}

@media (max-width:420px){
  .home-tagline{
    font-size:12px
  }

  .breadcrumb-nav,
  .breadcrumb-link,
  .breadcrumb-current{
    font-size:12px
  }

  .site-masthead{
    padding-top:9px
  }
}

@media (max-width:360px){
  .home-tagline{
    font-size:11px;
    letter-spacing:-.02em
  }
}


/* ==========================================================
   Offer card redesign — v0.22
   ========================================================== */

.offer-card{
  --offer-accent:var(--brand);
  --offer-accent-dark:var(--brand-dark);
  --offer-soft:var(--brand-soft);
  background:var(--offer-soft);
  padding:0;
  overflow:hidden;
  border-radius:26px;
  border:1px solid #cfe2df;
  box-shadow:0 12px 30px rgba(52,35,55,.075)
}
.offer-card.theme-violet{
  --offer-accent:var(--accent);
  --offer-accent-dark:var(--accent-dark);
  --offer-soft:var(--accent-soft);
  border-color:#e3d7e6
}
.offer-card.theme-teal{
  --offer-accent:var(--brand);
  --offer-accent-dark:var(--brand-dark);
  --offer-soft:var(--brand-soft)
}
.offer-card-banner{
  background:var(--offer-accent);
  color:#fff;
  padding:18px 20px 17px
}
.offer-card .offer-saving{
  margin:0;
  color:#fff;
  font-size:clamp(30px,8.5vw,38px);
  line-height:.95;
  font-weight:900;
  letter-spacing:-.035em;
  text-transform:uppercase
}
.offer-card .offer-detail{
  margin:8px 0 0;
  color:rgba(255,255,255,.96);
  font-size:18px;
  line-height:1.3;
  font-weight:700
}
.offer-card-media{
  position:relative;
  width:100%;
  overflow:hidden;
  background:rgba(255,255,255,.36)
}
.offer-card .offer-image{
  aspect-ratio:16/9;
  width:100%;
  height:auto;
  margin:0;
  border-radius:0
}
.offer-card .offer-image.has-upload{padding:0}
.offer-card .offer-image.has-upload img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}
.offer-image-fallback{
  position:relative;
  display:flex;
  align-items:center !important;
  justify-content:center;
  padding:26px !important;
  background:
    radial-gradient(circle at 16% 85%, rgba(255,255,255,.18), transparent 18%),
    radial-gradient(circle at 88% 14%, rgba(255,255,255,.24), transparent 22%),
    linear-gradient(135deg, var(--offer-accent-dark) 0%, var(--offer-accent) 100%) !important
}
.offer-fallback-icon{
  display:block;
  width:94px !important;
  height:94px !important;
  object-fit:contain !important
}
.offer-card-frequency-flash{
  position:absolute;
  right:14px;
  bottom:14px;
  display:inline-flex;
  align-items:center;
  min-height:34px;
  max-width:calc(100% - 28px);
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--offer-accent-dark);
  border:1px solid rgba(255,255,255,.82);
  font-size:13px;
  line-height:1.15;
  font-weight:850;
  text-align:center;
  box-shadow:0 6px 16px rgba(20,20,20,.12);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px)
}
.offer-card-body{
  padding:18px 20px 16px
}
.offer-card-business-name{
  color:var(--offer-accent-dark);
  font-size:24px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.025em
}
.offer-card-address{
  margin-top:8px;
  color:#494952;
  font-size:16px;
  line-height:1.4;
  font-weight:650
}
.offer-card-button{
  width:100%;
  margin:0;
  border:0;
  border-radius:0 0 25px 25px;
  background:var(--offer-accent);
  color:#fff;
  box-shadow:none;
  padding:18px 20px;
  font-size:20px;
  line-height:1.2;
  font-weight:900;
  text-align:center
}
.offer-card-button:hover{
  background:var(--offer-accent-dark)
}
.offer-card-button.is-unavailable{
  background:#cbc8cf;
  color:#ffffff;
  cursor:pointer
}
.offer-card-button.is-unavailable:hover{
  background:#b9b5bd
}
.offer-card-status,
.offer-card-info,
.offer-card-business{
  display:none !important
}

@media (max-width:420px){
  .offer-card-banner{
    padding:16px 17px 15px
  }
  .offer-card .offer-detail{
    font-size:17px
  }
  .offer-card-body{
    padding:16px 17px 14px
  }
  .offer-card-business-name{
    font-size:22px
  }
  .offer-card-address{
    font-size:15px
  }
  .offer-card-button{
    padding:17px 16px;
    font-size:18px
  }
  .offer-card-frequency-flash{
    right:12px;
    bottom:12px;
    padding:6px 10px;
    font-size:12px
  }
}

/* ==========================================================
   Full-width perforated voucher feed + accordion — v0.23
   ========================================================== */

.voucher-band{
  --voucher-accent:var(--brand);
  --voucher-accent-dark:var(--brand-dark);
  --voucher-bg:#e8f4f2;
  --voucher-divider:rgba(0,122,114,.28);
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  background:var(--voucher-bg);
  overflow:visible
}
.voucher-band.theme-violet{
  --voucher-accent:var(--accent);
  --voucher-accent-dark:var(--accent-dark);
  --voucher-bg:#f3eaf4;
  --voucher-divider:rgba(184,137,189,.34)
}
.voucher-band.theme-teal{
  --voucher-accent:var(--brand);
  --voucher-accent-dark:var(--brand-dark);
  --voucher-bg:#e8f4f2;
  --voucher-divider:rgba(0,122,114,.28)
}
.voucher-band + .voucher-band::before{
  content:"";
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  top:-5px;
  height:10px;
  background:
    radial-gradient(
      circle,
      rgba(54,52,57,.42) 0 3px,
      transparent 3.5px
    )
    left center / 18px 10px repeat-x;
  pointer-events:none
}
.voucher-band-inner{
  width:min(444px,calc(100vw - 36px));
  margin:0 auto;
  padding:25px 0 27px
}
.voucher-card{
  width:100%;
  border:0;
  background:transparent
}
.voucher-summary{
  width:100%;
  display:block;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  text-align:left;
  font:inherit;
  cursor:pointer
}
.voucher-heading{
  padding:0 2px 17px
}
.voucher-saving{
  margin:0;
  color:var(--voucher-accent-dark);
  font-size:clamp(34px,9vw,42px);
  line-height:.95;
  letter-spacing:-.045em;
  font-weight:900;
  text-transform:uppercase
}
.voucher-description{
  margin:9px 0 0;
  color:#303237;
  font-size:18px;
  line-height:1.35;
  font-weight:750
}
.voucher-media{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 12px 25px rgba(38,37,41,.10)
}
.voucher-media .offer-image{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  margin:0;
  border-radius:0;
  overflow:hidden
}
.voucher-media .offer-image.has-upload{
  padding:0
}
.voucher-media .offer-image.has-upload img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover
}
.voucher-media .offer-image-fallback{
  --offer-accent:var(--voucher-accent);
  --offer-accent-dark:var(--voucher-accent-dark)
}
.voucher-frequency-flash{
  position:absolute;
  right:13px;
  bottom:13px;
  display:inline-flex;
  align-items:center;
  max-width:calc(100% - 26px);
  min-height:36px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:999px;
  background:rgba(255,255,255,.95);
  color:var(--voucher-accent-dark);
  box-shadow:0 6px 17px rgba(20,20,20,.13);
  font-size:13px;
  line-height:1.15;
  font-weight:850;
  text-align:center;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)
}
.voucher-shop-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  padding:16px 2px 0
}
.voucher-shop-name{
  min-width:0;
  color:var(--voucher-accent-dark);
  font-size:24px;
  line-height:1.08;
  font-weight:900;
  letter-spacing:-.025em
}
.voucher-open-prompt{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--voucher-accent-dark);
  font-size:14px;
  line-height:1;
  font-weight:850
}
.voucher-close-label{
  display:none
}
.voucher-chevron{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:999px;
  background:var(--voucher-accent);
  color:#fff;
  font-size:17px;
  line-height:1;
  transition:transform .22s ease
}
.voucher-band.is-expanded .voucher-open-label{
  display:none
}
.voucher-band.is-expanded .voucher-close-label{
  display:inline
}
.voucher-band.is-expanded .voucher-chevron{
  transform:rotate(180deg)
}

/* Smooth one-at-a-time accordion */
.voucher-accordion{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  transition:
    grid-template-rows .24s ease,
    opacity .18s ease
}
.voucher-accordion-clip{
  min-height:0;
  overflow:hidden
}
.voucher-band.is-expanded .voucher-accordion{
  grid-template-rows:1fr;
  opacity:1
}
.voucher-expanded-content{
  display:grid;
  grid-template-columns:minmax(0,1fr) 176px;
  gap:22px;
  align-items:center;
  margin-top:20px;
  padding:20px 0 2px;
  border-top:2px solid var(--voucher-divider)
}
.voucher-business-info .eyebrow{
  margin-bottom:6px;
  color:var(--voucher-accent-dark);
  font-size:12px
}
.voucher-business-info h3{
  margin:0;
  color:var(--ink);
  font-size:23px;
  line-height:1.12;
  letter-spacing:-.02em
}
.voucher-business-info p{
  margin:9px 0 0;
  color:#414147;
  font-size:16px;
  line-height:1.48;
  font-weight:550
}
.voucher-business-info .voucher-about-placeholder{
  color:var(--muted);
  font-style:italic
}
.voucher-business-info .voucher-address{
  margin-top:12px;
  color:var(--voucher-accent-dark);
  font-weight:750
}
.voucher-redeem-area{
  min-width:0;
  text-align:center
}
.voucher-seal-button{
  width:164px;
  max-width:100%;
  aspect-ratio:1;
  display:block;
  margin:0 auto;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  transition:
    transform .15s ease,
    filter .15s ease
}
.voucher-seal-button:not(.is-static):hover{
  transform:scale(1.035)
}
.voucher-seal-button:not(.is-static):active{
  transform:scale(.97)
}
.voucher-seal-button img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain
}
.voucher-seal-button.is-static{
  cursor:default;
  filter:grayscale(.08)
}
.voucher-redeem-label{
  margin:9px auto 0;
  max-width:180px;
  color:var(--voucher-accent-dark);
  font-size:14px;
  line-height:1.3;
  font-weight:850
}
.voucher-redeem-area.is-redeemed .voucher-redeem-label,
.voucher-redeem-area.is-unavailable .voucher-redeem-label,
.voucher-redeem-area.is-checking .voucher-redeem-label{
  color:#67636a
}

/* Existing v0.22 card layout is no longer used on the home feed. */
.home-voucher-list{
  width:100%
}

/* Business-description operator field */
#operator-business-about,
#operator-edit-business-about{
  min-height:116px;
  resize:vertical;
  line-height:1.45
}

@media (max-width:520px){
  .voucher-band-inner{
    width:calc(100vw - 36px)
  }
}

@media (max-width:420px){
  .voucher-band-inner{
    width:calc(100vw - 30px);
    padding-top:22px;
    padding-bottom:24px
  }
  .voucher-saving{
    font-size:clamp(31px,9.2vw,38px)
  }
  .voucher-description{
    font-size:17px
  }
  .voucher-shop-row{
    align-items:center
  }
  .voucher-shop-name{
    font-size:22px
  }
  .voucher-open-prompt{
    font-size:13px
  }
  .voucher-expanded-content{
    grid-template-columns:1fr;
    gap:15px;
    margin-top:18px;
    padding-top:18px
  }
  .voucher-business-info h3{
    font-size:22px
  }
  .voucher-business-info p{
    font-size:16px
  }
  .voucher-redeem-area{
    padding-top:2px
  }
  .voucher-seal-button{
    width:176px
  }
  .voucher-redeem-label{
    max-width:230px;
    font-size:15px
  }
}

body{overflow-x:hidden}

/* ==========================================================
   Stronger ticket/voucher treatment — v0.24
   ========================================================== */

/* Full brand-colour voucher sheets spanning the whole screen. */
.voucher-band{
  --voucher-bg:#007a72;
  --voucher-accent:var(--brand);
  --voucher-accent-dark:#004d49;
  --voucher-heading-text:#ffffff;
  --voucher-body-text:rgba(255,255,255,.94);
  --voucher-rule:rgba(255,255,255,.30);
  margin-bottom:20px;
  background:var(--voucher-bg)
}
.voucher-band.theme-teal{
  --voucher-bg:#007a72;
  --voucher-accent:var(--brand);
  --voucher-accent-dark:#004d49;
  --voucher-heading-text:#ffffff;
  --voucher-body-text:rgba(255,255,255,.94);
  --voucher-rule:rgba(255,255,255,.30)
}
.voucher-band.theme-violet{
  --voucher-bg:#b889bd;
  --voucher-accent:var(--accent);
  --voucher-accent-dark:#67466c;
  --voucher-heading-text:#ffffff;
  --voucher-body-text:#2e2630;
  --voucher-rule:rgba(61,41,65,.22)
}
.voucher-band:last-child{
  margin-bottom:0
}

/*
  Tear-off paper edge: a dark shadow strip sits behind repeating
  rounded paper tabs, echoing the supplied perforation reference.
*/
.voucher-band + .voucher-band::before{
  content:none !important
}
.voucher-band:not(:last-child)::before{
  content:"" !important;
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:-20px;
  height:20px;
  background:linear-gradient(
    180deg,
    #00443f 0%,
    #00615a 46%,
    #003f3b 100%
  );
  box-shadow:
    inset 0 4px 8px rgba(0,0,0,.24),
    0 5px 10px rgba(28,31,32,.18);
  pointer-events:none
}
.voucher-band:not(:last-child)::after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:-10px;
  height:18px;
  background:
    radial-gradient(
      circle at 50% 0,
      var(--voucher-bg) 0 8px,
      transparent 8.7px
    )
    left top / 28px 18px repeat-x;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.14));
  pointer-events:none
}

/* Bigger, clearer voucher typography. */
.voucher-band-inner{
  padding-top:29px;
  padding-bottom:31px
}
.voucher-heading{
  padding-bottom:19px
}
.voucher-saving{
  color:var(--voucher-heading-text);
  font-size:clamp(38px,9.5vw,47px);
  text-shadow:0 2px 1px rgba(0,0,0,.08)
}
.voucher-description{
  margin-top:10px;
  color:var(--voucher-body-text);
  font-size:20px;
  line-height:1.32
}
.voucher-shop-row{
  display:block;
  padding-top:18px
}
.voucher-shop-name{
  color:var(--voucher-heading-text);
  font-size:27px;
  line-height:1.08;
  text-shadow:0 1px 1px rgba(0,0,0,.07)
}

/* Whole voucher summary is the toggle; no redundant details control. */
.voucher-open-prompt,
.voucher-open-label,
.voucher-close-label,
.voucher-chevron{
  display:none !important
}
.voucher-summary{
  -webkit-tap-highlight-color:transparent
}
.voucher-summary:focus-visible{
  outline:3px solid rgba(255,255,255,.72);
  outline-offset:7px;
  border-radius:18px
}

/* Expanded area reads like the lower half of the same paper voucher. */
.voucher-expanded-content{
  display:block;
  margin-top:23px;
  padding:24px 0 5px;
  border-top:2px solid var(--voucher-rule)
}
.voucher-business-info{
  max-width:100%
}
.voucher-business-info .eyebrow{
  margin-bottom:8px;
  color:var(--voucher-heading-text);
  font-size:14px;
  letter-spacing:.09em
}
.voucher-business-info h3{
  display:none
}
.voucher-business-info p,
.voucher-business-info .voucher-about-placeholder{
  margin-top:0;
  color:var(--voucher-body-text);
  font-size:18px;
  line-height:1.52;
  font-weight:600
}
.voucher-business-info .voucher-about-placeholder{
  opacity:.78
}
.voucher-business-info .voucher-address{
  margin-top:14px;
  color:var(--voucher-heading-text);
  font-size:17px;
  font-weight:850
}

/* The redeem seal is the visual focal point of the opened voucher. */
.voucher-redeem-area{
  width:100%;
  margin-top:28px;
  padding-top:0;
  text-align:center
}
.voucher-redeem-label{
  max-width:340px;
  margin:0 auto 14px;
  color:var(--voucher-heading-text);
  font-size:18px;
  line-height:1.3;
  font-weight:900
}
.voucher-seal-button{
  width:228px;
  max-width:min(76vw,228px);
  margin:0 auto
}
.voucher-seal-button:not(.is-static):hover{
  transform:scale(1.045) rotate(-1deg);
  filter:drop-shadow(0 8px 13px rgba(31,31,35,.16))
}
.voucher-seal-button:not(.is-static):active{
  transform:scale(.965) rotate(1deg)
}
.voucher-seal-button.is-static{
  opacity:.78;
  filter:saturate(.72) grayscale(.08)
}
.voucher-redeem-area.is-redeemed .voucher-redeem-label,
.voucher-redeem-area.is-unavailable .voucher-redeem-label,
.voucher-redeem-area.is-checking .voucher-redeem-label{
  color:var(--voucher-body-text)
}

/* Frequency flash stays attached to the lower-right of photography. */
.voucher-frequency-flash{
  right:14px;
  bottom:14px;
  min-height:38px;
  padding:8px 13px;
  color:var(--voucher-accent-dark);
  font-size:14px;
  font-weight:900
}

@media (max-width:420px){
  .voucher-band{
    margin-bottom:18px
  }
  .voucher-band:not(:last-child)::before{
    bottom:-18px;
    height:18px
  }
  .voucher-band:not(:last-child)::after{
    bottom:-9px;
    height:16px;
    background-size:25px 16px
  }
  .voucher-band-inner{
    padding-top:25px;
    padding-bottom:28px
  }
  .voucher-saving{
    font-size:clamp(34px,10.2vw,42px)
  }
  .voucher-description{
    font-size:18px
  }
  .voucher-shop-name{
    font-size:24px
  }
  .voucher-expanded-content{
    margin-top:20px;
    padding-top:21px
  }
  .voucher-business-info .eyebrow{
    font-size:13px
  }
  .voucher-business-info p,
  .voucher-business-info .voucher-about-placeholder{
    font-size:17px
  }
  .voucher-business-info .voucher-address{
    font-size:16px
  }
  .voucher-redeem-area{
    margin-top:24px
  }
  .voucher-redeem-label{
    margin-bottom:12px;
    font-size:17px
  }
  .voucher-seal-button{
    width:214px;
    max-width:72vw
  }
  .voucher-frequency-flash{
    right:12px;
    bottom:12px;
    min-height:35px;
    padding:7px 11px;
    font-size:13px
  }
}


/* ==========================================================
   Perforated paper edge correction — v0.25
   ========================================================== */

/*
  The voucher sheets now butt directly against one another.
  The lower edge of each sheet carries a row of rounded paper
  tabs with only a tiny offset shadow behind them. This removes
  the previous thick striped separator and makes the join read
  as a real tear-off/perforated coupon edge.
*/
.voucher-band{
  margin-bottom:0 !important;
  position:relative;
  overflow:visible
}

.voucher-band:not(:last-child){
  z-index:1
}

/* No separate dark separator bar. */
.voucher-band:not(:last-child)::before{
  content:"" !important;
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:-11px;
  height:12px;
  background:
    radial-gradient(
      circle at 50% 0,
      rgba(20,31,32,.24) 0 8.6px,
      transparent 9.2px
    )
    left top / 28px 12px repeat-x;
  filter:blur(.15px);
  pointer-events:none
}

/* Coloured semicircular paper tabs forming the actual edge. */
.voucher-band:not(:last-child)::after{
  content:"" !important;
  position:absolute;
  z-index:6;
  left:0;
  right:0;
  bottom:-8px;
  height:10px;
  background:
    radial-gradient(
      circle at 50% 0,
      var(--voucher-bg) 0 7.9px,
      transparent 8.4px
    )
    left top / 28px 10px repeat-x;
  filter:none;
  pointer-events:none
}

/* The next voucher begins immediately beneath the perforated edge. */
.voucher-band + .voucher-band{
  margin-top:0
}

/* A very soft paper-depth line only; no heavy bands. */
.voucher-band + .voucher-band > .voucher-band-inner{
  position:relative
}
.voucher-band + .voucher-band > .voucher-band-inner::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:100vw;
  height:5px;
  transform:translateX(-50%);
  background:linear-gradient(
    180deg,
    rgba(25,31,32,.11),
    rgba(25,31,32,0)
  );
  pointer-events:none
}

@media (max-width:420px){
  .voucher-band:not(:last-child)::before{
    bottom:-10px;
    height:11px;
    background-size:25px 11px
  }
  .voucher-band:not(:last-child)::after{
    bottom:-7px;
    height:9px;
    background-size:25px 9px
  }
}

/* ==========================================================
   Consistent perforation join — v0.26
   Every voucher transition uses the same in-flow scalloped edge.
   ========================================================== */

.voucher-band.theme-teal{
  --voucher-next-bg:#b889bd
}
.voucher-band.theme-violet{
  --voucher-next-bg:#007a72
}

/* Remove every older shadow / overlap based separator. */
.voucher-band:not(:last-child)::before,
.voucher-band + .voucher-band::before{
  content:none !important;
  display:none !important
}

.voucher-band + .voucher-band > .voucher-band-inner::before{
  content:none !important;
  display:none !important
}

/*
  The final 12px of each voucher is painted as the next voucher colour,
  with evenly spaced semicircular tabs of the current voucher colour.
  Because the effect sits inside the voucher itself rather than overlapping
  the next section, every join renders identically.
*/
.voucher-band:not(:last-child)::after{
  content:"" !important;
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  bottom:0 !important;
  height:12px !important;
  background:
    radial-gradient(
      circle at 14px 0,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x,
    var(--voucher-next-bg) !important;
  filter:none !important;
  box-shadow:none !important;
  pointer-events:none
}

/* No gaps, offsets or extra bands between neighbouring vouchers. */
.voucher-band,
.voucher-band + .voucher-band{
  margin-top:0 !important;
  margin-bottom:0 !important
}

@media (max-width:420px){
  .voucher-band:not(:last-child)::after{
    height:11px !important;
    background:
      radial-gradient(
        circle at 12.5px 0,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x,
      var(--voucher-next-bg) !important
  }
}


/* ==========================================================
   Live redemption overlay + in-voucher countdown — v0.28
   ========================================================== */

body.has-redemption-overlay{
  overflow:hidden
}

/* On desktop offer proofs the redemption preview lives inside the mock phone.
   Keep the surrounding approval page scrollable so the business can reach the
   approve/change buttons without first closing the preview redemption. */
@media (min-width:541px){
  body.has-redemption-overlay.has-review-redemption-overlay{
    overflow-x:hidden;
    overflow-y:auto;
  }
}

/* The active compact voucher keeps the empty centre and runs the
   countdown inside it until the redemption window expires. */
.voucher-seal-button{
  position:relative
}
.voucher-seal-live-timer{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:42%;
  color:#33353a;
  font-size:clamp(23px,6.7vw,34px);
  line-height:1;
  font-weight:900;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  text-align:center;
  pointer-events:none
}
.voucher-redeem-area.is-active .voucher-redeem-label{
  color:var(--voucher-heading-text)
}

.redemption-overlay{
  position:fixed;
  z-index:5000;
  inset:0;
  display:grid;
  place-items:center;
  padding:
    calc(54px + env(safe-area-inset-top))
    12px
    calc(20px + env(safe-area-inset-bottom));
  isolation:isolate
}
.redemption-overlay-backdrop{
  position:absolute;
  z-index:-2;
  inset:0;
  background:rgba(17,23,25,.88);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px)
}
.redemption-overlay.theme-teal .redemption-overlay-backdrop{
  background:rgba(31,15,34,.90)
}
.redemption-overlay.theme-violet .redemption-overlay-backdrop{
  background:rgba(0,53,50,.92)
}
.redemption-overlay-close{
  position:absolute;
  z-index:4;
  top:calc(12px + env(safe-area-inset-top));
  right:14px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  padding:7px 11px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:13px;
  line-height:1;
  font-weight:800;
  box-shadow:none;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px)
}
.redemption-overlay-close span{
  font-size:18px;
  line-height:.8;
  font-weight:500
}
.redemption-overlay-stage{
  width:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}
.redemption-overlay-live-label{
  margin:0 0 9px;
  color:#fff;
  font-size:13px;
  line-height:1;
  font-weight:900;
  letter-spacing:.14em;
  text-align:center
}
.redemption-overlay-seal{
  position:relative;
  width:min(94vw,calc(100vh - 92px),760px);
  max-width:760px;
  aspect-ratio:1;
  animation:
    redemptionSealEnter
    .28s
    cubic-bezier(.16,.9,.28,1.12)
    both;
  filter:drop-shadow(0 22px 42px rgba(0,0,0,.28))
}
.redemption-overlay-seal > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none
}
.redemption-overlay-centre{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:42%;
  height:42%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#24262a;
  text-align:center;
  padding:1.5%
}
.redemption-overlay-business{
  max-width:100%;
  font-size:clamp(12px,3.25vw,20px);
  line-height:1.08;
  font-weight:900;
  overflow-wrap:anywhere
}
.redemption-overlay-saving{
  max-width:100%;
  margin-top:4%;
  color:#101214;
  font-size:clamp(18px,5.3vw,34px);
  line-height:.96;
  font-weight:950;
  letter-spacing:-.045em;
  text-transform:uppercase;
  overflow-wrap:anywhere
}
.redemption-overlay-detail{
  max-width:95%;
  margin-top:3%;
  color:#4b4b50;
  font-size:clamp(10px,2.65vw,17px);
  line-height:1.16;
  font-weight:700;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
.redemption-overlay-timer{
  margin-top:5%;
  color:#15171a;
  font-size:clamp(34px,10.7vw,68px);
  line-height:.86;
  font-weight:950;
  letter-spacing:-.065em;
  font-variant-numeric:tabular-nums
}
.redemption-overlay-instruction{
  margin-top:5%;
  color:#666970;
  font-size:clamp(9px,2.35vw,15px);
  line-height:1.1;
  font-weight:800
}

@keyframes redemptionSealEnter{
  0%{
    opacity:.35;
    transform:scale(.22) rotate(-5deg)
  }
  72%{
    opacity:1;
    transform:scale(1.035) rotate(.6deg)
  }
  100%{
    opacity:1;
    transform:scale(1) rotate(0)
  }
}

@media (prefers-reduced-motion:reduce){
  .redemption-overlay-seal{
    animation:none
  }
}

@media (max-width:420px){
  .redemption-overlay{
    padding-left:6px;
    padding-right:6px
  }
  .redemption-overlay-seal{
    width:min(98vw,calc(100vh - 88px))
  }
  .redemption-overlay-close{
    right:10px;
    font-size:12px
  }
}

@media (max-height:620px){
  .redemption-overlay-live-label{
    display:none
  }
  .redemption-overlay-seal{
    width:min(92vw,calc(100vh - 54px))
  }
}


/* ==========================================================
   Redemption overlay refinement — v0.29
   ========================================================== */

/* Larger voucher action on opened offer cards. */
.voucher-seal-button{
  width:258px;
  max-width:min(82vw,258px)
}
.voucher-seal-button.is-static{
  width:258px;
  max-width:min(82vw,258px)
}

/* Redeemed seals remain obviously interactive. */
.voucher-redeem-area.is-redeemed .voucher-seal-button{
  cursor:pointer;
  opacity:.92;
  filter:saturate(.82)
}
.voucher-redeem-area.is-redeemed .voucher-seal-button:hover{
  transform:scale(1.035)
}

/* The underlying offer stays much more visible. */
.redemption-overlay-backdrop,
.redemption-overlay.theme-teal .redemption-overlay-backdrop,
.redemption-overlay.theme-violet .redemption-overlay-backdrop{
  background:rgba(17,20,22,.58);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px)
}

.redemption-overlay{
  padding:
    calc(48px + env(safe-area-inset-top))
    0
    calc(12px + env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain
}

.redemption-overlay-stage{
  width:100%;
  min-height:100%;
  justify-content:center;
  gap:10px;
  padding:0
}

/* The voucher image now uses the entire viewport width. */
.redemption-overlay-seal{
  width:100vw;
  max-width:none;
  flex:0 0 auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.24))
}
.redemption-overlay-seal > img{
  width:100%;
  height:100%;
  object-fit:contain
}

/* Only the live countdown occupies the white middle. */
.redemption-overlay-centre{
  width:42%;
  height:42%;
  padding:0
}
.redemption-overlay-timer{
  margin:0;
  color:#15171a;
  font-size:clamp(46px,13vw,88px);
  line-height:.85;
  font-weight:950;
  letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;
  text-align:center
}

/* Business/offer information is deliberately outside the seal. */
.redemption-overlay-info{
  width:min(calc(100vw - 28px),680px);
  margin:0 auto;
  padding:15px 17px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:17px;
  background:rgba(10,13,15,.72);
  color:#fff;
  text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px)
}
.redemption-overlay-info-business{
  font-size:20px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip
}
.redemption-overlay-info-saving{
  margin-top:5px;
  color:#fff;
  font-size:26px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.035em;
  text-transform:uppercase
}
.redemption-overlay-info-detail{
  margin-top:7px;
  color:rgba(255,255,255,.91);
  font-size:16px;
  line-height:1.35;
  font-weight:650
}
.redemption-overlay-smallprint{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.65);
  font-size:11px;
  line-height:1.35;
  font-weight:600
}

/* Waiting-period overlay: same voucher-first treatment, with status below. */
.redemption-overlay-redeemed-info{
  padding-top:17px;
  padding-bottom:17px
}
.redemption-overlay-status-title{
  color:#fff;
  font-size:26px;
  line-height:1;
  font-weight:950;
  letter-spacing:.055em
}
.redemption-overlay-available-again{
  margin-top:9px;
  color:rgba(255,255,255,.82);
  font-size:16px;
  line-height:1.35;
  font-weight:650
}
.redemption-overlay-available-again strong{
  display:block;
  margin-top:2px;
  color:#fff;
  font-size:20px;
  font-weight:900
}
.redemption-overlay-redeemed-info .redemption-overlay-info-business{
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.17);
  color:rgba(255,255,255,.8);
  font-size:15px;
  font-weight:750
}

/* Old centre-detail elements are no longer used in the live overlay. */
.redemption-overlay-live-label,
.redemption-overlay-business,
.redemption-overlay-saving,
.redemption-overlay-detail,
.redemption-overlay-instruction{
  display:none !important
}

@media (max-width:420px){
  .voucher-seal-button,
  .voucher-seal-button.is-static{
    width:244px;
    max-width:78vw
  }
  .redemption-overlay{
    padding-left:0;
    padding-right:0
  }
  .redemption-overlay-seal{
    width:100vw;
    max-width:none
  }
  .redemption-overlay-info{
    width:calc(100vw - 24px)
  }
  .redemption-overlay-info-business{
    font-size:19px
  }
  .redemption-overlay-info-saving{
    font-size:24px
  }
  .redemption-overlay-info-detail{
    font-size:15px
  }
}

@media (max-height:650px){
  .redemption-overlay-stage{
    justify-content:flex-start
  }
  .redemption-overlay-seal{
    width:min(100vw,72vh)
  }
}


/* ==========================================================
   Live redemption overlay sizing + timer polish — v0.30
   ========================================================== */

/* Let the seal deliberately overscan a little so the useful white centre
   is larger on phones, while keeping the offer visible through the backdrop. */
.redemption-overlay{
  overflow-x:hidden
}
.redemption-overlay-seal{
  width:112vw;
  max-width:760px;
  margin-left:auto;
  margin-right:auto
}
.redemption-overlay-seal > img{
  width:100%;
  height:auto;
  display:block
}

/* Smaller countdown, colour-matched to the actual opposite-colour seal. */
.redemption-overlay-timer{
  font-size:clamp(38px,10.5vw,70px);
  line-height:.9;
  letter-spacing:-.055em
}
.redemption-overlay.theme-teal .redemption-overlay-timer{
  color:var(--accent-dark)
}
.redemption-overlay.theme-violet .redemption-overlay-timer{
  color:var(--brand-deep)
}

/* Stronger hierarchy in the information panel below the seal. */
.redemption-overlay-info-business{
  font-size:23px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:clip
}
.redemption-overlay-info-saving{
  margin-top:7px;
  font-size:34px;
  line-height:1;
  letter-spacing:-.035em
}
.redemption-overlay-info-detail{
  margin-top:9px;
  font-size:20px;
  line-height:1.32;
  font-weight:700
}
.redemption-overlay-smallprint{
  margin-top:14px;
  padding-top:11px;
  font-size:13px;
  line-height:1.4
}

@media (max-width:420px){
  .redemption-overlay-seal{
    width:114vw;
    max-width:none
  }
  .redemption-overlay-timer{
    font-size:clamp(36px,10vw,58px)
  }
  .redemption-overlay-info-business{
    font-size:22px
  }
  .redemption-overlay-info-saving{
    font-size:30px
  }
  .redemption-overlay-info-detail{
    font-size:18px
  }
  .redemption-overlay-smallprint{
    font-size:13px
  }
}

@media (max-height:650px){
  .redemption-overlay-seal{
    width:min(108vw,78vh)
  }
}

/* ==========================================================
   Mobile overlay centring + live gold redemption panel — v0.31
   ========================================================== */

/* The live seal intentionally overscans the viewport, but must remain
   optically centred even when it is wider than the phone screen. */
.redemption-overlay-seal{
  position:relative;
  left:50%;
  translate:-50% 0;
  margin-left:0;
  margin-right:0;
  flex-shrink:0
}

/* Gold live-redemption information panel.  The translucent fill keeps the
   underlying offer visible while the animated edge makes a live redemption
   unmistakable to the business. */
.redemption-overlay.is-live-overlay .redemption-overlay-info{
  border:2px solid rgba(255,211,92,.88);
  background:
    linear-gradient(
      145deg,
      rgba(124,82,8,.78),
      rgba(91,57,4,.67)
    );
  color:#fffdf3;
  box-shadow:
    0 0 0 1px rgba(255,232,154,.24) inset,
    0 0 15px rgba(255,201,53,.52),
    0 0 36px rgba(255,180,20,.24),
    0 12px 30px rgba(0,0,0,.20);
  animation:
    liveRedemptionGoldPulse 1.45s ease-in-out infinite
}

.redemption-overlay.is-live-overlay .redemption-overlay-info-business,
.redemption-overlay.is-live-overlay .redemption-overlay-info-saving{
  color:#fffdf5
}

.redemption-overlay.is-live-overlay .redemption-overlay-info-detail{
  color:rgba(255,252,236,.94)
}

.redemption-overlay.is-live-overlay .redemption-overlay-smallprint{
  border-top-color:rgba(255,229,143,.36);
  color:rgba(255,249,225,.80)
}

@keyframes liveRedemptionGoldPulse{
  0%,100%{
    border-color:rgba(255,211,92,.76);
    box-shadow:
      0 0 0 1px rgba(255,232,154,.20) inset,
      0 0 10px rgba(255,201,53,.38),
      0 0 25px rgba(255,180,20,.15),
      0 12px 30px rgba(0,0,0,.20)
  }
  50%{
    border-color:rgba(255,231,150,1);
    box-shadow:
      0 0 0 1px rgba(255,244,205,.44) inset,
      0 0 22px rgba(255,211,72,.82),
      0 0 48px rgba(255,178,16,.38),
      0 12px 30px rgba(0,0,0,.20)
  }
}

@media (max-width:420px){
  .redemption-overlay-stage{
    width:100vw;
    max-width:100vw;
    overflow:visible
  }

  .redemption-overlay-seal{
    left:50%;
    translate:-50% 0;
    width:114vw;
    max-width:none
  }
}

@media (prefers-reduced-motion:reduce){
  .redemption-overlay.is-live-overlay .redemption-overlay-info{
    animation:none;
    box-shadow:
      0 0 0 1px rgba(255,232,154,.28) inset,
      0 0 18px rgba(255,201,53,.55),
      0 12px 30px rgba(0,0,0,.20)
  }
}


/* ==========================================================
   Overlay centring + bright gold live panel — v0.32
   ========================================================== */

/* Ensure the seal is geometrically centred on both mobile and desktop.
   Remove previous offset logic and let the stage centre it. */
.redemption-overlay-stage{
  display:grid;
  justify-items:center;
  align-items:center;
}

.redemption-overlay-seal{
  position:relative;
  left:auto !important;
  translate:none !important;
  transform:none;
  margin-left:auto !important;
  margin-right:auto !important;
  align-self:center;
  width:min(calc(100vw + 88px), 760px);
  max-width:760px;
}

@media (max-width:420px){
  .redemption-overlay-stage{
    width:100%;
    max-width:100%;
  }

  .redemption-overlay-seal{
    width:calc(100vw + 92px);
    max-width:none;
  }
}

@media (max-height:650px){
  .redemption-overlay-seal{
    width:min(calc(100vw + 48px), 78vh, 760px);
  }
}

/* Larger central close pill for both live and redeemed overlays. */
.redemption-overlay-close{
  left:50%;
  right:auto;
  transform:translateX(-50%);
  top:calc(12px + env(safe-area-inset-top));
  gap:8px;
  padding:10px 16px;
  min-height:42px;
  font-size:15px;
  font-weight:900;
  border-radius:999px;
  background:rgba(255,255,255,.17);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 8px 18px rgba(0,0,0,.14);
}
.redemption-overlay-close span{
  font-size:21px;
  line-height:.8;
}

@media (max-width:420px){
  .redemption-overlay-close{
    padding:10px 16px;
    font-size:15px;
  }
}

/* Bright, more golden live-info panel with animated glow. */
.redemption-overlay.is-live-overlay .redemption-overlay-info{
  position:relative;
  overflow:visible;
  border:2px solid rgba(255,224,109,.95);
  background:
    linear-gradient(145deg, rgba(255,225,112,.40) 0%, rgba(243,184,33,.34) 44%, rgba(255,214,82,.40) 100%),
    rgba(56,41,4,.36);
  color:#fffef7;
  box-shadow:
    0 0 0 1px rgba(255,245,205,.24) inset,
    0 0 0 3px rgba(255,210,82,.12),
    0 0 22px rgba(255,205,73,.48),
    0 0 58px rgba(255,205,73,.22),
    0 12px 30px rgba(0,0,0,.20);
  animation:liveRedemptionGoldPulse 1.45s ease-in-out infinite;
}

.redemption-overlay.is-live-overlay .redemption-overlay-info::before,
.redemption-overlay.is-live-overlay .redemption-overlay-info::after{
  content:"";
  position:absolute;
  inset:-18px;
  pointer-events:none;
  border-radius:24px;
}

.redemption-overlay.is-live-overlay .redemption-overlay-info::before{
  background:
    radial-gradient(circle at 6% 30%, rgba(255,246,201,.96) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at 11% 18%, rgba(255,223,120,.9) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 18% 86%, rgba(255,239,175,.95) 0 1.7px, transparent 2.4px),
    radial-gradient(circle at 28% 12%, rgba(255,220,96,.88) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 81% 14%, rgba(255,246,205,.96) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 90% 28%, rgba(255,214,88,.92) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 95% 74%, rgba(255,239,179,.94) 0 1.8px, transparent 2.5px),
    radial-gradient(circle at 78% 90%, rgba(255,216,96,.88) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 52% 4%, rgba(255,244,199,.86) 0 1.5px, transparent 2.1px),
    radial-gradient(circle at 45% 97%, rgba(255,231,144,.84) 0 1.4px, transparent 2px);
  filter:drop-shadow(0 0 5px rgba(255,223,122,.4));
  animation:goldSparkleTwinkle 2.2s ease-in-out infinite alternate;
}

.redemption-overlay.is-live-overlay .redemption-overlay-info::after{
  background:
    radial-gradient(circle at 8% 56%, rgba(255,255,255,.75) 0 1px, transparent 1.8px),
    radial-gradient(circle at 21% 6%, rgba(255,255,255,.68) 0 1px, transparent 1.7px),
    radial-gradient(circle at 71% 7%, rgba(255,255,255,.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 54%, rgba(255,255,255,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 31% 95%, rgba(255,255,255,.68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 67% 98%, rgba(255,255,255,.7) 0 1px, transparent 1.8px);
  opacity:.82;
  animation:goldSparkleTwinkle 1.5s ease-in-out infinite reverse;
}

.redemption-overlay.is-live-overlay .redemption-overlay-info-business,
.redemption-overlay.is-live-overlay .redemption-overlay-info-saving{
  color:#fffef5;
}

.redemption-overlay.is-live-overlay .redemption-overlay-info-detail{
  color:rgba(255,252,236,.97);
}

.redemption-overlay.is-live-overlay .redemption-overlay-smallprint{
  border-top-color:rgba(255,239,171,.42);
  color:rgba(255,249,226,.92);
}

@keyframes goldSparkleTwinkle{
  0%{
    opacity:.72;
    transform:scale(1);
  }
  100%{
    opacity:1;
    transform:scale(1.015);
  }
}

@keyframes liveRedemptionGoldPulse{
  0%,100%{
    border-color:rgba(255,224,109,.92);
    box-shadow:
      0 0 0 1px rgba(255,245,205,.22) inset,
      0 0 0 3px rgba(255,210,82,.12),
      0 0 18px rgba(255,205,73,.38),
      0 0 42px rgba(255,205,73,.17),
      0 12px 30px rgba(0,0,0,.20);
  }
  50%{
    border-color:rgba(255,241,176,1);
    box-shadow:
      0 0 0 1px rgba(255,248,223,.46) inset,
      0 0 0 4px rgba(255,223,114,.18),
      0 0 28px rgba(255,212,75,.78),
      0 0 64px rgba(255,212,75,.32),
      0 12px 30px rgba(0,0,0,.20);
  }
}

@media (prefers-reduced-motion:reduce){
  .redemption-overlay.is-live-overlay .redemption-overlay-info,
  .redemption-overlay.is-live-overlay .redemption-overlay-info::before,
  .redemption-overlay.is-live-overlay .redemption-overlay-info::after{
    animation:none;
  }
}


/* ==========================================================
   Robust overlay seal centring — v0.33
   ========================================================== */

/*
   The image is intentionally wider than the viewport. Centre it inside a
   viewport-width flex rail instead of centring the oversized element itself.
   This avoids browser differences when an over-wide grid/flex item overflows.
*/
.redemption-overlay-stage{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  max-width:100%;
  overflow:visible;
}

.redemption-overlay-seal-rail{
  width:100vw;
  max-width:100vw;
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:visible;
  margin:0;
  padding:0;
}

.redemption-overlay-seal{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  translate:none !important;
  margin:0 !important;
  flex:0 0 auto;
  align-self:auto;
  width:min(calc(100vw + 88px),760px);
  max-width:none;
}

@media (max-width:420px){
  .redemption-overlay-seal-rail{
    width:100vw;
    max-width:100vw;
  }

  .redemption-overlay-seal{
    width:calc(100vw + 92px);
    max-width:none;
  }
}

@media (max-height:650px){
  .redemption-overlay-seal{
    width:min(calc(100vw + 48px),78vh,760px);
  }
}


/* ==========================================================
   Voucher presentation + richer redemption effects — v0.34
   ========================================================== */

/* Larger, more widely spaced overlay countdown. */
.redemption-overlay-timer{
  font-size:clamp(43px,11.7vw,76px) !important;
  line-height:.9;
  letter-spacing:.035em !important;
  padding-left:.035em;
}

@media (max-width:420px){
  .redemption-overlay-timer{
    font-size:clamp(41px,11.4vw,64px) !important;
  }
}

/* Perforation also finishes the outside top and bottom edges of the feed. */
.voucher-band.is-first-offer::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  top:0;
  bottom:auto !important;
  height:12px;
  background:
    radial-gradient(
      circle at 14px 12px,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x,
    var(--paper) !important;
  filter:none !important;
  pointer-events:none;
}

.voucher-band.is-last-offer::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:8;
  left:0;
  right:0;
  bottom:0 !important;
  height:12px !important;
  background:
    radial-gradient(
      circle at 14px 0,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x,
    var(--paper) !important;
  filter:none !important;
  box-shadow:none !important;
  pointer-events:none;
}

@media (max-width:420px){
  .voucher-band.is-first-offer::before{
    height:11px;
    background:
      radial-gradient(
        circle at 12.5px 11px,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x,
      var(--paper) !important;
  }

  .voucher-band.is-last-offer::after{
    height:11px !important;
    background:
      radial-gradient(
        circle at 12.5px 0,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x,
      var(--paper) !important;
  }
}

/* Closed offer information order and hierarchy. */
.voucher-heading{
  padding-bottom:0;
}
.voucher-saving{
  font-size:clamp(43px,10.5vw,53px);
  line-height:.94;
}
.voucher-description{
  margin-top:11px;
  font-size:22px;
  line-height:1.34;
  font-weight:500;
}
.voucher-shop-row{
  padding-top:14px;
}
.voucher-shop-name{
  font-size:26px;
  line-height:1.12;
  font-weight:500;
  letter-spacing:-.015em;
}
.voucher-media-collapsed{
  max-height:330px;
  margin-top:18px;
  opacity:1;
  overflow:hidden;
  transition:
    max-height .24s ease,
    margin-top .24s ease,
    opacity .16s ease;
}
.voucher-band.is-expanded .voucher-media-collapsed{
  max-height:0;
  margin-top:0;
  opacity:0;
  pointer-events:none;
}

/* Expansion starts directly below the business name: address, about, redeem. */
.voucher-expanded-content{
  margin-top:0;
  padding:0 0 5px;
  border-top:0;
}
.voucher-business-info .voucher-address{
  margin:8px 0 0;
  color:var(--voucher-body-text);
  font-size:18px;
  line-height:1.42;
  font-weight:500;
}
.voucher-business-info .voucher-about-heading{
  margin:22px 0 8px;
  color:var(--voucher-heading-text);
  font-size:14px;
  font-weight:850;
  letter-spacing:.09em;
}
.voucher-business-info p:not(.voucher-address){
  margin-top:0;
  font-size:18px;
  line-height:1.5;
  font-weight:500;
}

/* Larger redemption seal within the expanded card. */
.voucher-redeem-area{
  margin-top:30px;
}
.voucher-seal-button,
.voucher-seal-button.is-static{
  width:310px;
  max-width:min(84vw,310px);
}
.voucher-seal-ready-text{
  position:absolute;
  z-index:3;
  left:50%;
  top:50%;
  width:42%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--voucher-accent-dark);
  text-align:center;
  text-transform:uppercase;
  font-size:20px;
  line-height:1.02;
  font-weight:700;
  letter-spacing:.015em;
  pointer-events:none;
}
.voucher-seal-ready-text strong{
  margin-top:2px;
  font-size:25px;
  line-height:1;
  font-weight:950;
  letter-spacing:-.02em;
}
.theme-teal .voucher-seal-ready-text{
  color:#67466c;
}
.theme-violet .voucher-seal-ready-text{
  color:#004d49;
}

/* The image reappears at the very bottom as the accordion opens. */
.voucher-media-expanded{
  margin-top:31px;
}
.voucher-media-expanded .voucher-media{
  width:100%;
}

@media (max-width:420px){
  .voucher-saving{
    font-size:clamp(38px,11vw,46px);
  }
  .voucher-description{
    font-size:20px;
    font-weight:500;
  }
  .voucher-shop-name{
    font-size:24px;
    font-weight:500;
  }
  .voucher-business-info .voucher-address,
  .voucher-business-info p:not(.voucher-address){
    font-size:17.5px;
  }
  .voucher-seal-button,
  .voucher-seal-button.is-static{
    width:286px;
    max-width:86vw;
  }
  .voucher-seal-ready-text{
    font-size:18px;
  }
  .voucher-seal-ready-text strong{
    font-size:23px;
  }
}

/* Turn the live gold treatment into a dense outward spray rather than a
   handful of dots. The two particle layers twinkle at different rates. */
.redemption-overlay.is-live-overlay .redemption-overlay-info{
  isolation:isolate;
  width:min(calc(100vw - 58px),650px);
}
.redemption-overlay.is-live-overlay .redemption-overlay-info > *{
  position:relative;
  z-index:3;
}
.redemption-overlay.is-live-overlay .redemption-overlay-info::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:-54px -46px;
  border-radius:44px;
  pointer-events:none;
  background:
    radial-gradient(circle at 96.4% 2.1%, rgba(255,236,138,.96) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 95.6% 37.8%, rgba(255,236,138,.96) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 53.2% 88.2%, rgba(255,185,22,.92) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 20.8% 64.7%, rgba(255,236,138,.96) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 30.3% 18.4%, rgba(255,236,138,.96) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 85.4% 11.3%, rgba(255,247,198,.90) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 54.7% 99.9%, rgba(255,247,198,.90) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 18.0% 4.5%, rgba(255,185,22,.92) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 60.9% 12.6%, rgba(255,236,138,.96) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 91.7% 95.3%, rgba(255,214,61,.98) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 35.6% 90.4%, rgba(255,236,138,.96) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 4.0% 29.7%, rgba(255,214,61,.98) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 26.2% 7.3%, rgba(255,247,198,.90) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 86.9% 43.9%, rgba(255,247,198,.90) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 87.0% 90.6%, rgba(255,214,61,.98) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 4.7% 66.4%, rgba(255,214,61,.98) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 45.9% 7.4%, rgba(255,214,61,.98) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 92.8% 46.6%, rgba(255,214,61,.98) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 90.4% 97.5%, rgba(255,185,22,.92) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 10.9% 36.5%, rgba(255,236,138,.96) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 89.5% 5.6%, rgba(255,214,61,.98) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 83.1% 28.3%, rgba(255,247,198,.90) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 79.6% 90.1%, rgba(255,214,61,.98) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 3.4% 35.6%, rgba(255,185,22,.92) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 85.7% 11.8%, rgba(255,247,198,.90) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 94.8% 17.7%, rgba(255,185,22,.92) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 73.1% 93.7%, rgba(255,185,22,.92) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 7.1% 86.0%, rgba(255,236,138,.96) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 42.4% 7.2%, rgba(255,185,22,.92) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 87.5% 49.2%, rgba(255,247,198,.90) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 91.3% 91.8%, rgba(255,236,138,.96) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 5.4% 19.9%, rgba(255,185,22,.92) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 43.5% 8.4%, rgba(255,247,198,.90) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 91.0% 18.4%, rgba(255,247,198,.90) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 66.5% 93.9%, rgba(255,247,198,.90) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 20.6% 73.1%, rgba(255,185,22,.92) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 85.6% 13.7%, rgba(255,236,138,.96) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 89.9% 21.7%, rgba(255,185,22,.92) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 28.0% 97.7%, rgba(255,214,61,.98) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 21.5% 94.2%, rgba(255,185,22,.92) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 34.2% 10.9%, rgba(255,214,61,.98) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 90.1% 16.9%, rgba(255,214,61,.98) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 12.2% 81.6%, rgba(255,185,22,.92) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 4.5% 58.8%, rgba(255,185,22,.92) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 7.4% 15.6%, rgba(255,247,198,.90) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 92.8% 25.9%, rgba(255,214,61,.98) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 57.3% 88.3%, rgba(255,236,138,.96) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 20.8% 59.0%, rgba(255,236,138,.96) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 10.0% 14.0%, rgba(255,185,22,.92) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 96.2% 40.6%, rgba(255,185,22,.92) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 19.9% 84.8%, rgba(255,236,138,.96) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 22.2% 60.4%, rgba(255,185,22,.92) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 58.5% 6.7%, rgba(255,185,22,.92) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 83.9% 3.4%, rgba(255,247,198,.90) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 48.2% 83.9%, rgba(255,185,22,.92) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 4.0% 29.1%, rgba(255,247,198,.90) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 8.9% 1.5%, rgba(255,214,61,.98) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 96.5% 89.4%, rgba(255,247,198,.90) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 50.0% 77.8%, rgba(255,185,22,.92) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 0.9% 81.9%, rgba(255,247,198,.90) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 32.2% 22.9%, rgba(255,185,22,.92) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 82.6% 14.3%, rgba(255,214,61,.98) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 70.9% 86.4%, rgba(255,236,138,.96) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 5.6% 69.2%, rgba(255,214,61,.98) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 42.8% 15.3%, rgba(255,214,61,.98) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 97.4% 84.5%, rgba(255,185,22,.92) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 81.3% 80.5%, rgba(255,185,22,.92) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 7.4% 78.0%, rgba(255,185,22,.92) 0 1.3px, transparent 2.1px);
  filter:
    drop-shadow(0 0 3px rgba(255,223,100,.88))
    drop-shadow(0 0 8px rgba(255,192,36,.48));
  transform-origin:center;
  animation:goldDustSprayA 1.75s ease-in-out infinite alternate;
}
.redemption-overlay.is-live-overlay .redemption-overlay-info::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:-68px -58px;
  border-radius:52px;
  pointer-events:none;
  background:
    radial-gradient(circle at 77.2% 3.4%, rgba(255,255,238,.95) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 96.2% 61.6%, rgba(255,225,103,.96) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 42.3% 95.4%, rgba(255,255,238,.95) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 3.1% 6.0%, rgba(255,225,103,.96) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 27.7% 10.1%, rgba(255,255,238,.95) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 95.2% 33.1%, rgba(255,225,103,.96) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 24.7% 99.1%, rgba(255,255,238,.95) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 7.5% 82.6%, rgba(255,255,238,.95) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 72.9% 11.8%, rgba(255,225,103,.96) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 97.6% 4.1%, rgba(255,255,238,.95) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 10.2% 85.4%, rgba(255,255,238,.95) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 13.9% 65.8%, rgba(255,255,238,.95) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 78.4% 16.7%, rgba(255,225,103,.96) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 90.8% 14.5%, rgba(255,225,103,.96) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 57.0% 95.2%, rgba(255,225,103,.96) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 14.5% 7.5%, rgba(255,244,176,.95) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 38.8% 15.3%, rgba(255,225,103,.96) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 86.7% 91.2%, rgba(255,225,103,.96) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 2.0% 94.2%, rgba(255,244,176,.95) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 16.0% 63.8%, rgba(255,225,103,.96) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 21.2% 11.9%, rgba(255,225,103,.96) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 78.8% 9.5%, rgba(255,225,103,.96) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 24.8% 86.6%, rgba(255,244,176,.95) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 18.9% 46.3%, rgba(255,255,238,.95) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 79.4% 5.0%, rgba(255,244,176,.95) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 91.7% 54.9%, rgba(255,244,176,.95) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 68.4% 94.5%, rgba(255,255,238,.95) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 0.5% 63.9%, rgba(255,244,176,.95) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 36.1% 10.2%, rgba(255,244,176,.95) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 83.5% 44.0%, rgba(255,244,176,.95) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 28.3% 84.8%, rgba(255,244,176,.95) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 12.0% 37.4%, rgba(255,225,103,.96) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 81.3% 3.1%, rgba(255,255,238,.95) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 95.3% 7.1%, rgba(255,244,176,.95) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 19.0% 95.1%, rgba(255,225,103,.96) 0 1.3px, transparent 2.1px),
    radial-gradient(circle at 3.7% 84.7%, rgba(255,244,176,.95) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 95.5% 7.3%, rgba(255,225,103,.96) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 84.0% 64.2%, rgba(255,244,176,.95) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 42.7% 91.3%, rgba(255,255,238,.95) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 7.6% 13.6%, rgba(255,244,176,.95) 0 0.7px, transparent 1.5px),
    radial-gradient(circle at 63.7% 4.0%, rgba(255,225,103,.96) 0 2.2px, transparent 3.0px),
    radial-gradient(circle at 96.2% 3.1%, rgba(255,225,103,.96) 0 1.9px, transparent 2.7px),
    radial-gradient(circle at 35.9% 95.9%, rgba(255,255,238,.95) 0 0.9px, transparent 1.7px),
    radial-gradient(circle at 7.0% 84.5%, rgba(255,244,176,.95) 0 1.9px, transparent 2.7px);
  filter:
    drop-shadow(0 0 4px rgba(255,244,178,.94))
    drop-shadow(0 0 11px rgba(255,203,55,.48));
  transform-origin:center;
  animation:goldDustSprayB 1.18s ease-in-out infinite alternate;
}
@keyframes goldDustSprayA{
  0%{opacity:.62; transform:scale(.94) rotate(-.35deg)}
  100%{opacity:1; transform:scale(1.035) rotate(.35deg)}
}
@keyframes goldDustSprayB{
  0%{opacity:.46; transform:scale(.91) rotate(.4deg)}
  100%{opacity:.94; transform:scale(1.055) rotate(-.45deg)}
}

@media (prefers-reduced-motion:reduce){
  .redemption-overlay.is-live-overlay .redemption-overlay-info::before,
  .redemption-overlay.is-live-overlay .redemption-overlay-info::after{
    animation:none;
    opacity:.9;
  }
}


/* ==========================================================
   Stable offer-card expansion + tighter card spacing — v0.35
   ========================================================== */

/* Keep the closed-card visual stack completely fixed when the accordion opens. */
.voucher-media-collapsed,
.voucher-band.is-expanded .voucher-media-collapsed{
  max-height:none !important;
  margin-top:7px !important;
  opacity:1 !important;
  overflow:visible !important;
  pointer-events:auto !important;
}

/* The duplicated bottom image from v0.34 is no longer used. */
.voucher-media-expanded{
  display:none !important;
}

/* Headline carries more of the visual impact. */
.voucher-saving{
  font-size:clamp(49px,11.7vw,60px) !important;
  line-height:.91 !important;
  letter-spacing:-.052em;
}

/* Keep the detail/business grouping tight and easy to scan. */
.voucher-description{
  margin-top:10px;
  font-size:22px;
  line-height:1.32;
  font-weight:500;
}
.voucher-shop-row{
  padding-top:7px !important;
}
.voucher-shop-name{
  font-weight:500;
}

/* Reduce the dead space around the photography. */
.voucher-band-inner{
  padding-top:25px;
  padding-bottom:17px;
}
.voucher-band.is-expanded .voucher-band-inner{
  padding-bottom:20px;
}

/* Expanded information now simply reveals beneath the fixed image. */
.voucher-expanded-content{
  margin-top:0 !important;
  padding:15px 0 2px !important;
  border-top:0 !important;
}
.voucher-business-info .voucher-address{
  margin-top:0 !important;
}
.voucher-business-info .voucher-about-heading{
  margin-top:18px;
}

/* Make the entire paper card feel tappable while allowing the voucher seal
   and other nested controls to keep their own actions. */
.voucher-card{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.voucher-card:has(.voucher-seal-button:hover){
  cursor:pointer;
}

@media (max-width:420px){
  .voucher-saving{
    font-size:clamp(44px,12.8vw,52px) !important;
  }
  .voucher-description{
    font-size:20.5px;
  }
  .voucher-shop-row{
    padding-top:6px !important;
  }
  .voucher-media-collapsed,
  .voucher-band.is-expanded .voucher-media-collapsed{
    margin-top:6px !important;
  }
  .voucher-band-inner{
    padding-top:23px;
    padding-bottom:14px;
  }
  .voucher-band.is-expanded .voucher-band-inner{
    padding-bottom:17px;
  }
  .voucher-expanded-content{
    padding-top:13px !important;
  }
}


/* ==========================================================
   Offer-feed polish + tighter redeem area — v0.37
   ========================================================== */

/* Slightly smaller saving headline, while keeping the strong impact. */
.voucher-saving{
  font-size:clamp(46px,11.1vw,56px) !important;
  line-height:.92 !important;
}

.voucher-description{
  margin-top:10px;
  font-size:21px;
  line-height:1.34;
  font-weight:500;
}

/* Keep the summary stack more evenly spaced. */
.voucher-shop-row{
  padding-top:10px !important;
}
.voucher-shop-name{
  font-weight:500 !important;
}
.voucher-media-collapsed,
.voucher-band.is-expanded .voucher-media-collapsed{
  margin-top:10px !important;
}

/* Pull the image a touch closer to the lower perforation reveal. */
.voucher-band-inner{
  padding-top:22px;
  padding-bottom:4px;
}
.voucher-band.is-expanded .voucher-band-inner{
  padding-bottom:8px;
}
.voucher-media{
  box-shadow:0 8px 18px rgba(38,37,41,.08);
}
.voucher-frequency-flash{
  right:15px;
  bottom:19px;
}

/* First and last sheets keep their own perforated outer edge, but without
   the extra strip/shadow above the first offer. */
.voucher-band.is-first-offer::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:18;
  left:0;
  right:0;
  top:0;
  height:12px;
  background:
    radial-gradient(
      circle at 14px 12px,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x !important;
  filter:none !important;
  box-shadow:none !important;
  pointer-events:none;
}

.voucher-band.is-last-offer::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:18;
  left:0;
  right:0;
  bottom:0 !important;
  height:12px !important;
  background:
    radial-gradient(
      circle at 14px 0,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x !important;
  filter:none !important;
  box-shadow:none !important;
  pointer-events:none;
}

/* Make each lower coupon appear to overlap and cover the bottom edge of the
   image above, with a faint shadow for a stronger reveal effect. */
.voucher-band:not(:last-child)::after{
  content:"" !important;
  position:absolute;
  z-index:18;
  left:0;
  right:0;
  bottom:-1px !important;
  height:20px !important;
  background:
    radial-gradient(
      circle at 14px 8px,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x,
    linear-gradient(
      180deg,
      transparent 0 8px,
      var(--voucher-next-bg) 8px 100%
    ) !important;
  box-shadow:
    0 -2px 0 rgba(255,255,255,.04),
    0 -7px 14px rgba(12,16,17,.11);
  filter:none !important;
  pointer-events:none;
}

/* Reduce the visual gap below the image so the overlap reads more clearly. */
.voucher-summary{
  padding-bottom:0;
}
.voucher-band.is-expanded .voucher-expanded-content{
  padding-top:12px !important;
}

/* Expanded state: larger voucher, much tighter whitespace around it. */
.voucher-expanded-content{
  grid-template-columns:minmax(0,1fr) minmax(260px,340px);
  align-items:start;
  gap:20px;
  padding-bottom:0 !important;
}
.voucher-business-info .voucher-address{
  margin-top:0 !important;
}
.voucher-redeem-area{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
.voucher-redeem-label{
  margin:0 auto 1px;
}
.voucher-seal-button,
.voucher-seal-button.is-static{
  width:358px;
  max-width:min(92vw,358px);
}
.voucher-seal-ready-text{
  width:39%;
  color:var(--voucher-accent-dark) !important;
  font-size:16px;
  line-height:1.02;
  font-weight:700;
  letter-spacing:.01em;
}
.voucher-seal-ready-text strong{
  margin-top:1px;
  font-size:21px;
  line-height:1;
  font-weight:900;
}
.theme-teal .voucher-seal-ready-text,
.theme-violet .voucher-seal-ready-text{
  color:var(--voucher-accent-dark) !important;
}

@media (max-width:760px){
  .voucher-expanded-content{
    grid-template-columns:1fr;
    gap:14px;
  }
  .voucher-redeem-area{
    margin-top:10px;
  }
}

@media (max-width:420px){
  .voucher-saving{
    font-size:clamp(41px,12.1vw,50px) !important;
  }
  .voucher-description{
    font-size:19.5px;
  }
  .voucher-shop-row{
    padding-top:9px !important;
  }
  .voucher-media-collapsed,
  .voucher-band.is-expanded .voucher-media-collapsed{
    margin-top:9px !important;
  }
  .voucher-frequency-flash{
    right:12px;
    bottom:16px;
  }
  .voucher-band.is-first-offer::before{
    height:11px;
    background:
      radial-gradient(
        circle at 12.5px 11px,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x !important;
  }
  .voucher-band.is-last-offer::after{
    height:11px !important;
    background:
      radial-gradient(
        circle at 12.5px 0,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x !important;
  }
  .voucher-band:not(:last-child)::after{
    height:18px !important;
    background:
      radial-gradient(
        circle at 12.5px 8px,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x,
      linear-gradient(
        180deg,
        transparent 0 8px,
        var(--voucher-next-bg) 8px 100%
      ) !important;
  }
  .voucher-band-inner{
    padding-top:20px;
    padding-bottom:3px;
  }
  .voucher-band.is-expanded .voucher-band-inner{
    padding-bottom:6px;
  }
  .voucher-seal-button,
  .voucher-seal-button.is-static{
    width:min(89vw,340px);
  }
  .voucher-seal-ready-text{
    width:40%;
    font-size:14px;
  }
  .voucher-seal-ready-text strong{
    font-size:18px;
  }
}


/* ==========================================================
   Stacked voucher sheets + tighter redemption seal — v0.38
   ========================================================== */

/* Replace the previous bottom-edge overlap. Each NEW sheet now overlaps the
   sheet above it, so the lower voucher visually sits on top of the previous
   one. The perforation dots therefore stay one consistent colour: the colour
   of the lower sheet itself. */
.voucher-band:not(:last-child)::after{
  content:none !important;
  display:none !important;
}

/* Subsequent sheets physically overlap the previous one. */
.voucher-band + .voucher-band{
  position:relative;
  margin-top:-36px !important;
  box-shadow:0 -15px 22px -14px rgba(16,20,21,.30);
}

/* Keep the content of the lower sheet below the overlap zone, while allowing
   the paper itself to cover the bottom of the photo above. */
.voucher-band + .voucher-band > .voucher-band-inner{
  padding-top:58px !important;
}

/* Top perforation belongs to the lower sheet. All scallops use exactly the
   same sheet colour, with a soft upward shadow that falls over the full-width
   sheet above (including its image). */
.voucher-band + .voucher-band::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  top:-10px;
  bottom:auto !important;
  height:12px;
  background:
    radial-gradient(
      circle at 14px 12px,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x !important;
  filter:drop-shadow(0 -6px 5px rgba(12,16,17,.18)) !important;
  box-shadow:none !important;
  pointer-events:none;
}

/* First sheet keeps a clean perforated top with no extra line/shadow. */
.voucher-band.is-first-offer::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  top:0;
  bottom:auto !important;
  height:12px;
  background:
    radial-gradient(
      circle at 14px 12px,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x !important;
  filter:none !important;
  box-shadow:none !important;
}

/* Last sheet keeps its lower perforated finish. */
.voucher-band.is-last-offer::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:30;
  left:0;
  right:0;
  bottom:0 !important;
  height:12px !important;
  background:
    radial-gradient(
      circle at 14px 0,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x !important;
  filter:none !important;
  box-shadow:none !important;
}

/* Move availability to the top-right so the lower sheet can overlap the photo
   without competing with the frequency label. */
.voucher-frequency-flash{
  top:13px !important;
  right:13px !important;
  bottom:auto !important;
}

/* Keep the closed-card photo almost flush with the overlap zone. */
.voucher-band-inner{
  padding-bottom:0 !important;
}
.voucher-band.is-expanded .voucher-band-inner{
  padding-bottom:2px !important;
}

/* Much tighter expanded redemption area. */
.voucher-expanded-content{
  gap:10px !important;
  padding-top:10px !important;
  padding-bottom:0 !important;
}
.voucher-redeem-area{
  margin-top:2px !important;
  padding:0 !important;
  gap:0 !important;
  line-height:1;
}
.voucher-redeem-label{
  margin:0 auto 2px !important;
}
.voucher-seal-button,
.voucher-seal-button.is-static{
  width:min(96vw,420px) !important;
  max-width:min(96vw,420px) !important;
  margin:0 auto !important;
}

/* "Tap to redeem" stays wholly inside the white centre and uses the same
   colour as the offer sheet behind it. */
.voucher-seal-ready-text{
  width:38% !important;
  color:var(--voucher-bg) !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}
.voucher-seal-ready-text strong{
  margin-top:1px !important;
  font-size:18px !important;
  line-height:1 !important;
}
.theme-teal .voucher-seal-ready-text,
.theme-violet .voucher-seal-ready-text{
  color:var(--voucher-bg) !important;
}

@media (max-width:760px){
  .voucher-expanded-content{
    gap:5px !important;
  }
  .voucher-redeem-area{
    margin-top:0 !important;
  }
}

@media (max-width:420px){
  .voucher-band + .voucher-band{
    margin-top:-32px !important;
    box-shadow:0 -13px 20px -13px rgba(16,20,21,.30);
  }
  .voucher-band + .voucher-band > .voucher-band-inner{
    padding-top:52px !important;
  }
  .voucher-band + .voucher-band::before{
    top:-9px;
    height:11px;
    background:
      radial-gradient(
        circle at 12.5px 11px,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x !important;
    filter:drop-shadow(0 -5px 4px rgba(12,16,17,.18)) !important;
  }
  .voucher-band.is-first-offer::before{
    height:11px;
    background:
      radial-gradient(
        circle at 12.5px 11px,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x !important;
  }
  .voucher-band.is-last-offer::after{
    height:11px !important;
    background:
      radial-gradient(
        circle at 12.5px 0,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x !important;
  }
  .voucher-frequency-flash{
    top:11px !important;
    right:11px !important;
  }
  .voucher-expanded-content{
    padding-top:7px !important;
  }
  .voucher-seal-button,
  .voucher-seal-button.is-static{
    width:min(96vw,390px) !important;
    max-width:min(96vw,390px) !important;
  }
  .voucher-seal-ready-text{
    width:38% !important;
    font-size:13px !important;
  }
  .voucher-seal-ready-text strong{
    font-size:17px !important;
  }
}

/* ==========================================================
   Clean stacked perforation system — v0.41
   Based on the v0.38 join that visually worked best.
   ========================================================== */

/* Keep the solid brand-tint sheets. */
.voucher-band.theme-teal{
  --voucher-bg:#0a8a82 !important;
  background:var(--voucher-bg) !important;
}
.voucher-band.theme-violet{
  --voucher-bg:#b58fc2 !important;
  background:var(--voucher-bg) !important;
}

/* Kill older bottom-edge perforation experiments. Every join now belongs to
   the LOWER sheet only, so its scallops are always one consistent colour. */
.voucher-band:not(:last-child)::after{
  content:none !important;
  display:none !important;
}

/* Each lower sheet overlaps the previous one and casts an upward full-width
   shadow, giving the impression that it is physically stacked on top. */
.voucher-band + .voucher-band{
  position:relative;
  z-index:3;
  margin-top:-42px !important;
  margin-bottom:0 !important;
  box-shadow:0 -16px 20px -12px rgba(13,18,19,.32) !important;
}

/* The lower sheet's top scallops protrude into the previous sheet. */
.voucher-band + .voucher-band::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  top:-10px !important;
  bottom:auto !important;
  height:12px !important;
  background:
    radial-gradient(
      circle at 14px 12px,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x !important;
  filter:none !important;
  box-shadow:none !important;
  pointer-events:none;
}

/* Restore the same protruding scallop treatment above the first sheet. */
.voucher-band.is-first-offer::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  top:-10px !important;
  bottom:auto !important;
  height:12px !important;
  background:
    radial-gradient(
      circle at 14px 12px,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x !important;
  filter:none !important;
  box-shadow:none !important;
  pointer-events:none;
}

/* And mirror it below the very last sheet, aligned to the same 28px rhythm. */
.voucher-band.is-last-offer::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  z-index:20;
  left:0;
  right:0;
  bottom:-10px !important;
  height:12px !important;
  background:
    radial-gradient(
      circle at 14px 0,
      var(--voucher-bg) 0 8px,
      transparent 8.4px
    )
    0 0 / 28px 12px repeat-x !important;
  filter:none !important;
  box-shadow:none !important;
  pointer-events:none;
}

/* Much less dead space from perforation to headline. Because the lower sheet
   already overlaps by 42px, its copy starts within that stacked overlap. */
.voucher-band-inner{
  padding-top:18px !important;
  padding-bottom:0 !important;
}
.voucher-band + .voucher-band > .voucher-band-inner{
  padding-top:36px !important;
}
.voucher-band.is-last-offer > .voucher-band-inner{
  padding-bottom:16px !important;
}
.voucher-band.is-expanded .voucher-band-inner{
  padding-bottom:4px !important;
}
.voucher-band.is-expanded.is-last-offer .voucher-band-inner{
  padding-bottom:40px !important;
}

/* Keep the text stack compact. */
.voucher-saving{
  font-size:clamp(42px,10.2vw,52px) !important;
  line-height:.93 !important;
}
.voucher-description{
  margin-top:7px !important;
}
.voucher-shop-row{
  padding-top:7px !important;
}
.voucher-media-collapsed,
.voucher-band.is-expanded .voucher-media-collapsed{
  margin-top:4px !important;
}

/* Frequency badge. */
.voucher-frequency-flash{
  top:11px !important;
  right:11px !important;
  bottom:auto !important;
  left:auto !important;
}
.voucher-frequency-flash.is-available{
  background:rgba(218,170,58,.72) !important;
  color:#fff !important;
  border-color:rgba(255,255,255,.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 7px 16px rgba(78,54,0,.17) !important;
}
.voucher-frequency-flash.is-unavailable{
  background:rgba(231,234,238,.9) !important;
  color:#68717b !important;
  border-color:rgba(211,216,222,.9) !important;
  box-shadow:0 7px 15px rgba(42,48,53,.08) !important;
}

/* Tighten the expanded redemption area and let the seal fill more width. */
.voucher-expanded-content{
  gap:5px !important;
  padding-top:5px !important;
  padding-bottom:0 !important;
}
.voucher-business-info{
  margin-bottom:0 !important;
}
.voucher-business-info p:last-child{
  margin-bottom:0 !important;
}
.voucher-redeem-area{
  margin-top:0 !important;
  padding:0 !important;
  gap:0 !important;
}
.voucher-redeem-label{
  margin:0 auto !important;
}
.voucher-seal-button,
.voucher-seal-button.is-static{
  width:min(98vw,460px) !important;
  max-width:min(98vw,460px) !important;
  margin:0 auto !important;
}
.voucher-seal-ready-text{
  width:37% !important;
  font-size:12px !important;
  line-height:1 !important;
}
.voucher-seal-ready-text strong{
  font-size:17px !important;
  line-height:1 !important;
}

@media (max-width:760px){
  .voucher-band + .voucher-band{
    margin-top:-38px !important;
  }
  .voucher-band + .voucher-band > .voucher-band-inner{
    padding-top:32px !important;
  }
  .voucher-expanded-content{
    grid-template-columns:1fr !important;
    gap:4px !important;
    padding-top:4px !important;
  }
  .voucher-seal-button,
  .voucher-seal-button.is-static{
    width:min(98vw,420px) !important;
    max-width:min(98vw,420px) !important;
  }
}

@media (max-width:420px){
  .voucher-band + .voucher-band{
    margin-top:-36px !important;
    box-shadow:0 -14px 18px -11px rgba(13,18,19,.30) !important;
  }
  .voucher-band + .voucher-band > .voucher-band-inner{
    padding-top:30px !important;
  }
  .voucher-band + .voucher-band::before,
  .voucher-band.is-first-offer::before{
    top:-9px !important;
    height:11px !important;
    background:
      radial-gradient(
        circle at 12.5px 11px,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x !important;
  }
  .voucher-band.is-last-offer::after{
    bottom:-9px !important;
    height:11px !important;
    background:
      radial-gradient(
        circle at 12.5px 0,
        var(--voucher-bg) 0 7.2px,
        transparent 7.6px
      )
      0 0 / 25px 11px repeat-x !important;
  }
  .voucher-band-inner{
    padding-top:16px !important;
  }
  .voucher-band.is-last-offer > .voucher-band-inner{
    padding-bottom:15px !important;
  }
  .voucher-saving{
    font-size:clamp(39px,11vw,47px) !important;
  }
  .voucher-media-collapsed,
  .voucher-band.is-expanded .voucher-media-collapsed{
    margin-top:3px !important;
  }
  .voucher-frequency-flash{
    top:9px !important;
    right:9px !important;
  }
  .voucher-seal-button,
  .voucher-seal-button.is-static{
    width:min(98vw,395px) !important;
    max-width:min(98vw,395px) !important;
  }
}


/* ==========================================================
   Spacing + seal crop refinement — v0.42
   ========================================================== */

/* Bring the headline slightly closer to the perforated sheet edge. */
.voucher-band-inner{
  padding-top:15px !important;
}
.voucher-band + .voucher-band > .voucher-band-inner{
  padding-top:33px !important;
}

/* Match the business-name-to-image gap to the rest of the text rhythm. */
.voucher-media-collapsed,
.voucher-band.is-expanded .voucher-media-collapsed{
  margin-top:7px !important;
}

/* Darker stacked-sheet shadow while retaining the same soft falloff. */
.voucher-band + .voucher-band{
  box-shadow:0 -17px 22px -12px rgba(13,18,19,.43) !important;
}

/* The new card-only PNGs have their transparent padding removed, so the seal
   fills the available area. Keep the layout itself extremely tight too. */
.voucher-expanded-content{
  gap:0 !important;
}
.voucher-redeem-area{
  margin-top:-2px !important;
}
.voucher-seal-button,
.voucher-seal-button.is-static{
  width:min(98vw,470px) !important;
  max-width:min(98vw,470px) !important;
}

@media (max-width:760px){
  .voucher-band + .voucher-band > .voucher-band-inner{
    padding-top:29px !important;
  }
  .voucher-seal-button,
  .voucher-seal-button.is-static{
    width:min(98vw,430px) !important;
    max-width:min(98vw,430px) !important;
  }
}

@media (max-width:420px){
  .voucher-band-inner{
    padding-top:13px !important;
  }
  .voucher-band + .voucher-band > .voucher-band-inner{
    padding-top:27px !important;
  }
  .voucher-band + .voucher-band{
    box-shadow:0 -15px 20px -11px rgba(13,18,19,.41) !important;
  }
  .voucher-media-collapsed,
  .voucher-band.is-expanded .voucher-media-collapsed{
    margin-top:7px !important;
  }
  .voucher-redeem-area{
    margin-top:-4px !important;
  }
  .voucher-seal-button,
  .voucher-seal-button.is-static{
    width:min(98vw,405px) !important;
    max-width:min(98vw,405px) !important;
  }
}

/* ==========================================================
   Offer spacing + redeem seal sizing — v0.43
   ========================================================== */

/* The first voucher needs a little more breathing room beneath its top
   perforation; every following voucher should start slightly closer to its
   perforated edge than in v0.42. */
.voucher-band.is-first-offer > .voucher-band-inner{
  padding-top:20px !important;
}
.voucher-band + .voucher-band > .voucher-band-inner{
  padding-top:29px !important;
}

/* Give the business name a clearer separation from the image. This now uses
   roughly the same visual beat as the gaps in the headline/detail stack. */
.voucher-media-collapsed,
.voucher-band.is-expanded .voucher-media-collapsed{
  margin-top:12px !important;
}

/* The tightly cropped card artwork from v0.42 is retained, but displayed at
   a slightly smaller size so the seal no longer dominates the expanded offer. */
.voucher-seal-button,
.voucher-seal-button.is-static{
  width:min(74vw,300px) !important;
  max-width:min(74vw,300px) !important;
  margin:0 auto !important;
}

/* Fill the white centre more confidently with the action wording while
   keeping it safely inside the centre circle. */
.voucher-seal-ready-text{
  width:43% !important;
  font-size:16px !important;
  line-height:1.02 !important;
  font-weight:750 !important;
  letter-spacing:.005em !important;
  color:var(--voucher-bg) !important;
}
.voucher-seal-ready-text strong{
  margin-top:1px !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:950 !important;
}
.theme-teal .voucher-seal-ready-text,
.theme-violet .voucher-seal-ready-text{
  color:var(--voucher-bg) !important;
}

/* Keep the expanded information-to-seal transition tight, but leave a little
   more room below the seal so it is not crowded by the perforation overlap. */
.voucher-expanded-content{
  gap:3px !important;
}
.voucher-redeem-area{
  margin-top:0 !important;
}
.voucher-band.is-expanded > .voucher-band-inner{
  padding-bottom:40px !important;
}
.voucher-band.is-expanded.is-last-offer > .voucher-band-inner{
  padding-bottom:44px !important;
}

@media (max-width:760px){
  .voucher-band.is-first-offer > .voucher-band-inner{
    padding-top:18px !important;
  }
  .voucher-band + .voucher-band > .voucher-band-inner{
    padding-top:25px !important;
  }
  .voucher-media-collapsed,
  .voucher-band.is-expanded .voucher-media-collapsed{
    margin-top:12px !important;
  }
  .voucher-seal-button,
  .voucher-seal-button.is-static{
    width:min(70vw,286px) !important;
    max-width:min(70vw,286px) !important;
  }
  .voucher-seal-ready-text{
    width:44% !important;
    font-size:15px !important;
  }
  .voucher-seal-ready-text strong{
    font-size:21px !important;
  }
}

@media (max-width:420px){
  .voucher-band.is-first-offer > .voucher-band-inner{
    padding-top:17px !important;
  }
  .voucher-band + .voucher-band > .voucher-band-inner{
    padding-top:23px !important;
  }
  .voucher-media-collapsed,
  .voucher-band.is-expanded .voucher-media-collapsed{
    margin-top:11px !important;
  }
  .voucher-seal-button,
  .voucher-seal-button.is-static{
    width:min(67vw,266px) !important;
    max-width:min(67vw,266px) !important;
  }
  .voucher-seal-ready-text{
    width:45% !important;
    font-size:14px !important;
  }
  .voucher-seal-ready-text strong{
    font-size:20px !important;
  }
  .voucher-band.is-expanded > .voucher-band-inner{
    padding-bottom:36px !important;
  }
  .voucher-band.is-expanded.is-last-offer > .voucher-band-inner{
    padding-bottom:40px !important;
  }
}

/* ==========================================================
   Business profile + redemption refinements — v0.46
   ========================================================== */

/* Stronger offer headline treatment. */
.voucher-saving{
  font-size:clamp(46px,10.9vw,58px) !important;
  line-height:.93 !important;
  letter-spacing:.015em !important;
}

/* Business name: stronger and more distinctive. */
.voucher-shop-name{
  font-weight:800 !important;
  font-style:italic !important;
}

/* Expanded card now reads as one vertical flow: business profile, about copy,
   then redemption seal. */
.voucher-expanded-content{
  grid-template-columns:1fr !important;
  gap:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

/* Business profile sits directly under the offer image. Logo uses the right
   half of the same card width; address/socials use the left half. */
.voucher-business-profile{
  display:grid;
  grid-template-columns:1fr;
  align-items:start;
  width:100%;
  margin:0;
  padding:0;
}
.voucher-business-profile.has-logo{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
}
.voucher-business-contact{
  min-width:0;
  padding:10px 0 0;
}
.voucher-business-logo{
  width:100%;
  min-width:0;
  min-height:48px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  margin-top:-1px;
  padding:0;
}
.voucher-business-logo img{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:96px;
  object-fit:contain;
  object-position:right top;
}

/* Clickable address capsule. It can wrap naturally within the left half when
   a business logo is present. */
.voucher-address-pill{
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:7px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  padding:9px 12px;
  margin:0;
  background:rgba(255,255,255,.16);
  color:inherit;
  text-align:left;
  font-size:14px;
  line-height:1.25;
  font-weight:650;
  box-shadow:0 6px 14px rgba(20,24,26,.08);
}
.voucher-address-pill:hover{
  background:rgba(255,255,255,.24);
}
.voucher-address-pin{
  flex:0 0 auto;
  font-size:17px;
  line-height:1;
  transform:translateY(1px);
}
.theme-teal .voucher-address-pill{
  color:#fff;
}
.theme-violet .voucher-address-pill{
  color:#302534;
  border-color:rgba(48,37,52,.16);
  background:rgba(255,255,255,.24);
}

/* Social links appear as compact circular icons beneath the address. */
.voucher-social-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:9px;
}
.voucher-social-link{
  width:34px;
  height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-size:15px;
  line-height:1;
  font-weight:900;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.30);
  color:inherit;
  box-shadow:0 5px 12px rgba(20,24,26,.07);
}
.voucher-social-link:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.28);
}
.theme-teal .voucher-social-link{
  color:#fff;
}
.theme-violet .voucher-social-link{
  color:#302534;
  border-color:rgba(48,37,52,.14);
  background:rgba(255,255,255,.26);
}

/* No 'About this business' label: just the useful copy. */
.voucher-about-text{
  margin:12px 0 0 !important;
  font-size:17px;
  line-height:1.42;
  font-weight:500;
}
.voucher-about-placeholder{
  opacity:.78;
  font-style:italic;
}
.voucher-about-heading,
.voucher-business-info{
  display:none !important;
}

/* Active/member-required states no longer need explanatory copy above the
   seal. The active timer or Join now message lives inside the seal itself. */
.voucher-redeem-area.is-active .voucher-redeem-label,
.voucher-redeem-area.is-membership .voucher-redeem-label{
  display:none !important;
}
.voucher-seal-join-text{
  width:44% !important;
}
.voucher-seal-join-text strong{
  margin:0 !important;
  font-size:23px !important;
  line-height:1 !important;
}

/* Ensure the seal clears the lower stacked-sheet overlap comfortably. */
.voucher-band.is-expanded > .voucher-band-inner{
  padding-bottom:58px !important;
}
.voucher-band.is-expanded.is-last-offer > .voucher-band-inner{
  padding-bottom:30px !important;
}

/* Google Maps location overlay. */
body.has-business-map-overlay{
  overflow:hidden;
}
.business-map-overlay{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:20px;
}
.business-map-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(12,18,20,.58);
  backdrop-filter:blur(2px);
}
.business-map-panel{
  position:relative;
  z-index:1;
  width:min(94vw,620px);
  max-height:90vh;
  overflow:auto;
  border-radius:24px;
  background:rgba(255,255,255,.97);
  box-shadow:0 24px 70px rgba(0,0,0,.34);
  padding:18px;
}
.business-map-close{
  display:block;
  margin:0 auto 12px;
  border:0;
  border-radius:999px;
  padding:9px 15px;
  background:#0a8a82;
  color:#fff;
  font-weight:850;
}
.business-map-heading{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-bottom:12px;
  text-align:center;
}
.business-map-heading strong{
  font-size:20px;
}
.business-map-heading span{
  font-size:14px;
  color:#59616a;
}
.business-map-frame-wrap{
  width:100%;
  height:min(58vh,470px);
  border-radius:18px;
  overflow:hidden;
  background:#eceff1;
}
.business-map-frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
}
.business-map-open-link{
  display:block;
  margin:12px auto 0;
  width:max-content;
  max-width:100%;
  border-radius:999px;
  padding:9px 14px;
  background:#f0f6f5;
  color:#006f68;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}

/* Operator business profile fields. */
.operator-business-socials{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.operator-business-socials h2{
  margin:0 0 5px;
  font-size:20px;
  letter-spacing:-.02em;
}
.operator-logo-input{
  padding:11px 12px !important;
  font-size:14px !important;
}
.operator-business-logo-preview{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px;
  margin-bottom:10px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#faf9f6;
}
.operator-business-logo-preview img{
  display:block;
  width:auto;
  max-width:60%;
  height:auto;
  max-height:82px;
  object-fit:contain;
}
.operator-logo-remove{
  border:1px solid #efc3bd;
  border-radius:999px;
  padding:8px 11px;
  background:#fff;
  color:#b42318;
  font-weight:800;
  white-space:nowrap;
}

@media (max-width:760px){
  .voucher-saving{
    font-size:clamp(43px,11.2vw,52px) !important;
    letter-spacing:.013em !important;
  }
  .voucher-business-profile.has-logo{
    gap:10px;
  }
  .voucher-business-contact{
    padding-top:9px;
  }
  .voucher-business-logo img{
    max-height:88px;
  }
  .voucher-about-text{
    font-size:16px;
    margin-top:10px !important;
  }
  .voucher-band.is-expanded > .voucher-band-inner{
    padding-bottom:54px !important;
  }
  .voucher-band.is-expanded.is-last-offer > .voucher-band-inner{
    padding-bottom:28px !important;
  }
}

@media (max-width:420px){
  .voucher-saving{
    font-size:clamp(41px,11.7vw,49px) !important;
  }
  .voucher-business-profile.has-logo{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px;
  }
  .voucher-address-pill{
    padding:8px 10px;
    font-size:13px;
  }
  .voucher-social-link{
    width:32px;
    height:32px;
    font-size:14px;
  }
  .voucher-business-logo img{
    max-height:78px;
  }
  .voucher-about-text{
    font-size:15.5px;
  }
  .voucher-band.is-expanded > .voucher-band-inner{
    padding-bottom:50px !important;
  }
  .voucher-band.is-expanded.is-last-offer > .voucher-band-inner{
    padding-bottom:26px !important;
  }
  .business-map-overlay{
    padding:10px;
  }
  .business-map-panel{
    width:96vw;
    padding:14px;
    border-radius:20px;
  }
  .business-map-frame-wrap{
    height:56vh;
  }
  .operator-business-logo-preview{
    align-items:flex-start;
    flex-direction:column;
  }
  .operator-business-logo-preview img{
    max-width:100%;
  }
}

/* ==========================================================
   Business information overlay + availability flash — v0.47
   ========================================================== */

/* Slightly darker stacked voucher shadow, retaining the same soft falloff. */
.voucher-band + .voucher-band{
  box-shadow:0 -18px 24px -12px rgba(13,18,19,.54) !important;
}

@media (max-width:420px){
  .voucher-band + .voucher-band{
    box-shadow:0 -16px 22px -11px rgba(13,18,19,.51) !important;
  }
}

/* Availability wording can be longer than the old frequency label. */
.voucher-frequency-flash{
  max-width:calc(100% - 22px);
  white-space:normal;
  text-align:center;
  line-height:1.12;
}

/* The expanded voucher now keeps business detail deliberately minimal. */
.voucher-business-profile{
  display:block !important;
}
.voucher-business-contact{
  width:100%;
  padding-top:10px;
}
.voucher-more-business-button{
  width:100%;
  display:block;
  margin:9px 0 0;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  padding:10px 13px;
  background:rgba(255,255,255,.13);
  color:inherit;
  text-align:center;
  font-size:20px;
  line-height:1.2;
  font-weight:800;
  box-shadow:0 6px 14px rgba(20,24,26,.07);
}
.voucher-more-business-button:hover{
  background:rgba(255,255,255,.24);
}
.theme-teal .voucher-more-business-button{
  color:#fff;
}
.theme-violet .voucher-more-business-button{
  color:#302534;
  border-color:rgba(48,37,52,.16);
  background:rgba(255,255,255,.22);
}
.theme-violet .voucher-more-business-button:hover{
  background:rgba(255,255,255,.34);
}

/* Business profile overlay. */
body.has-business-info-overlay{
  overflow:hidden;
}
.business-info-overlay{
  position:fixed;
  inset:0;
  z-index:1250;
  display:grid;
  place-items:center;
  padding:20px;
}
.business-info-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(12,18,20,.66);
  backdrop-filter:blur(3px);
}
.business-info-panel{
  position:relative;
  z-index:1;
  width:min(94vw,620px);
  max-height:90vh;
  overflow:auto;
  border-radius:26px;
  background:#fff;
  color:var(--ink);
  box-shadow:0 26px 78px rgba(0,0,0,.40);
  padding:22px;
}
.business-info-close{
  position:absolute;
  top:12px;
  right:12px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#f1f1ef;
  color:#25282c;
  font-size:25px;
  line-height:1;
  font-weight:700;
  z-index:3;
}
.business-info-heading{
  padding:0 48px;
  margin-bottom:12px;
  text-align:center;
}
.business-info-heading h2{
  margin:12px 0 0;
  font-size:29px;
  line-height:1.06;
  letter-spacing:-.03em;
  text-align:center;
}
.business-info-logo{
  display:block;
  width:auto;
  max-width:min(78%,320px);
  max-height:138px;
  margin:0 auto;
  object-fit:contain;
  object-position:center;
}
.business-info-contacts{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  margin:0 0 18px;
  text-align:center;
}
.business-info-contact{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  max-width:100%;
  color:#343a40;
  text-decoration:none;
  line-height:1.25;
}
.business-info-contact span{
  font-size:12px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8a8f95;
}
.business-info-contact strong{
  margin-top:1px;
  max-width:100%;
  font-size:14px;
  line-height:1.3;
  font-weight:750;
  overflow-wrap:anywhere;
}
.business-info-contact:hover strong{
  text-decoration:underline;
}
.business-info-carousel{
  width:100%;
  touch-action:pan-y;
  user-select:none;
}
.business-info-carousel-stage{
  position:relative;
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-radius:19px;
  background:#ece9e2;
}
.business-info-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  opacity:0;
  transform:translateX(3%);
  transition:opacity .42s ease, transform .42s ease;
  pointer-events:none;
}
.business-info-slide.is-active{
  opacity:1;
  transform:translateX(0);
}
.business-info-photo-placeholder{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  color:#7a7f85;
  text-align:center;
  font-size:15px;
  font-weight:750;
  background:linear-gradient(145deg,#f2f0eb,#e4e1d9);
}
.business-info-carousel-dots{
  display:flex;
  justify-content:center;
  gap:7px;
  margin:10px 0 0;
}
.business-info-carousel-dot{
  width:9px;
  height:9px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#c8c9ca;
}
.business-info-carousel-dot.is-active{
  background:#22272b;
  transform:scale(1.18);
}
.business-overlay-social-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:9px;
  margin:18px 0 0;
}
.business-overlay-social-link{
  min-width:58px;
  min-height:58px;
  flex:0 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:8px 10px;
  border:1px solid #e2dfd8;
  border-radius:15px;
  background:#faf9f6;
  color:#25282c;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(20,24,26,.06);
}
.business-overlay-social-link span{
  display:grid;
  place-items:center;
  font-size:23px;
  line-height:1;
  font-weight:900;
}
.business-overlay-social-link svg,
.voucher-social-link svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.business-overlay-social-link svg .instagram-dot,
.voucher-social-link svg .instagram-dot{
  fill:currentColor;
  stroke:none;
}
.business-overlay-social-link small{
  font-size:10px;
  line-height:1;
  font-weight:800;
}
.business-overlay-social-link:hover{
  background:#f1f0ec;
  transform:translateY(-1px);
}
.business-info-about{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.business-info-about h3{
  margin:0 0 8px;
  font-size:20px;
  letter-spacing:-.02em;
}
.business-info-about p{
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:#4e555c;
}

/* Business contact details on the operator business form. */
.operator-business-contacts{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.operator-business-contacts h2{
  margin:0 0 4px;
  font-size:20px;
  letter-spacing:-.02em;
}
.operator-business-contacts > .help{
  margin:0 0 8px;
}

/* Three business profile photos on the operator business form. */
.operator-business-images{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.operator-business-images h2{
  margin:0 0 5px;
  font-size:20px;
  letter-spacing:-.02em;
}
.operator-business-image-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:13px;
}
.operator-business-image-field{
  min-width:0;
  padding:11px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#faf9f6;
}
.operator-business-image-field .form-label{
  margin-top:0;
}
.operator-business-image-preview{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:9px;
}
.operator-business-image-preview img{
  display:block;
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:11px;
  object-fit:cover;
  background:#ece9e2;
}
.operator-business-image-preview .operator-logo-remove{
  align-self:flex-start;
}

@media (max-width:760px){
  .business-info-overlay{
    padding:12px;
  }
  .business-info-panel{
    width:min(96vw,580px);
    padding:18px;
    border-radius:22px;
  }
  .business-info-heading h2{
    font-size:24px;
  }
  .business-info-logo{
    max-width:62%;
    max-height:82px;
  }
  .business-overlay-social-link{
    min-width:54px;
    min-height:54px;
  }
  .operator-business-image-grid{
    grid-template-columns:1fr;
  }
  .operator-business-image-field{
    padding:12px;
  }
  .operator-business-image-preview img{
    aspect-ratio:16 / 9;
  }
}

@media (max-width:420px){
  .voucher-frequency-flash{
    max-width:calc(100% - 18px);
    font-size:11px !important;
  }
  .voucher-more-business-button{
    padding:9px 11px;
    font-size:13px;
  }
  .business-info-overlay{
    padding:8px;
  }
  .business-info-panel{
    width:97vw;
    padding:15px;
    border-radius:20px;
  }
  .business-info-close{
    top:9px;
    right:9px;
    width:39px;
    height:39px;
  }
  .business-info-heading{
    padding:0 44px;
  }
  .business-info-heading h2{
    font-size:24px;
  }
  .business-info-logo{
    max-width:min(82%,280px);
    max-height:118px;
  }
  .business-info-contact strong{
    font-size:13px;
  }
  .business-info-carousel-stage{
    border-radius:15px;
  }
  .business-overlay-social-row{
    gap:7px;
  }
  .business-overlay-social-link{
    min-width:51px;
    min-height:51px;
    padding:7px 8px;
  }
  .business-overlay-social-link span{
    font-size:21px;
  }
  .business-info-about p{
    font-size:15px;
  }
}

@media (prefers-reduced-motion:reduce){
  .business-info-slide{
    transition:none;
  }
}

/* =====================================================
   Business overlay contact + photo editor refinements
   ===================================================== */

/* Keep the business identity prominent and centred. */
.business-info-heading{
  text-align:center;
  padding:0 48px;
  margin-bottom:10px;
}
.business-info-heading h2{
  text-align:center;
  font-size:31px;
  margin:13px 0 0;
}
.business-info-logo{
  width:auto;
  max-width:min(88%,380px);
  max-height:185px;
  margin:0 auto;
  object-fit:contain;
  object-position:center;
}

/* Website first, without a label; phone/email are larger single-line rows. */
.business-info-contacts{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  margin:2px 0 20px;
  text-align:center;
}
.business-info-website{
  display:block;
  max-width:100%;
  margin:0 0 2px;
  color:#242a2f;
  text-decoration:none;
  font-size:22px;
  line-height:1.22;
  font-weight:850;
  letter-spacing:-.018em;
  overflow-wrap:anywhere;
}
.business-info-website:hover{
  text-decoration:underline;
}
.business-info-contact{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:baseline;
  gap:9px;
  max-width:100%;
  color:#343a40;
  text-decoration:none;
  line-height:1.25;
}
.business-info-contact span{
  flex:0 0 auto;
  font-size:20px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:0;
  text-transform:none;
  color:#697078;
}
.business-info-contact strong{
  min-width:0;
  margin:0;
  max-width:100%;
  font-size:20px;
  line-height:1.25;
  font-weight:800;
  overflow-wrap:anywhere;
}
.business-info-contact:hover strong{
  text-decoration:underline;
}

/* Social links stay optically centred across the overlay. */
.business-overlay-social-row{
  justify-content:center;
  width:100%;
}
.business-overlay-social-link svg,
.voucher-social-link svg{
  stroke-width:2;
}

/* One multi-photo picker feeding three crop-capable slots. */
.operator-business-photo-button{
  display:inline-flex;
  margin-top:12px;
}
.operator-business-photo-status{
  margin:8px 0 0;
  font-weight:750;
}
.operator-business-photo-status.is-warning{
  color:#9b4a15;
}
.operator-business-image-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:13px;
}
.operator-business-image-field{
  min-width:0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#faf9f6;
}
.operator-business-image-slot-label{
  margin:0 0 7px;
  font-size:12px;
  font-weight:850;
  color:var(--muted);
}
.operator-business-image-edit{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:16 / 10;
  padding:0;
  overflow:hidden;
  border:1px solid #ddd8ce;
  border-radius:12px;
  background:#ece9e2;
  color:#555d64;
  text-align:center;
}
.operator-business-image-edit:not(:disabled){
  cursor:pointer;
}
.operator-business-image-edit:disabled{
  cursor:default;
  opacity:1;
}
.operator-business-image-edit img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.operator-business-image-placeholder{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:10px;
  font-size:12px;
  font-weight:800;
  color:#7b8085;
}
.operator-business-image-edit-hint{
  position:absolute;
  left:50%;
  bottom:7px;
  transform:translateX(-50%);
  z-index:2;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(0,0,0,.62);
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  pointer-events:none;
}
.operator-business-image-edit:disabled .operator-business-image-edit-hint{
  display:none;
}
.operator-business-image-field .operator-logo-remove{
  margin-top:8px;
}
.operator-business-draft-remove[hidden]{
  display:none !important;
}

/* Business photo cropper deliberately mirrors the offer cropper interaction. */
.operator-business-crop-editor{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:17px;
  background:#f8f5f8;
}
.operator-business-crop-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:5px 12px;
  margin-bottom:10px;
}
.operator-business-crop-heading strong{
  font-size:15px;
}
.operator-business-crop-heading > span{
  color:var(--muted);
  font-size:11px;
  font-weight:700;
}
.operator-business-crop-preview{
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border-radius:14px;
  background:#ece9e2;
}
.operator-business-crop-preview .operator-crop-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  touch-action:none;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.operator-business-crop-preview.is-dragging .operator-crop-canvas{
  cursor:grabbing;
}
.operator-business-crop-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:11px;
}
.operator-business-crop-apply,
.operator-business-crop-cancel{
  min-height:44px;
  border-radius:13px;
  padding:10px 12px;
  font-weight:850;
}
.operator-business-crop-apply{
  border:0;
  background:var(--brand);
  color:#fff;
}
.operator-business-crop-cancel{
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
}

@media (max-width:760px){
  .business-info-logo{
    max-width:min(86%,340px);
    max-height:165px;
  }
  .business-info-heading h2{
    font-size:28px;
  }
  .business-info-website{
    font-size:21px;
  }
  .business-info-contact span{
    font-size:14px;
  }
  .business-info-contact strong{
    font-size:19px;
  }
  .operator-business-image-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:520px){
  .operator-business-image-grid{
    grid-template-columns:1fr;
  }
  .operator-business-image-edit{
    aspect-ratio:16 / 10;
  }
  .operator-business-image-slot-label{
    font-size:13px;
  }
}

@media (max-width:420px){
  .business-info-heading{
    padding:0 42px;
  }
  .business-info-logo{
    max-width:min(90%,315px);
    max-height:155px;
  }
  .business-info-heading h2{
    font-size:27px;
  }
  .business-info-website{
    font-size:20px;
  }
  .business-info-contact{
    gap:7px;
  }
  .business-info-contact span{
    font-size:13px;
  }
  .business-info-contact strong{
    font-size:18px;
  }
  .operator-business-crop-actions{
    grid-template-columns:1fr;
  }
}

/* ==========================================================
   Business overlay + address refinements — v0.49
   ========================================================== */

/* Shorter overlay, leaving more of the app visible above and below it. */
.business-info-overlay{
  padding:clamp(34px,8vh,72px) 10px;
}
.business-info-panel{
  width:min(96vw,660px);
  max-height:82vh;
  max-height:82dvh;
  padding:18px 18px 0;
  overflow-x:hidden;
}

/* Give long business names almost the full width of the overlay. */
.business-info-heading{
  width:100%;
  padding:0 10px;
  margin-bottom:9px;
}
.business-info-heading h2{
  width:100%;
  max-width:none;
  margin:10px auto 0;
  font-size:clamp(26px,6.7vw,32px);
  line-height:1.04;
  letter-spacing:-.035em;
  text-align:center;
  overflow-wrap:normal;
  word-break:normal;
}
.business-info-logo{
  max-width:min(90%,390px);
  max-height:165px;
}

/* Centred address pills with a larger map-pin icon. */
.voucher-address-pill{
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  text-align:center;
  font-size:15px;
  line-height:1.24;
  font-weight:750;
}
.voucher-address-pill > span:last-child{
  text-align:center;
}
.voucher-address-pin,
.business-info-address-pin{
  flex:0 0 auto;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  line-height:1;
  transform:none;
}
.voucher-address-pin svg,
.business-info-address-pin svg{
  display:block;
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.business-info-address-pill{
  width:min(100%,520px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0 auto 9px;
  padding:9px 14px;
  border:1px solid #ddd9d1;
  border-radius:999px;
  background:#f7f5f0;
  color:#30363b;
  text-align:center;
  font-size:15px;
  line-height:1.25;
  font-weight:800;
  box-shadow:0 5px 12px rgba(20,24,26,.05);
}
.business-info-address-pill:hover{
  background:#efede7;
}

/* Reduce the gap between the offer image and its address. */
.voucher-band.is-expanded .voucher-expanded-content{
  padding-top:4px !important;
}
.voucher-business-contact{
  padding-top:3px !important;
}

.business-info-contacts{
  margin:0 0 14px;
  gap:6px;
}

/* Replace the plain rule below the social icons with a voucher-style
   perforated transition into the themed About section. */
.business-info-overlay.theme-teal{
  --business-voucher-bg:#007a72;
}
.business-info-overlay.theme-violet{
  --business-voucher-bg:#b889bd;
}
.business-info-about{
  position:relative;
  margin:23px -18px 0;
  padding:25px 22px 22px;
  border-top:0 !important;
  background:var(--business-voucher-bg,#007a72);
  color:#fff;
}
.business-info-about::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-1px;
  height:10px;
  background:
    radial-gradient(
      circle at 50% 0,
      #fff 0 7.9px,
      transparent 8.4px
    ) left top / 28px 10px repeat-x;
  pointer-events:none;
}
.business-info-about h3{
  margin:0 0 8px;
  color:#fff;
  font-size:20px;
  font-weight:900;
}
.business-info-about p{
  margin:0;
  color:#fff;
  font-size:18px;
  line-height:1.5;
  font-weight:600;
}

@media (max-width:760px){
  .business-info-overlay{
    padding:clamp(34px,8vh,62px) 8px;
  }
  .business-info-panel{
    width:97vw;
    max-height:82vh;
    max-height:82dvh;
    padding:16px 16px 0;
    border-radius:21px;
  }
  .business-info-heading{
    padding:0 7px;
  }
  .business-info-logo{
    max-width:min(88%,340px);
    max-height:145px;
  }
  .business-info-about{
    margin-left:-16px;
    margin-right:-16px;
    padding-left:19px;
    padding-right:19px;
  }
}

@media (max-width:420px){
  .business-info-overlay{
    padding:42px 6px;
  }
  .business-info-panel{
    width:98vw;
    max-height:80vh;
    max-height:80dvh;
    padding:14px 14px 0;
  }
  .business-info-heading{
    padding:0 4px;
  }
  .business-info-heading h2{
    font-size:clamp(25px,7.5vw,30px);
  }
  .business-info-logo{
    max-width:min(90%,315px);
    max-height:132px;
  }
  .voucher-address-pill{
    padding:8px 10px;
    font-size:14.5px;
  }
  .voucher-address-pin,
  .business-info-address-pin,
  .voucher-address-pin svg,
  .business-info-address-pin svg{
    width:21px;
    height:21px;
  }
  .business-info-address-pill{
    padding:8px 11px;
    font-size:14.5px;
  }
  .business-info-about{
    margin-left:-14px;
    margin-right:-14px;
    padding:24px 17px 20px;
  }
  .business-info-about p{
    font-size:17px;
    line-height:1.48;
    font-weight:600;
  }
}


/* =====================================================
   Business overlay contact colours + address pill
   2026-09-04 refinement
   ===================================================== */
.business-info-website{
  color:#007a72 !important;
}
.business-info-contact,
.business-info-contact span,
.business-info-contact strong{
  color:#007a72 !important;
}
.business-info-address-pill{
  background:#fff1ed !important;
  border-color:#f0d9d4 !important;
}
.business-info-address-pill:hover{
  background:#fde8e2 !important;
}

/* =====================================================
   Offer category filters + operator category controls
   ===================================================== */
.offer-category-filter-wrap{
  position:sticky;
  top:0;
  z-index:900;
  width:calc(100% + 36px);
  max-width:none;
  margin:4px -18px 15px;
  padding:7px 18px 5px;
  background:var(--paper);
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.offer-category-filter-wrap::before,
.offer-category-filter-wrap::after{
  position:absolute;
  top:7px;
  bottom:5px;
  z-index:3;
  width:38px;
  display:flex;
  align-items:center;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:27px;
  font-weight:800;
  color:#007a72;
  pointer-events:none;
  opacity:0;
  transition:opacity .14s ease;
}
.offer-category-filter-wrap::before{
  content:"‹";
  left:8px;
  justify-content:flex-start;
  padding-left:7px;
  background:linear-gradient(90deg,rgba(247,245,240,1) 38%,rgba(247,245,240,.82) 66%,rgba(247,245,240,0));
}
.offer-category-filter-wrap::after{
  content:"›";
  right:8px;
  justify-content:flex-end;
  padding-right:7px;
  background:linear-gradient(270deg,rgba(247,245,240,1) 38%,rgba(247,245,240,.82) 66%,rgba(247,245,240,0));
}
.offer-category-filter-wrap.can-scroll-left::before,
.offer-category-filter-wrap.can-scroll-right::after{
  opacity:1;
}
.offer-category-filter{
  display:flex;
  gap:9px;
  overflow-x:auto;
  padding:3px 1px 8px;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.offer-category-filter::-webkit-scrollbar{
  display:none;
}
.offer-category-pill{
  flex:0 0 auto;
  scroll-snap-align:start;
  border:1.5px solid #b9d8d4;
  border-radius:999px;
  background:#fff;
  color:#007a72;
  padding:9px 14px;
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:14px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 3px 8px rgba(20,20,20,.04);
}
.offer-category-pill:hover{
  background:#eff8f7;
}
.offer-category-pill.is-active{
  border-color:#007a72;
  background:#007a72;
  color:#fff;
  box-shadow:0 5px 12px rgba(0,122,114,.20);
}
.offer-category-count{
  font-weight:700;
  opacity:.82;
}
.category-empty-state{
  text-align:center;
  margin-top:10px;
}
.operator-category-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  align-items:start;
}
.operator-category-pair .form-label{
  margin-top:17px;
}
@media (max-width:420px){
  .offer-category-filter-wrap{
    margin-left:-18px;
    margin-right:-18px;
  }
  .offer-category-pill{
    padding:9px 13px;
    font-size:13.5px;
  }
  .operator-category-pair{
    grid-template-columns:1fr;
    gap:0;
  }
}

/* Offer-specific and standard terms — v0.49 */
.voucher-offer-terms{
  grid-column:1 / -1;
  width:100%;
  margin:10px 0 0;
  padding:0 5px 4px;
  text-align:left;
  font-size:12.5px;
  line-height:1.42;
  color:rgba(255,255,255,.94);
}
.voucher-offer-terms > div + div{
  margin-top:6px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.22);
}
.voucher-offer-terms strong{
  color:#fff;
  font-weight:850;
}
.operator-smallprint-input{
  min-height:82px;
}
.redemption-offer-terms{
  width:min(86vw,520px);
  margin:14px auto 0;
  padding:0 4px 4px;
  color:rgba(255,255,255,.94);
  font-size:12.5px;
  line-height:1.42;
  text-align:left;
}
.redemption-offer-terms > div + div{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.22);
}
.redemption-offer-terms strong{
  color:#fff;
  font-weight:850;
}
@media (max-width:420px){
  .voucher-offer-terms{font-size:12px}
  .redemption-offer-terms{
    width:min(88vw,430px);
    font-size:12px;
  }
}


/* =====================================================
   Live redemption overlay overflow + spacing refinement
   2026-09-04
   ===================================================== */

/* Keep the translucent redemption backdrop covering the viewport while the
   overlay itself scrolls, so overflow content never drops onto a clear area. */
.redemption-overlay-backdrop,
.redemption-overlay.theme-teal .redemption-overlay-backdrop,
.redemption-overlay.theme-violet .redemption-overlay-backdrop{
  position:fixed !important;
  inset:0 !important;
}

.redemption-overlay{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  padding-top:calc(58px + env(safe-area-inset-top)) !important;
  padding-bottom:calc(18px + env(safe-area-inset-bottom)) !important;
}

/* Do not vertically centre an overlay that is taller than the viewport.
   Starting at the top makes every part, including the terms, reachable by
   scrolling and keeps the close control clear of the voucher seal. */
.redemption-overlay-stage{
  justify-content:flex-start !important;
  min-height:100% !important;
  padding:4px 0 calc(30px + env(safe-area-inset-bottom)) !important;
  gap:0 !important;
}

/* Bring the live gold information panel closer to the voucher circle. */
.redemption-overlay.is-live-overlay .redemption-overlay-info{
  margin-top:-12px !important;
}

/* The instruction inside the gold box is intentionally short and prominent. */
.redemption-overlay.is-live-overlay .redemption-overlay-smallprint{
  margin-top:12px !important;
  padding-top:10px !important;
  color:#fffdf1 !important;
  font-size:17px !important;
  line-height:1.22 !important;
  font-weight:900 !important;
  letter-spacing:.005em;
}

/* Ensure the offer-specific/standard terms remain fully reachable at the end
   of a long live redemption overlay. */
.redemption-overlay .redemption-offer-terms{
  flex:0 0 auto;
  margin-top:16px !important;
  padding-bottom:22px !important;
}

@media (max-width:420px){
  .redemption-overlay{
    padding-top:calc(60px + env(safe-area-inset-top)) !important;
  }
  .redemption-overlay.is-live-overlay .redemption-overlay-info{
    margin-top:-14px !important;
  }
  .redemption-overlay.is-live-overlay .redemption-overlay-smallprint{
    font-size:16.5px !important;
  }
  .redemption-overlay .redemption-offer-terms{
    padding-bottom:28px !important;
  }
}

/* =====================================================
   Category bar: full viewport-width background
   2026-09-04 refinement
   ===================================================== */
.offer-category-filter-wrap{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:7px 0 5px !important;
  background:var(--paper) !important;
}
.offer-category-filter{
  width:min(480px,100vw);
  max-width:480px;
  margin:0 auto;
  padding:3px 18px 8px;
}
.offer-category-filter-wrap::before{
  left:max(8px,calc(50% - 240px + 8px)) !important;
}
.offer-category-filter-wrap::after{
  right:max(8px,calc(50% - 240px + 8px)) !important;
}
@media (max-width:480px){
  .offer-category-filter{
    width:100%;
    max-width:none;
  }
  .offer-category-filter-wrap::before{
    left:8px !important;
  }
  .offer-category-filter-wrap::after{
    right:8px !important;
  }
}


/* ==========================================================
   Redemption overlay close control — top-right ×
   ========================================================== */
.redemption-overlay-close{
  left:auto !important;
  right:calc(14px + env(safe-area-inset-right)) !important;
  transform:none !important;
  top:calc(12px + env(safe-area-inset-top)) !important;
  width:42px;
  height:42px;
  min-height:42px;
  padding:0 !important;
  display:grid;
  place-items:center;
  border-radius:50%;
  gap:0;
}
.redemption-overlay-close span{
  display:block;
  font-size:29px;
  line-height:1;
  font-weight:500;
  transform:translateY(-1px);
}
@media (max-width:420px){
  .redemption-overlay-close{
    right:calc(10px + env(safe-area-inset-right)) !important;
    width:40px;
    height:40px;
    min-height:40px;
  }
}

/* =====================================================
   Category bar full-bleed + unobstructed scroll hints
   2026-09-04 correction
   ===================================================== */
.offer-category-filter-wrap{
  width:auto !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  padding:7px 0 5px !important;
  background:var(--paper) !important;
  box-shadow:none !important;
}

.offer-category-filter{
  width:min(480px,100vw) !important;
  max-width:480px !important;
  margin:0 auto !important;
  padding:3px 12px 8px !important;
}

/* On wider screens the hint arrows sit in the full-width gutter, outside
   the pill scroller, so they never cover category labels. */
@media (min-width:541px){
  .offer-category-filter-wrap::before,
  .offer-category-filter-wrap::after{
    top:7px !important;
    bottom:5px !important;
    width:30px !important;
    padding:0 !important;
    justify-content:center !important;
    background:none !important;
    font-size:29px !important;
  }
  .offer-category-filter-wrap::before{
    left:calc(50% - 270px) !important;
  }
  .offer-category-filter-wrap::after{
    right:calc(50% - 270px) !important;
  }
}

/* On phones there is no outside gutter, so reserve space inside the
   horizontal scroller for the arrows instead of laying them over pills. */
@media (max-width:540px){
  .offer-category-filter{
    width:100% !important;
    max-width:none !important;
    padding-left:46px !important;
    padding-right:46px !important;
  }
  .offer-category-filter-wrap::before,
  .offer-category-filter-wrap::after{
    width:42px !important;
    padding:0 !important;
    justify-content:center !important;
  }
  .offer-category-filter-wrap::before{
    left:0 !important;
    background:linear-gradient(90deg,var(--paper) 62%,rgba(247,245,240,0)) !important;
  }
  .offer-category-filter-wrap::after{
    right:0 !important;
    background:linear-gradient(270deg,var(--paper) 62%,rgba(247,245,240,0)) !important;
  }
}

/* =====================================================
   Mobile category start-edge protection
   Keeps the first pill clear of the left scroll hint.
   ===================================================== */
@media (max-width:540px){
  .offer-category-filter{
    scroll-padding-left:50px !important;
    scroll-padding-right:50px !important;
  }
}

/* =====================================================
   Business offer approval / interactive preview
   ===================================================== */
.offer-review-page{
  padding:4px 0 36px;
}
.offer-review-brand{
  display:flex;
  justify-content:center;
  padding:8px 10px 10px;
}
.offer-review-brand img{
  display:block;
  width:min(270px,72vw);
  height:auto;
}
.offer-review-intro{
  text-align:center;
  padding:8px 14px 20px;
}
.offer-review-intro .eyebrow{
  color:var(--brand);
}
.offer-review-intro h1{
  margin:7px 0 10px;
  font-size:31px;
  line-height:1.05;
  letter-spacing:-.035em;
}
.offer-review-intro p{
  max-width:430px;
  margin:0 auto;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}
.offer-review-preview-note{
  display:inline-block;
  margin-top:14px;
  border-radius:999px;
  padding:8px 12px;
  background:#fff1ed;
  color:#8a3028;
  font-size:12px;
  line-height:1.25;
  font-weight:800;
}
.offer-review-phone-wrap{
  display:flex;
  justify-content:center;
  padding:4px 0 22px;
}
.offer-review-phone{
  position:relative;
  width:414px;
  max-width:calc(100vw - 34px);
  padding:14px;
  border-radius:48px;
  background:#14171b;
  box-shadow:0 28px 70px rgba(20,20,20,.28);
}
.offer-review-phone-speaker{
  position:absolute;
  z-index:5;
  left:50%;
  top:8px;
  width:82px;
  height:7px;
  transform:translateX(-50%);
  border-radius:999px;
  background:#30343a;
}
.offer-review-phone-screen{
  position:relative;
  height:min(760px,76vh);
  min-height:620px;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  border-radius:36px;
  background:var(--paper);
  overscroll-behavior:contain;
}
.offer-review-phone-app{
  min-height:100%;
  padding:24px 13px 42px;
}
.offer-review-phone-logo{
  display:flex;
  justify-content:center;
  padding:3px 10px 7px;
}
.offer-review-phone-logo img{
  width:205px;
  max-width:72%;
  height:auto;
}
.offer-review-phone-preview-label{
  margin:3px auto 13px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:850;
}
.offer-review-phone-screen .voucher-band{
  margin-left:0;
  margin-right:0;
}
.offer-review-actions{
  margin:0 auto;
  width:min(100%,440px);
  padding:20px 18px 24px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#fff;
  box-shadow:0 12px 32px rgba(20,20,20,.07);
}
.offer-review-actions h2{
  margin:0 0 7px;
  font-size:23px;
  line-height:1.1;
  letter-spacing:-.025em;
}
.offer-review-change-button{
  margin-top:9px;
}
.offer-review-feedback-form{
  margin-top:18px;
  padding-top:17px;
  border-top:1px solid var(--line);
}
.offer-review-feedback-form .btn{
  margin-top:16px;
}
.offer-review-image-preview{
  margin-top:10px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:15px;
  background:#f7f5f0;
}
.offer-review-image-preview img{
  display:block;
  width:100%;
  max-height:240px;
  object-fit:contain;
}
.offer-review-result{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:3px;
  padding:15px 16px;
  border-radius:16px;
  font-size:13px;
  line-height:1.45;
}
.offer-review-result strong{
  font-size:17px;
}
.offer-review-result.is-approved{
  background:#e7f7ed;
  color:#146642;
}
.offer-review-result.is-changes{
  background:#fff4ef;
  color:#7f2d23;
}
.offer-review-result.is-expired{
  background:#f1f1ef;
  color:#5f6368;
}
.offer-review-message-card{
  margin-top:20px;
}

/* Keep the real app overlays inside the mock phone on larger screens. */
.offer-review-phone-screen > .redemption-overlay,
.offer-review-phone-screen > .business-info-overlay,
.offer-review-phone-screen > .business-map-overlay{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  min-height:100% !important;
  z-index:50 !important;
}
.offer-review-phone-screen .redemption-overlay-backdrop{
  position:absolute !important;
  inset:0 !important;
}
.offer-review-phone-screen .business-info-overlay,
.offer-review-phone-screen .business-map-overlay{
  padding:18px 8px !important;
}
.offer-review-phone-screen .business-info-panel,
.offer-review-phone-screen .business-map-panel{
  width:96% !important;
  max-height:92% !important;
}
.review-redemption-badge{
  position:relative;
  z-index:4;
  display:inline-flex;
  align-self:center;
  margin:0 auto 8px;
  padding:7px 12px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  background:rgba(16,18,20,.52);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.09em;
}

/* Operator approval workflow. */
.operator-approval-email-warning{
  margin-top:12px;
}
.operator-inline-link{
  border:0;
  background:none;
  padding:0;
  color:var(--brand-dark);
  font-weight:850;
  text-decoration:underline;
}
.operator-review-status{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin-top:14px;
  padding:10px 12px;
  border-radius:13px;
  background:#f1f1ef;
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}
.operator-review-status strong{
  color:var(--ink);
  font-size:13px;
}
.operator-review-status.is-approved{
  background:#e7f7ed;
  color:#287657;
}
.operator-review-status.is-approved strong{
  color:#146642;
}
.operator-review-status.is-pending{
  background:#fff7d7;
  color:#725a13;
}
.operator-review-status.is-pending strong{
  color:#5f4a0e;
}
.operator-review-status.is-changes{
  background:#fff0ea;
  color:#8a3028;
}
.operator-review-status.is-changes strong{
  color:#71271f;
}
.operator-review-feedback{
  margin-top:13px;
  padding:13px;
  border:1px solid #f0c9be;
  border-radius:15px;
  background:#fff8f5;
}
.operator-review-feedback-title{
  font-size:13px;
  font-weight:900;
  color:#7d2d24;
}
.operator-review-feedback p{
  margin:7px 0 0;
  font-size:13px;
  line-height:1.45;
}
.operator-review-image{
  display:grid;
  gap:8px;
  margin-top:11px;
}
.operator-review-image img{
  width:100%;
  max-height:220px;
  display:block;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
}
.operator-offer-approval-actions{
  grid-template-columns:1fr 1fr;
}
.operator-review-copy-link{
  width:100%;
  margin-top:8px;
  border:0;
  background:none;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  text-decoration:underline;
}

@media (max-width:540px){
  .offer-review-page{
    margin-left:-18px;
    margin-right:-18px;
  }
  .offer-review-brand,
  .offer-review-intro,
  .offer-review-actions{
    margin-left:18px;
    margin-right:18px;
  }
  .offer-review-phone-wrap{
    display:block;
    padding:0 0 20px;
  }
  .offer-review-phone{
    width:100%;
    max-width:none;
    padding:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
  }
  .offer-review-phone-speaker{
    display:none;
  }
  .offer-review-phone-screen{
    height:auto;
    min-height:0;
    overflow:visible;
    border-radius:0;
    background:var(--paper);
  }
  .offer-review-phone-app{
    padding:14px 18px 28px;
  }
  .offer-review-phone-logo{
    display:none;
  }
  .offer-review-phone-preview-label{
    margin-top:0;
  }
  .offer-review-phone-screen > .redemption-overlay,
  .offer-review-phone-screen > .business-info-overlay,
  .offer-review-phone-screen > .business-map-overlay{
    position:fixed !important;
    inset:0 !important;
    width:auto !important;
    min-height:100% !important;
  }
  .offer-review-phone-screen .redemption-overlay-backdrop{
    position:fixed !important;
  }
  .offer-review-actions{
    width:auto;
  }
}

/* Keep review overlays pinned to the visible mock-phone screen while its
   content scrolls. A transformed screen becomes the containing block for
   fixed descendants on desktop; mobile removes the transform so overlays
   use the real viewport. */
@media (min-width:541px){
  .offer-review-phone-screen{
    transform:translateZ(0);
  }
  .offer-review-phone-screen > .redemption-overlay,
  .offer-review-phone-screen > .business-info-overlay,
  .offer-review-phone-screen > .business-map-overlay{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
  }
  .offer-review-phone-screen .redemption-overlay-backdrop{
    position:fixed !important;
    inset:0 !important;
  }
}
@media (max-width:540px){
  .offer-review-phone-screen{
    transform:none !important;
  }
}
@media (min-width:541px){
  .offer-review-phone-screen .redemption-overlay{
    padding-top:54px !important;
    padding-bottom:14px !important;
  }
  .offer-review-phone-screen .redemption-overlay-stage{
    width:100% !important;
  }
  .offer-review-phone-screen .redemption-overlay-seal{
    width:min(118%,440px) !important;
    max-width:440px !important;
  }
  .offer-review-phone-screen .redemption-overlay-info,
  .offer-review-phone-screen .redemption-offer-terms{
    width:88% !important;
    max-width:360px !important;
  }
  .offer-review-phone-screen .redemption-overlay-close{
    top:10px !important;
    right:10px !important;
  }
}

/* =====================================================
   Business approval phone-preview viewport fix
   The customer voucher layout normally uses viewport-width sizing so cards
   can run full bleed in the real app. Inside the desktop review mock-up the
   browser viewport is much wider than the simulated phone, so constrain the
   voucher to the phone screen instead and use phone-sized typography/artwork.
   ===================================================== */
@media (min-width:541px){
  .offer-review-phone-screen{
    container-type:inline-size;
    scrollbar-width:none;
  }
  .offer-review-phone-screen::-webkit-scrollbar{
    width:0;
    height:0;
    display:none;
  }
  .offer-review-phone-app{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .offer-review-phone-screen .voucher-band{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .offer-review-phone-screen .voucher-band-inner{
    width:calc(100% - 30px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .offer-review-phone-screen .voucher-saving{
    font-size:clamp(41px,11.7cqw,49px) !important;
  }
  .offer-review-phone-screen .voucher-seal-button,
  .offer-review-phone-screen .voucher-seal-button.is-static{
    width:min(67cqw,266px) !important;
    max-width:min(67cqw,266px) !important;
  }
  .offer-review-phone-screen .voucher-seal-ready-text{
    font-size:14px !important;
  }
  .offer-review-phone-screen .voucher-seal-ready-text strong{
    font-size:20px !important;
  }
}

/* =====================================================
   Operator offer-approval recipient dialog
   Approval emails can be sent to a contact who is different from the
   business's public-facing email address.
   ===================================================== */
.operator-review-email-dialog{
  position:fixed;
  inset:0;
  z-index:5000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
}
.operator-review-email-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  background:rgba(22,24,25,.55);
  cursor:pointer;
}
.operator-review-email-panel{
  position:relative;
  z-index:1;
  width:min(100%,460px);
  max-height:calc(100dvh - 36px);
  overflow:auto;
  padding:28px;
  border-radius:28px;
  background:var(--paper,#f7f5f0);
  box-shadow:0 22px 70px rgba(0,0,0,.28);
}
.operator-review-email-panel h2{
  margin:4px 46px 10px 0;
  font-size:30px;
  line-height:1.05;
}
.operator-review-email-panel p{
  margin:0 0 22px;
  line-height:1.5;
}
.operator-review-email-close{
  position:absolute;
  top:16px;
  right:16px;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(0,0,0,.07);
  color:var(--ink,#202124);
  font-size:29px;
  line-height:1;
  cursor:pointer;
}
.operator-review-email-label{
  display:block;
  margin:0 0 8px;
  font-weight:800;
}
.operator-review-email-input{
  width:100%;
  box-sizing:border-box;
  margin:0;
}
.operator-review-email-help{
  margin:9px 0 22px;
  color:#6e6a72;
  font-size:13px;
  line-height:1.4;
}
.operator-review-email-actions{
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:10px;
}
body.has-operator-review-email-dialog{
  overflow:hidden;
}
@media (max-width:540px){
  .operator-review-email-dialog{
    align-items:flex-end;
    padding:0;
  }
  .operator-review-email-panel{
    width:100%;
    max-height:88dvh;
    padding:26px 20px calc(22px + env(safe-area-inset-bottom));
    border-radius:26px 26px 0 0;
  }
  .operator-review-email-actions{
    grid-template-columns:1fr;
  }
}

/* =====================================================
   Business approval redemption-preview viewport fix
   Keep the redemption presentation sized from the simulated phone rather
   than the desktop browser viewport. The live customer overlay is unchanged.
   ===================================================== */
@media (min-width:541px){
  .offer-review-phone-screen .redemption-overlay-stage{
    width:100% !important;
    max-width:100% !important;
  }

  .offer-review-phone-screen .redemption-overlay-seal-rail{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .offer-review-phone-screen .redemption-overlay-seal{
    width:calc(100% + 92px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .offer-review-phone-screen .redemption-overlay-timer{
    font-size:clamp(41px,11.4cqw,64px) !important;
  }

  .offer-review-phone-screen .redemption-overlay.is-live-overlay .redemption-overlay-info{
    width:calc(100% - 58px) !important;
    max-width:360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .offer-review-phone-screen .redemption-offer-terms{
    width:calc(100% - 58px) !important;
    max-width:360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* =====================================================
   Business approval mobile centring + always-expanded proof
   The proof is a standalone representation of one offer, so it should not
   behave like the multi-offer customer accordion. On mobile we also remove
   inherited viewport-width maths and centre the voucher directly in the
   review viewport.
   ===================================================== */
.offer-review-phone-screen .voucher-band.is-review-preview,
.offer-review-phone-screen .voucher-band.is-review-preview .voucher-card,
.offer-review-phone-screen .voucher-band.is-review-preview .voucher-summary{
  cursor:default !important;
}
.offer-review-phone-screen .voucher-band.is-review-preview .voucher-accordion{
  grid-template-rows:1fr !important;
  opacity:1 !important;
}
.offer-review-phone-screen .voucher-band.is-review-preview .voucher-accordion-clip{
  overflow:visible !important;
}

@media (max-width:540px){
  .offer-review-phone-app{
    width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  .offer-review-phone-preview-label{
    margin-left:18px !important;
    margin-right:18px !important;
  }
  .offer-review-phone-screen .voucher-band.is-review-preview{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .offer-review-phone-screen .voucher-band.is-review-preview > .voucher-band-inner{
    width:calc(100% - 36px) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* ==========================================================
   v0.61 — PWA launch splash + offer-stack entrance
   ========================================================== */
.vv-launch-splash{position:fixed;z-index:9999;inset:0;min-height:100vh;min-height:100svh;min-height:100lvh;min-height:100dvh;display:grid;place-items:center;overflow:hidden;padding:max(24px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:radial-gradient(circle at 14% 18%,rgba(201,143,218,.72),transparent 34%),radial-gradient(circle at 88% 78%,rgba(42,205,193,.68),transparent 39%),radial-gradient(circle at 52% 42%,rgba(255,255,255,.96),rgba(255,255,255,.58) 42%,transparent 70%),linear-gradient(135deg,#f3d8f6 0%,#f9f8fb 48%,#b9eee8 100%);background-size:118% 118%,122% 122%,116% 116%,126% 126%;background-position:0% 0%,100% 100%,50% 50%,50% 50%;background-repeat:no-repeat;animation:vvSplashGradient 6.8s ease-in-out infinite alternate}
.vv-launch-splash::before{content:"";position:absolute;inset:-24%;background:radial-gradient(circle at 34% 40%,rgba(255,255,255,.52),transparent 30%),radial-gradient(circle at 65% 58%,rgba(255,255,255,.28),transparent 28%);filter:blur(18px);animation:vvSplashDrift 6.2s ease-in-out infinite alternate;pointer-events:none}.vv-launch-splash::after{content:"";position:absolute;inset:-12%;pointer-events:none;background:radial-gradient(circle at 18% 22%,rgba(201,143,218,.11),transparent 36%),radial-gradient(circle at 82% 76%,rgba(42,205,193,.11),transparent 40%);animation:vvSplashPulse 5.6s ease-in-out infinite alternate}
.vv-launch-splash-inner{position:relative;z-index:1;width:min(100%,390px);display:flex;flex-direction:column;align-items:center;text-align:center}
.vv-launch-icon{display:block;width:min(55vw,218px);height:auto;border-radius:28%;filter:drop-shadow(0 18px 28px rgba(37,57,69,.13));animation:vvSplashIconPulse 1.45s cubic-bezier(.2,.8,.2,1) infinite alternate}
.vv-launch-tagline{margin-top:31px;min-height:48px;display:flex;align-items:center;justify-content:center;gap:.32em;color:#22323a;font-family:"Exo 2",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:clamp(25px,7.4vw,34px);line-height:1;letter-spacing:.015em;font-weight:700}
.vv-launch-word-slot{position:relative;display:inline-block;width:3.5em;height:1.2em;overflow:visible;text-align:right}
.vv-launch-word{position:absolute;inset:0 0 auto auto;width:100%;opacity:0;transform:translateY(18px) scale(.96);filter:blur(7px);text-align:right;color:#a755ad;font-weight:850;animation:vvSplashWordBeat .52s cubic-bezier(.2,.8,.2,1) both}
.vv-launch-word-shop{animation-delay:.06s}.vv-launch-word-eat{animation-delay:.52s}.vv-launch-word-drink{animation-delay:.98s}.vv-launch-word-save{animation:vvSplashWordFinal .52s cubic-bezier(.2,.8,.2,1) 1.44s both}
.vv-launch-local{position:relative;color:#007f78;font-weight:850}
.vv-launch-local::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:3px;border-radius:999px;background:linear-gradient(90deg,#ae61b7,#00a397);transform-origin:left center;animation:vvLocalUnderline 1.2s ease-in-out infinite alternate}
.vv-launch-loader{display:flex;gap:7px;margin-top:34px;min-height:10px}.vv-launch-loader span{width:7px;height:7px;border-radius:50%;background:#007f78;opacity:.28;animation:vvLoaderDot .9s ease-in-out infinite}.vv-launch-loader span:nth-child(2){animation-delay:.14s}.vv-launch-loader span:nth-child(3){animation-delay:.28s}
@keyframes vvSplashGradient{from{background-position:0% 0%,100% 100%,50% 50%,50% 50%}to{background-position:8% 6%,92% 94%,54% 46%,48% 52%}}
@keyframes vvSplashDrift{from{transform:translate3d(-2%,-1%,0) scale(1);opacity:.74}to{transform:translate3d(3%,2%,0) scale(1.05);opacity:1}}
@keyframes vvSplashPulse{from{transform:scale(.985);opacity:.55}to{transform:scale(1.035);opacity:1}}
@keyframes vvSplashIconPulse{from{transform:scale(.965);filter:drop-shadow(0 14px 22px rgba(37,57,69,.10))}to{transform:scale(1.015);filter:drop-shadow(0 20px 34px rgba(37,57,69,.18))}}
@keyframes vvSplashWordBeat{0%{opacity:0;transform:translateY(18px) scale(.96);filter:blur(7px)}22%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}62%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}100%{opacity:0;transform:translateY(-15px) scale(1.02);filter:blur(5px)}}
@keyframes vvSplashWordFinal{0%{opacity:0;transform:translateY(18px) scale(.96);filter:blur(7px)}28%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes vvLocalUnderline{from{transform:scaleX(.62);opacity:.58}to{transform:scaleX(1);opacity:1}}
@keyframes vvLoaderDot{0%,100%{transform:translateY(0);opacity:.25}50%{transform:translateY(-5px);opacity:.92}}
.voucher-band.is-launch-stack-card{position:relative;z-index:calc(20 - var(--vv-launch-index,0));transform-origin:50% 18%;will-change:transform,opacity;animation:vvOfferStackIn 820ms cubic-bezier(.18,.85,.23,1.04) both;animation-delay:calc(var(--vv-launch-index,0) * 64ms)}
@keyframes vvOfferStackIn{0%{opacity:0;transform:translate3d(0,76vh,0) scale(.975)}50%{opacity:1;transform:translate3d(0,calc(var(--vv-launch-index,0) * -152px),0) scale(.988)}63%{opacity:1;transform:translate3d(0,calc(var(--vv-launch-index,0) * -152px),0) scale(.988)}82%{opacity:1;transform:translate3d(0,calc(var(--vv-launch-index,0) * -58px),0) scale(1)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@media (max-width:420px){.vv-launch-icon{width:min(58vw,205px)}.vv-launch-tagline{margin-top:27px;font-size:clamp(24px,7.8vw,31px)}.vv-launch-word-slot{width:3.45em}@keyframes vvOfferStackIn{0%{opacity:0;transform:translate3d(0,80vh,0) scale(.975)}50%{opacity:1;transform:translate3d(0,calc(var(--vv-launch-index,0) * -126px),0) scale(.988)}63%{opacity:1;transform:translate3d(0,calc(var(--vv-launch-index,0) * -126px),0) scale(.988)}82%{opacity:1;transform:translate3d(0,calc(var(--vv-launch-index,0) * -46px),0) scale(1)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}}
@media (prefers-reduced-motion:reduce){.vv-launch-splash,.vv-launch-splash::before,.vv-launch-splash::after,.vv-launch-icon,.vv-launch-word,.vv-launch-local::after,.vv-launch-loader span,.voucher-band.is-launch-stack-card{animation:none!important;transition:none!important}.vv-launch-word{display:none}.vv-launch-word-save{display:block;opacity:1;transform:none;filter:none}}

/* ==========================================================
   v0.61.2 — splash alignment + seamless perforated stack
   ========================================================== */

/* LOCAL stays completely fixed: no underline / moving accent. */
.vv-launch-local::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}

/* Give both halves of the changing tagline exactly the same typographic box.
   The animated word now sits on the same visual line as LOCAL rather than in
   the slightly taller 1.2em slot used in the first preview. */
.vv-launch-tagline{
  align-items:flex-start !important;
}
.vv-launch-word-slot{
  height:1em !important;
  line-height:1 !important;
}
.vv-launch-word,
.vv-launch-local{
  line-height:1 !important;
}
.vv-launch-word{
  top:0 !important;
  bottom:auto !important;
}

/* During the entrance animation, preserve the SAME stacking order used by the
   finished voucher feed: each lower sheet must paint above the sheet before
   it. This means its perforated top edge and upward shadow move with the card
   instead of appearing only when the launch-animation class is removed. */
.voucher-band.is-launch-stack-card{
  z-index:calc(2 + var(--vv-launch-index,0)) !important;
  overflow:visible !important;
}
.voucher-band.is-launch-stack-card::before,
.voucher-band.is-launch-stack-card::after{
  visibility:visible !important;
  opacity:1 !important;
}

@media (max-width:420px){
  .vv-launch-word-slot{
    height:1em !important;
  }
}


/* ==========================================================
   v0.61.3 — deeper launch stack overlap
   ========================================================== */
/* The first four vouchers now compress into a more obvious physical stack
   for a fraction longer before spreading into their normal positions. */


/* ==========================================================
   v0.61.4 — smoother launch-stack motion
   ========================================================== */
/* The earlier cleanup timer could remove the animation class before the
   later staggered cards had fully settled. JS now waits for animationend.
   Motion is also eased in three distinct phases: rise, brief stack, settle. */
.voucher-band.is-launch-stack-card{
  animation-duration:1040ms !important;
  animation-delay:calc(var(--vv-launch-index,0) * 52ms) !important;
  animation-timing-function:linear !important;
  transform-origin:50% 18% !important;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

@keyframes vvOfferStackIn{
  0%{
    opacity:0;
    transform:translate3d(0,78vh,0) scale(.985);
    animation-timing-function:cubic-bezier(.16,1,.3,1);
  }
  54%{
    opacity:1;
    transform:translate3d(0,calc(var(--vv-launch-index,0) * -152px),0) scale(.995);
    animation-timing-function:cubic-bezier(.4,0,.2,1);
  }
  69%{
    opacity:1;
    transform:translate3d(0,calc(var(--vv-launch-index,0) * -152px),0) scale(.995);
    animation-timing-function:cubic-bezier(.16,1,.3,1);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

@media (max-width:420px){
  @keyframes vvOfferStackIn{
    0%{
      opacity:0;
      transform:translate3d(0,80vh,0) scale(.985);
      animation-timing-function:cubic-bezier(.16,1,.3,1);
    }
    54%{
      opacity:1;
      transform:translate3d(0,calc(var(--vv-launch-index,0) * -126px),0) scale(.995);
      animation-timing-function:cubic-bezier(.4,0,.2,1);
    }
    69%{
      opacity:1;
      transform:translate3d(0,calc(var(--vv-launch-index,0) * -126px),0) scale(.995);
      animation-timing-function:cubic-bezier(.16,1,.3,1);
    }
    100%{
      opacity:1;
      transform:translate3d(0,0,0) scale(1);
    }
  }
}


/* ==========================================================
   v0.61.5 — top-stack fan-down entrance
   ========================================================== */
/* Cards are first measured in JS and held invisible at their normal layout
   positions. The measured transform pulls the first four vouchers into one
   compact stack at the top, complete with their perforations and shadows. */
.voucher-band.is-launch-stack-card{
  animation:none !important;
  opacity:0;
  transform:translate3d(0,var(--vv-launch-from-y,0px),0);
  will-change:transform,opacity;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

.voucher-band.is-launch-stack-card.is-launch-stack-running{
  animation-name:vvOfferStackDown !important;
  animation-duration:780ms !important;
  animation-delay:calc(var(--vv-launch-index,0) * 58ms) !important;
  animation-fill-mode:both !important;
  animation-timing-function:cubic-bezier(.22,.78,.22,1) !important;
}

@keyframes vvOfferStackDown{
  0%{
    opacity:1;
    transform:translate3d(0,var(--vv-launch-from-y,0px),0) scale(.998);
  }
  72%{
    opacity:1;
    transform:translate3d(0,calc(var(--vv-launch-from-y,0px) * .08),0) scale(1);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

@media (prefers-reduced-motion:reduce){
  .voucher-band.is-launch-stack-card,
  .voucher-band.is-launch-stack-card.is-launch-stack-running{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}


/* ==========================================================
   v0.61.6 — compact perforated stack + compositor fan-open
   ========================================================== */
/* Up to six launch vouchers are stacked only 15–17px apart. JS clips each
   sheet to its top 23–25px for the opening beat, so the user first sees a
   compact run of alternating teal/violet perforated edges. The real sheets
   then fan smoothly down to their measured feed positions. */
.voucher-band.is-launch-stack-card{
  animation:none !important;
  transition:none !important;
  overflow:visible !important;
  z-index:calc(10 + var(--vv-launch-index,0)) !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  transform-origin:50% 0 !important;
}
.voucher-band.is-launch-stack-card::before,
.voucher-band.is-launch-stack-card::after{
  visibility:visible !important;
  opacity:1 !important;
}
@media (prefers-reduced-motion:reduce){
  .voucher-band.is-launch-stack-card{
    clip-path:none !important;
    -webkit-clip-path:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* ==========================================================
   v0.61.7 — smooth transform-only voucher fan
   ========================================================== */
/* The real vouchers now move with transform + opacity only. We no longer
   animate clip-path, which avoids iOS/Safari repaint seams and lets the
   existing soft stacked-sheet shadow render exactly as it does normally. */
.voucher-band.is-launch-stack-card{
  animation:none !important;
  transition:none !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  overflow:visible !important;
  z-index:calc(10 + var(--vv-launch-index,0)) !important;
  transform-origin:50% 0 !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  contain:none !important;
}

/* v0.61.8 — use the real cards for the compact opening stack.
   This keeps the perforated edges visually attached to the vouchers from the
   very first frame while still using transform-only movement for smoothness. */
.voucher-band.is-launch-stack-card{
  opacity:0;
}
.voucher-band.is-launch-stack-card.is-launch-stack-running,
.voucher-band.is-launch-stack-card{
  animation:none !important;
  transition:none !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  overflow:visible !important;
  z-index:calc(10 + var(--vv-launch-index,0)) !important;
  transform-origin:50% 0 !important;
  backface-visibility:hidden !important;
  -webkit-backface-visibility:hidden !important;
  contain:none !important;
}
@media (prefers-reduced-motion:reduce){
  .voucher-band.is-launch-stack-card{
    opacity:1 !important;
    transform:none !important;
    will-change:auto !important;
  }
}


/* ==========================================================
   v0.61.9 — keep perforations attached during launch fan
   ========================================================== */
/* The real perforations sit 10px outside each voucher band. Paint containment
   clipped those protruding scallops while the band was transformed, making
   them appear only when the animation class was removed. Keep paint overflow
   visible throughout the launch so the scallops travel with each card. */
.voucher-band.is-launch-stack-card,
.voucher-band.is-launch-stack-card.is-launch-stack-running{
  contain:none !important;
  overflow:visible !important;
}
.voucher-band.is-launch-stack-card::before,
.voucher-band.is-launch-stack-card::after{
  visibility:visible !important;
  opacity:1 !important;
}


/* ==========================================================
   v0.62 — free promotional offer device-limit message
   ========================================================== */
.redemption-overlay-device-note{
  max-width:300px;
  margin:8px auto 2px;
  font-size:.92rem;
  line-height:1.35;
  text-align:center;
  opacity:.92;
}


/* v0.62.1 — discreet sign-out link at the bottom of My account */
.account-signout-wrap{
  display:flex;
  justify-content:center;
  padding:14px 0 calc(26px + env(safe-area-inset-bottom));
}
.account-signout-link{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:8px 12px;
  color:rgba(43,55,63,.62);
  font:inherit;
  font-size:13px;
  line-height:1.2;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.account-signout-link:hover,
.account-signout-link:focus-visible{
  color:var(--brand);
}


/* ==========================================================
   v0.62.3 — free-account access to My account
   ========================================================== */
.home-account-actions{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
}
.home-account-secondary{
  border:0;
  padding:2px 4px;
  background:transparent;
  color:var(--muted);
  font-family:inherit;
  font-size:11px;
  line-height:1.2;
  font-weight:750;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.home-account-secondary:hover{
  color:var(--brand-dark);
}
@media (max-width:360px){
  .home-account-actions{gap:4px}
  .home-account-secondary{font-size:10px}
}


/* ==========================================================
   v0.62.5 — stable screen transitions
   ========================================================== */
.site-masthead{
  contain:layout paint;
}
.site-masthead .brand-wordmark{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0) !important;
}


/* ==========================================================
   v0.62.8 — offer-approval copy-link panel
   ========================================================== */
.operator-review-link-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  margin-top:8px;
}
.operator-review-link-input{
  min-width:0;
  font-size:14px;
}
.operator-copy-review-link{
  white-space:nowrap;
}
.operator-review-link-help{
  margin-top:10px;
}
.operator-review-link-status{
  margin-top:14px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(10,138,130,.10);
  color:#086f69;
  font-size:14px;
  font-weight:700;
}
@media (max-width:520px){
  .operator-review-link-row{
    grid-template-columns:1fr;
  }
  .operator-copy-review-link{
    width:100%;
  }
}

/* =====================================================
   v0.62.11 — single offer-proof overlay
   Email and copy-link actions live side by side in one dialog.
   ===================================================== */
.operator-review-email-panel{
  width:min(100%,500px);
}
.operator-review-choice-card{
  margin:14px 0 0;
  padding:18px;
  border:1px solid rgba(10,138,130,.16);
  border-radius:20px;
  background:rgba(255,255,255,.58);
  box-shadow:0 8px 24px rgba(34,50,58,.06);
}
.operator-review-choice-card + .operator-review-choice-card{
  margin-top:14px;
}
.operator-review-choice-heading{
  margin:0 0 14px;
  color:var(--ink,#202124);
  font-size:18px;
  font-weight:850;
}
.operator-review-choice-button{
  width:100%;
  margin-top:12px;
}
.operator-review-link-input{
  width:100%;
  box-sizing:border-box;
  margin:0;
  font-size:13px;
}
.operator-review-choice-card .operator-review-email-help{
  margin:9px 0 0;
}
.operator-review-inline-status{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(10,138,130,.10);
  color:#075f59;
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}
@media (max-width:540px){
  .operator-review-choice-card{
    padding:16px;
    border-radius:18px;
  }
}


/* =====================================================
   v0.62.12 — offer-card quick links + Tell a friend
   ===================================================== */
.voucher-shop-at{
  font-weight:650;
  font-style:normal;
  opacity:.82;
}

.voucher-business-action-row{
  width:100%;
  min-height:52px;
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 1px;
}
.voucher-business-action-row .voucher-more-business-button{
  width:auto;
  min-height:44px;
  margin:0;
  padding:11px 16px;
  flex:0 1 auto;
  white-space:nowrap;
}
.voucher-business-action-row.no-quick-links .voucher-more-business-button{
  width:100%;
  flex:1 1 100%;
}
.voucher-business-quick-link{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.34);
  border-radius:50%;
  background:rgba(255,255,255,.15);
  color:inherit;
  text-decoration:none;
  box-shadow:0 6px 14px rgba(20,24,26,.07);
  transition:transform .16s ease,background .16s ease;
}
.voucher-business-quick-link:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.25);
}
.voucher-business-quick-link svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.voucher-business-quick-social{
  font-size:15px;
  font-weight:900;
}
.voucher-business-quick-social svg{
  width:19px;
  height:19px;
}
.theme-teal .voucher-business-quick-link{color:#fff}
.theme-violet .voucher-business-quick-link{
  color:#302534;
  border-color:rgba(48,37,52,.16);
  background:rgba(255,255,255,.23);
}
.theme-violet .voucher-business-quick-link:hover{background:rgba(255,255,255,.34)}

.voucher-redeem-area{
  position:relative;
  min-height:312px;
}
.voucher-tell-friend{
  position:absolute;
  right:4px;
  bottom:14px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  padding:7px 9px;
  background:rgba(255,255,255,.18);
  color:inherit;
  font-family:inherit;
  font-size:11px;
  line-height:1;
  font-weight:850;
  box-shadow:0 5px 13px rgba(20,24,26,.08);
  cursor:pointer;
}
.voucher-tell-friend:hover{background:rgba(255,255,255,.28)}
.voucher-tell-friend-icon{
  display:grid;
  place-items:center;
}
.voucher-tell-friend-icon svg{
  width:14px;
  height:14px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.theme-teal .voucher-tell-friend{color:#fff}
.theme-violet .voucher-tell-friend{
  color:#302534;
  border-color:rgba(48,37,52,.16);
  background:rgba(255,255,255,.25);
}

body.has-voucher-share-overlay{overflow:hidden}
.voucher-share-overlay{
  position:fixed;
  inset:0;
  z-index:1300;
  display:grid;
  place-items:center;
  padding:18px;
}
.voucher-share-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:rgba(12,18,20,.64);
  backdrop-filter:blur(3px);
}
.voucher-share-panel{
  position:relative;
  z-index:1;
  width:min(92vw,430px);
  padding:22px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 24px 70px rgba(0,0,0,.32);
}
.voucher-share-panel h2{margin:4px 42px 6px 0;font-size:26px}
.voucher-share-panel p{margin:0 0 16px;color:var(--muted);line-height:1.4}
.voucher-share-close{
  position:absolute;
  top:12px;
  right:12px;
  width:40px;
  height:40px;
  border:0;
  border-radius:50%;
  background:#f0f0f0;
  font-size:25px;
  line-height:1;
}
.voucher-share-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.voucher-share-option{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  border:1px solid #d9e4e2;
  border-radius:14px;
  padding:10px 12px;
  background:#f7fbfa;
  color:#08776f;
  font:inherit;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
}
@media (max-width:520px){
  .voucher-business-action-row{gap:6px;min-height:50px}
  .voucher-business-action-row .voucher-more-business-button{
    min-height:42px;
    padding:10px 12px;
    font-size:12.5px;
  }
  .voucher-business-quick-link{
    width:39px;
    height:39px;
    flex-basis:39px;
  }
  .voucher-redeem-area{min-height:298px}
  .voucher-tell-friend{
    right:0;
    bottom:11px;
    padding:7px 8px;
    font-size:10.5px;
  }
}
@media (max-width:380px){
  .voucher-business-action-row{gap:5px}
  .voucher-business-action-row .voucher-more-business-button{
    padding:9px 10px;
    font-size:11.5px;
  }
  .voucher-business-quick-link{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .voucher-tell-friend{
    max-width:78px;
    white-space:normal;
    text-align:center;
    line-height:1.08;
  }
  .voucher-share-options{grid-template-columns:1fr}
}


/* =====================================================
   v0.62.13 — fuller business action row + share polish
   ===================================================== */
/* The business action row always spans the same full width as the address
   pill. The More about button absorbs any spare width while the available
   quick links are spaced evenly across the remainder. */
.voucher-business-action-row{
  width:100% !important;
  min-height:64px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:9px !important;
  margin:10px 0 2px !important;
}
.voucher-business-action-row .voucher-more-business-button{
  width:auto !important;
  min-width:0 !important;
  min-height:54px !important;
  flex:1 1 0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  padding:8px 14px !important;
  white-space:normal !important;
  line-height:1.05 !important;
}
.voucher-business-action-row .voucher-more-business-button span{
  display:block;
  white-space:nowrap;
}
.voucher-business-action-row.no-quick-links .voucher-more-business-button{
  width:100% !important;
  flex:1 1 100% !important;
}
.voucher-business-quick-link{
  width:44px !important;
  height:44px !important;
  flex:0 0 44px !important;
}

/* Give both voucher colours the same fine white outline and lighten the
   translucent button fills slightly. */
.voucher-address-pill{
  border-color:rgba(255,255,255,.46) !important;
  background:rgba(255,255,255,.21) !important;
}
.voucher-more-business-button{
  border-color:rgba(255,255,255,.46) !important;
  background:rgba(255,255,255,.19) !important;
}
.voucher-business-quick-link{
  border-color:rgba(255,255,255,.46) !important;
  background:rgba(255,255,255,.21) !important;
}
.voucher-tell-friend{
  border-color:rgba(255,255,255,.46) !important;
  background:rgba(255,255,255,.23) !important;
}
.theme-violet .voucher-address-pill,
.theme-violet .voucher-more-business-button,
.theme-violet .voucher-business-quick-link,
.theme-violet .voucher-tell-friend{
  border-color:rgba(255,255,255,.52) !important;
  background:rgba(255,255,255,.31) !important;
}
.theme-teal .voucher-address-pill:hover,
.theme-teal .voucher-more-business-button:hover,
.theme-teal .voucher-business-quick-link:hover,
.theme-teal .voucher-tell-friend:hover{
  background:rgba(255,255,255,.30) !important;
}
.theme-violet .voucher-address-pill:hover,
.theme-violet .voucher-more-business-button:hover,
.theme-violet .voucher-business-quick-link:hover,
.theme-violet .voucher-tell-friend:hover{
  background:rgba(255,255,255,.40) !important;
}

/* Lift Tell a friend into the transparent lower-right part of the voucher
   artwork so it visually belongs to the redeem seal rather than sitting
   beneath it. */
.voucher-tell-friend{
  right:4px !important;
  bottom:50px !important;
}

@media (max-width:520px){
  .voucher-business-action-row{
    min-height:62px !important;
    gap:7px !important;
  }
  .voucher-business-action-row .voucher-more-business-button{
    min-height:52px !important;
    padding:8px 10px !important;
    font-size:12.5px !important;
  }
  .voucher-business-quick-link{
    width:41px !important;
    height:41px !important;
    flex-basis:41px !important;
  }
  .voucher-tell-friend{
    right:0 !important;
    bottom:43px !important;
  }
}
@media (max-width:380px){
  .voucher-business-action-row{
    gap:5px !important;
  }
  .voucher-business-action-row .voucher-more-business-button{
    padding:7px 8px !important;
    font-size:11.5px !important;
  }
  .voucher-business-quick-link{
    width:37px !important;
    height:37px !important;
    flex-basis:37px !important;
  }
  .voucher-tell-friend{
    bottom:40px !important;
  }
}


/* =====================================================
   v0.62.14 — responsive More about button typography
   ===================================================== */
/* The button width changes depending on how many phone/web/social quick
   links are present. Scale the two-line label from the button's own width,
   so a wide button uses larger type and a narrow button scales down. */
.voucher-business-action-row .voucher-more-business-button{
  container-type:inline-size;
}
.voucher-business-action-row .voucher-more-business-button span{
  font-size:13px;
  font-size:clamp(11.5px,8cqi,20px) !important;
  line-height:.98 !important;
  font-weight:750 !important;
  letter-spacing:-.01em;
}


/* =====================================================
   v0.62.15 — redeem seal left + vertical business actions
   ===================================================== */
/* Keep the address as the full-width row above, then use a compact two-column
   redemption layout: the voucher seal sits hard to the left while More about,
   phone, web and up to two social buttons form one vertical rail on the right. */
.voucher-redeem-area{
  --vv-side-rail:94px;
  --vv-side-gap:10px;
  --vv-seal-left-shift:52px;
  width:100% !important;
  max-width:430px;
  min-height:292px !important;
  margin:2px auto 0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) var(--vv-side-rail) !important;
  column-gap:var(--vv-side-gap) !important;
  align-items:start !important;
  text-align:center;
  position:relative;
}
.voucher-redeem-main{
  min-width:0;
  min-height:286px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  overflow:visible;
}
.voucher-redeem-main .voucher-redeem-label{
  width:100%;
  margin:0 0 2px !important;
  padding-left:0;
  text-align:center;
}
.voucher-redeem-main .voucher-seal-button,
.voucher-redeem-main .voucher-seal-button.is-static{
  width:calc(100% + var(--vv-seal-left-shift)) !important;
  max-width:none !important;
  margin:0 0 0 calc(-1 * var(--vv-seal-left-shift)) !important;
  flex:0 0 auto;
}
.voucher-redeem-side{
  width:var(--vv-side-rail);
  min-width:0;
  padding-top:3px;
  align-self:start;
}
.voucher-redeem-side .voucher-business-action-row{
  width:100% !important;
  min-height:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  gap:8px !important;
}
.voucher-redeem-side .voucher-more-business-button{
  width:100% !important;
  min-width:0 !important;
  min-height:86px !important;
  flex:0 0 auto !important;
  margin:0 !important;
  padding:10px 7px !important;
  border-radius:17px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  container-type:normal !important;
}
.voucher-redeem-side .voucher-more-business-button span{
  display:block;
  white-space:normal !important;
  font-size:12.5px !important;
  line-height:1.02 !important;
  font-weight:800 !important;
  letter-spacing:-.01em;
}
.voucher-redeem-side .voucher-business-quick-link{
  width:100% !important;
  height:44px !important;
  min-height:44px !important;
  flex:0 0 44px !important;
  border-radius:15px !important;
  margin:0 !important;
}
.voucher-redeem-side .voucher-business-quick-link svg{
  width:20px;
  height:20px;
}
/* Keep Tell a friend attached to the redeem graphic rather than the business
   rail. It overlaps the transparent lower-right portion of the seal. */
.voucher-redeem-main .voucher-tell-friend{
  right:-2px !important;
  bottom:30px !important;
  max-width:82px;
  min-height:34px;
  padding:7px 8px !important;
  white-space:normal;
  text-align:center;
  line-height:1.05;
}
/* The accordion clip deliberately trims the shifted transparent left padding
   from the PNG, so the visible circular voucher edge reads flush to the left. */
.voucher-band.is-expanded .voucher-accordion-clip{
  overflow:hidden;
}

@media (max-width:520px){
  .voucher-redeem-area{
    --vv-side-rail:88px;
    --vv-side-gap:8px;
    --vv-seal-left-shift:50px;
    max-width:none;
    min-height:276px !important;
  }
  .voucher-redeem-main{
    min-height:272px;
  }
  .voucher-redeem-side .voucher-more-business-button{
    min-height:82px !important;
    padding:8px 6px !important;
  }
  .voucher-redeem-side .voucher-more-business-button span{
    font-size:11.8px !important;
  }
  .voucher-redeem-side .voucher-business-quick-link{
    height:42px !important;
    min-height:42px !important;
    flex-basis:42px !important;
  }
  .voucher-redeem-main .voucher-tell-friend{
    right:0 !important;
    bottom:27px !important;
  }
}
@media (max-width:380px){
  .voucher-redeem-area{
    --vv-side-rail:80px;
    --vv-side-gap:7px;
    --vv-seal-left-shift:46px;
  }
  .voucher-redeem-side .voucher-business-action-row{
    gap:6px !important;
  }
  .voucher-redeem-side .voucher-more-business-button{
    min-height:76px !important;
    padding:7px 5px !important;
  }
  .voucher-redeem-side .voucher-more-business-button span{
    font-size:10.8px !important;
  }
  .voucher-redeem-side .voucher-business-quick-link{
    height:39px !important;
    min-height:39px !important;
    flex-basis:39px !important;
  }
  .voucher-redeem-main .voucher-tell-friend{
    max-width:72px;
    font-size:10px;
    bottom:24px !important;
  }
}
\n\n/* =====================================================
   v0.62.16 — compact redeem seal + circular action rail
   ===================================================== */
/* Make the seal smaller and only trim a little of the PNG's transparent left
   padding, so the visible scalloped edge stays fully on-card. */
.voucher-redeem-area{
  --vv-side-rail:50px !important;
  --vv-side-gap:12px !important;
  --vv-seal-left-shift:16px !important;
  min-height:270px !important;
}
.voucher-redeem-main{
  min-height:266px !important;
}
.voucher-redeem-main .voucher-seal-button,
.voucher-redeem-main .voucher-seal-button.is-static{
  width:min(100%,292px) !important;
  max-width:292px !important;
  margin:0 0 0 calc(-1 * var(--vv-seal-left-shift)) !important;
}

/* All business actions on the right are matching circular buttons, including
   the information action. */
.voucher-redeem-side{
  width:var(--vv-side-rail) !important;
}
.voucher-redeem-side .voucher-business-action-row{
  align-items:center !important;
  gap:9px !important;
}
.voucher-redeem-side .voucher-more-business-button,
.voucher-redeem-side .voucher-business-quick-link{
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  min-height:48px !important;
  flex:0 0 48px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
}
.voucher-redeem-side .voucher-more-business-button span{
  display:grid !important;
  place-items:center !important;
  width:auto !important;
  font-size:inherit !important;
  line-height:1 !important;
}
.voucher-redeem-side .voucher-more-business-button svg,
.voucher-redeem-side .voucher-business-quick-link svg{
  width:20px !important;
  height:20px !important;
}
.voucher-redeem-side .voucher-more-business-button svg{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
}

/* Tell a friend is now an icon-only circular button, kept on the right side of
   the redeem graphic. */
.voucher-redeem-main .voucher-tell-friend{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  right:4px !important;
  bottom:28px !important;
}
.voucher-redeem-main .voucher-tell-friend-icon svg{
  width:18px !important;
  height:18px !important;
}

@media (max-width:520px){
  .voucher-redeem-area{
    --vv-side-rail:46px !important;
    --vv-side-gap:10px !important;
    --vv-seal-left-shift:12px !important;
    min-height:248px !important;
  }
  .voucher-redeem-main{
    min-height:244px !important;
  }
  .voucher-redeem-main .voucher-seal-button,
  .voucher-redeem-main .voucher-seal-button.is-static{
    width:min(64vw,258px) !important;
    max-width:min(64vw,258px) !important;
  }
  .voucher-redeem-side .voucher-more-business-button,
  .voucher-redeem-side .voucher-business-quick-link{
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    min-height:44px !important;
    flex-basis:44px !important;
  }
  .voucher-redeem-main .voucher-tell-friend{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    min-height:40px !important;
    max-width:40px !important;
    right:3px !important;
    bottom:24px !important;
  }
}

@media (max-width:380px){
  .voucher-redeem-area{
    --vv-side-rail:43px !important;
    --vv-side-gap:8px !important;
    --vv-seal-left-shift:8px !important;
  }
  .voucher-redeem-main .voucher-seal-button,
  .voucher-redeem-main .voucher-seal-button.is-static{
    width:min(62vw,238px) !important;
    max-width:min(62vw,238px) !important;
  }
  .voucher-redeem-side .voucher-more-business-button,
  .voucher-redeem-side .voucher-business-quick-link{
    width:41px !important;
    height:41px !important;
    min-width:41px !important;
    min-height:41px !important;
    flex-basis:41px !important;
  }
  .voucher-redeem-main .voucher-tell-friend{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    right:2px !important;
    bottom:22px !important;
  }
}


/* =====================================================
   v0.62.18 — natural seal bounds + larger action icons
   ===================================================== */
/* The card-specific voucher PNGs are already tightly cropped. Stop shifting
   or clipping them differently on desktop/mobile; render their natural square
   bounds and move the whole seal a few pixels right instead. */
.voucher-redeem-area{
  --vv-seal-left-shift:0 !important;
  margin:12px auto 0 !important;
}
.voucher-redeem-main .voucher-seal-button,
.voucher-redeem-main .voucher-seal-button.is-static{
  margin:0 0 0 8px !important;
  overflow:visible !important;
}
.voucher-redeem-main .voucher-seal-button img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Slightly tighten the transition from the action area into the small print. */
.voucher-offer-terms{
  margin-top:3px !important;
}

/* Stronger, more legible action symbols inside the existing circular buttons. */
.voucher-redeem-side .voucher-more-business-button svg,
.voucher-redeem-side .voucher-business-quick-link svg{
  width:27px !important;
  height:27px !important;
  stroke-width:2.15 !important;
}
.voucher-redeem-side .voucher-business-quick-social{
  font-size:20px !important;
  line-height:1 !important;
  font-weight:950 !important;
}
.voucher-redeem-side .voucher-business-quick-social svg{
  width:27px !important;
  height:27px !important;
}
.voucher-info-icon{
  display:grid !important;
  place-items:center !important;
  width:100%;
  height:100%;
}
.voucher-info-letter{
  display:block;
  font-family:"Exo 2",Arial,sans-serif;
  font-size:29px;
  line-height:.82;
  font-weight:950;
  font-style:italic;
  letter-spacing:-.08em;
  transform:skew(-5deg) translateX(-1px);
}
.voucher-redeem-main .voucher-tell-friend-icon svg{
  width:24px !important;
  height:24px !important;
  stroke-width:2.15 !important;
}

@media (max-width:520px){
  .voucher-redeem-area{
    margin-top:10px !important;
  }
  .voucher-redeem-main .voucher-seal-button,
  .voucher-redeem-main .voucher-seal-button.is-static{
    margin-left:7px !important;
  }
  .voucher-redeem-side .voucher-more-business-button svg,
  .voucher-redeem-side .voucher-business-quick-link svg,
  .voucher-redeem-side .voucher-business-quick-social svg{
    width:25px !important;
    height:25px !important;
  }
  .voucher-redeem-side .voucher-business-quick-social{
    font-size:19px !important;
  }
  .voucher-info-letter{
    font-size:27px;
  }
  .voucher-redeem-main .voucher-tell-friend-icon svg{
    width:22px !important;
    height:22px !important;
  }
}

@media (max-width:380px){
  .voucher-redeem-main .voucher-seal-button,
  .voucher-redeem-main .voucher-seal-button.is-static{
    margin-left:6px !important;
  }
}

/* =====================================================
   v0.62.19 — aligned seal, divider rail, larger mobile seal
   ===================================================== */
/* Use a dedicated centre share column so desktop/mobile keep the same basic
   structure: seal on the left, thin divider/share lane in the middle, and the
   five circular action buttons on the right. */
.voucher-redeem-area{
  --vv-side-rail:50px !important;
  --vv-share-column:42px !important;
  --vv-action-size:48px !important;
  --vv-action-gap:9px !important;
  width:100% !important;
  max-width:438px !important;
  min-height:276px !important;
  margin:16px auto 0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) var(--vv-share-column) var(--vv-side-rail) !important;
  column-gap:0 !important;
  align-items:start !important;
  position:relative !important;
}
.voucher-redeem-area::before{
  content:"";
  position:absolute;
  top:8px;
  bottom:8px;
  right:calc(var(--vv-side-rail) + (var(--vv-share-column) / 2));
  width:1px;
  background:rgba(255,255,255,.34);
  box-shadow:0 0 0 1px rgba(0,0,0,.02);
  pointer-events:none;
}
.voucher-redeem-main{
  grid-column:1 !important;
  min-height:276px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
}
.voucher-redeem-main .voucher-redeem-label{
  margin:0 0 4px !important;
}
.voucher-redeem-main .voucher-seal-button,
.voucher-redeem-main .voucher-seal-button.is-static{
  width:min(100%,294px) !important;
  max-width:294px !important;
  margin:0 0 0 8px !important;
}
.voucher-redeem-main .voucher-seal-button img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Share button lives in the centre divider lane and aligns with the bottom
   action circle. */
.voucher-redeem-area > .voucher-tell-friend{
  grid-column:2 !important;
  align-self:end !important;
  justify-self:center !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  max-width:44px !important;
  margin:0 0 0 -2px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2 !important;
}
.voucher-redeem-area > .voucher-tell-friend .voucher-tell-friend-icon svg{
  width:25px !important;
  height:25px !important;
  stroke-width:2.2 !important;
}

.voucher-redeem-side{
  grid-column:3 !important;
  width:var(--vv-side-rail) !important;
  min-width:var(--vv-side-rail) !important;
  padding-top:4px !important;
  align-self:start !important;
}
.voucher-redeem-side .voucher-business-action-row{
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:var(--vv-action-gap) !important;
}
.voucher-redeem-side .voucher-more-business-button,
.voucher-redeem-side .voucher-business-quick-link{
  width:var(--vv-action-size) !important;
  height:var(--vv-action-size) !important;
  min-width:var(--vv-action-size) !important;
  min-height:var(--vv-action-size) !important;
  flex:0 0 var(--vv-action-size) !important;
  border-radius:50% !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
}
.voucher-redeem-side .voucher-more-business-button svg,
.voucher-redeem-side .voucher-business-quick-link svg,
.voucher-redeem-side .voucher-business-quick-social svg{
  width:29px !important;
  height:29px !important;
}
.voucher-redeem-side .voucher-business-quick-social{
  font-size:22px !important;
  line-height:1 !important;
  font-weight:950 !important;
}
.voucher-info-letter{
  display:block !important;
  font-family:"Exo 2", Arial, sans-serif !important;
  font-size:34px !important;
  line-height:.72 !important;
  font-weight:950 !important;
  font-style:italic !important;
  letter-spacing:-.09em !important;
  transform:skew(-8deg) translateX(-1px) !important;
}

/* Slightly tighter transition to the small print while keeping a clearer gap
   below the address line above. */
.voucher-offer-terms{
  margin-top:0 !important;
}

@media (max-width:520px){
  .voucher-redeem-area{
    --vv-side-rail:50px !important;
    --vv-share-column:38px !important;
    --vv-action-size:44px !important;
    --vv-action-gap:9px !important;
    max-width:100% !important;
    min-height:258px !important;
    margin-top:18px !important;
  }
  .voucher-redeem-main{
    min-height:258px !important;
  }
  .voucher-redeem-main .voucher-seal-button,
  .voucher-redeem-main .voucher-seal-button.is-static{
    width:min(67vw,270px) !important;
    max-width:min(67vw,270px) !important;
    margin-left:6px !important;
  }
  .voucher-redeem-area > .voucher-tell-friend{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    max-width:42px !important;
    margin-left:-1px !important;
  }
  .voucher-redeem-area > .voucher-tell-friend .voucher-tell-friend-icon svg{
    width:24px !important;
    height:24px !important;
  }
  .voucher-redeem-side .voucher-more-business-button svg,
  .voucher-redeem-side .voucher-business-quick-link svg,
  .voucher-redeem-side .voucher-business-quick-social svg{
    width:28px !important;
    height:28px !important;
  }
  .voucher-redeem-side .voucher-business-quick-social{
    font-size:21px !important;
  }
  .voucher-info-letter{
    font-size:36px !important;
    line-height:.68 !important;
  }
}

@media (max-width:380px){
  .voucher-redeem-area{
    --vv-side-rail:47px !important;
    --vv-share-column:35px !important;
    --vv-action-size:41px !important;
    --vv-action-gap:8px !important;
    min-height:237px !important;
  }
  .voucher-redeem-main{
    min-height:237px !important;
  }
  .voucher-redeem-main .voucher-seal-button,
  .voucher-redeem-main .voucher-seal-button.is-static{
    width:min(66vw,252px) !important;
    max-width:min(66vw,252px) !important;
    margin-left:5px !important;
  }
  .voucher-redeem-area > .voucher-tell-friend{
    width:39px !important;
    height:39px !important;
    min-width:39px !important;
    min-height:39px !important;
    max-width:39px !important;
  }
  .voucher-redeem-area > .voucher-tell-friend .voucher-tell-friend-icon svg{
    width:22px !important;
    height:22px !important;
  }
  .voucher-redeem-side .voucher-more-business-button svg,
  .voucher-redeem-side .voucher-business-quick-link svg,
  .voucher-redeem-side .voucher-business-quick-social svg{
    width:26px !important;
    height:26px !important;
  }
  .voucher-info-letter{
    font-size:33px !important;
  }
}

/* =====================================================
   v0.62.20 — dynamic share alignment + centred divider
   ===================================================== */
/* Two real columns: the seal, then an action block.  The action block has a
   share lane plus the circular action rail.  Because the share button is
   anchored to the bottom of the action block, it always lines up with the
   final circle, regardless of whether there are 3, 4 or 5 action circles. */
.voucher-redeem-area{
  --vv-action-size:48px !important;
  --vv-action-gap:9px !important;
  --vv-share-lane:44px !important;
  --vv-share-size:48px !important;
  width:100% !important;
  max-width:386px !important;
  min-height:0 !important;
  margin:16px auto 0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) calc(var(--vv-share-lane) + var(--vv-action-size)) !important;
  column-gap:0 !important;
  align-items:start !important;
  position:relative !important;
}
.voucher-redeem-area::before{
  content:none !important;
}

.voucher-redeem-main{
  grid-column:1 !important;
  min-width:0 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  overflow:visible !important;
}
.voucher-redeem-main .voucher-seal-button,
.voucher-redeem-main .voucher-seal-button.is-static{
  width:calc(100% - 8px) !important;
  max-width:none !important;
  margin:0 0 0 8px !important;
  flex:0 0 auto !important;
}

.voucher-redeem-actions{
  grid-column:2 !important;
  width:calc(var(--vv-share-lane) + var(--vv-action-size)) !important;
  min-width:calc(var(--vv-share-lane) + var(--vv-action-size)) !important;
  position:relative !important;
  align-self:start !important;
}
/* The divider sits exactly halfway between the seal's right edge and the
   circles' left edge. It stops comfortably above the share button. */
.voucher-redeem-actions::before{
  content:"" !important;
  position:absolute !important;
  z-index:0 !important;
  left:calc(var(--vv-share-lane) / 2) !important;
  top:8px !important;
  bottom:calc(var(--vv-share-size) + 14px) !important;
  width:1px !important;
  background:rgba(255,255,255,.34) !important;
  pointer-events:none !important;
}

.voucher-redeem-side{
  width:var(--vv-action-size) !important;
  min-width:var(--vv-action-size) !important;
  margin-left:var(--vv-share-lane) !important;
  padding-top:0 !important;
  align-self:start !important;
}
.voucher-redeem-side .voucher-business-action-row{
  width:var(--vv-action-size) !important;
  min-height:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:var(--vv-action-gap) !important;
}
.voucher-redeem-side .voucher-more-business-button,
.voucher-redeem-side .voucher-business-quick-link{
  width:var(--vv-action-size) !important;
  height:var(--vv-action-size) !important;
  min-width:var(--vv-action-size) !important;
  min-height:var(--vv-action-size) !important;
  flex:0 0 var(--vv-action-size) !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
}

/* Share circle is centred on the divider and bottom-aligned with the final
   circle in the action rail. */
.voucher-redeem-actions .voucher-tell-friend{
  position:absolute !important;
  z-index:2 !important;
  left:calc((var(--vv-share-lane) - var(--vv-share-size)) / 2) !important;
  right:auto !important;
  top:auto !important;
  bottom:0 !important;
  width:var(--vv-share-size) !important;
  height:var(--vv-share-size) !important;
  min-width:var(--vv-share-size) !important;
  min-height:var(--vv-share-size) !important;
  max-width:var(--vv-share-size) !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
}
.voucher-redeem-actions .voucher-tell-friend-icon svg{
  width:27px !important;
  height:27px !important;
  stroke-width:2.25 !important;
}

/* Override the older inherited span size: the information mark should nearly
   fill its circle. */
.voucher-redeem-side .voucher-more-business-button .voucher-info-icon{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
}
.voucher-redeem-side .voucher-more-business-button .voucher-info-letter{
  display:block !important;
  font-family:"Exo 2",Arial,sans-serif !important;
  font-size:43px !important;
  line-height:.68 !important;
  font-weight:950 !important;
  font-style:italic !important;
  letter-spacing:-.11em !important;
  transform:skew(-8deg) translate(-1px,-1px) !important;
}

@media (max-width:520px){
  .voucher-redeem-area{
    --vv-action-size:44px !important;
    --vv-action-gap:9px !important;
    --vv-share-lane:40px !important;
    --vv-share-size:44px !important;
    max-width:100% !important;
    margin-top:18px !important;
  }
  /* On mobile the seal fills its whole left column, making it slightly larger
     while keeping its right edge mathematically aligned to the divider gap. */
  .voucher-redeem-main .voucher-seal-button,
  .voucher-redeem-main .voucher-seal-button.is-static{
    width:calc(100% - 6px) !important;
    max-width:none !important;
    margin-left:6px !important;
  }
  .voucher-redeem-actions::before{
    top:7px !important;
    bottom:calc(var(--vv-share-size) + 13px) !important;
  }
  .voucher-redeem-side .voucher-more-business-button .voucher-info-letter{
    font-size:40px !important;
    line-height:.66 !important;
  }
  .voucher-redeem-side .voucher-more-business-button svg,
  .voucher-redeem-side .voucher-business-quick-link svg,
  .voucher-redeem-side .voucher-business-quick-social svg{
    width:28px !important;
    height:28px !important;
  }
  .voucher-redeem-actions .voucher-tell-friend-icon svg{
    width:25px !important;
    height:25px !important;
  }
}

@media (max-width:380px){
  .voucher-redeem-area{
    --vv-action-size:41px !important;
    --vv-action-gap:8px !important;
    --vv-share-lane:37px !important;
    --vv-share-size:41px !important;
  }
  .voucher-redeem-main .voucher-seal-button,
  .voucher-redeem-main .voucher-seal-button.is-static{
    width:calc(100% - 5px) !important;
    margin-left:5px !important;
  }
  .voucher-redeem-side .voucher-more-business-button .voucher-info-letter{
    font-size:37px !important;
  }
}

/* =====================================================
   v0.62.20 — single action rail, max five circles
   ===================================================== */
/* Final card action model:
   1) info is always first
   2) up to three contact/social actions in the middle
   3) share is always last
   There is no divider/share lane: all actions use one clean vertical rail. */
.voucher-redeem-area{
  --vv-action-size:48px !important;
  --vv-action-gap:9px !important;
  --vv-side-rail:50px !important;
  --vv-side-gap:14px !important;
  width:100% !important;
  max-width:402px !important;
  min-height:0 !important;
  margin:16px auto 0 !important;
  padding:0 !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) var(--vv-side-rail) !important;
  column-gap:var(--vv-side-gap) !important;
  align-items:center !important;
  position:relative !important;
}
.voucher-redeem-area::before{
  content:none !important;
  display:none !important;
}
.voucher-redeem-main{
  grid-column:1 !important;
  min-width:0 !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  overflow:visible !important;
}
.voucher-redeem-main .voucher-seal-button,
.voucher-redeem-main .voucher-seal-button.is-static{
  width:calc(100% - 4px) !important;
  max-width:none !important;
  margin:0 0 0 4px !important;
  flex:0 0 auto !important;
}

.voucher-redeem-side{
  grid-column:2 !important;
  width:var(--vv-side-rail) !important;
  min-width:var(--vv-side-rail) !important;
  margin:0 !important;
  padding:0 !important;
  align-self:center !important;
}
.voucher-redeem-side .voucher-business-action-row{
  width:var(--vv-side-rail) !important;
  min-height:0 !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:var(--vv-action-gap) !important;
}
.voucher-redeem-side .voucher-more-business-button,
.voucher-redeem-side .voucher-business-quick-link,
.voucher-redeem-side .voucher-tell-friend{
  position:relative !important;
  inset:auto !important;
  width:var(--vv-action-size) !important;
  height:var(--vv-action-size) !important;
  min-width:var(--vv-action-size) !important;
  min-height:var(--vv-action-size) !important;
  max-width:var(--vv-action-size) !important;
  flex:0 0 var(--vv-action-size) !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
}

/* The three middle buttons keep the lighter translucent card treatment. */
.voucher-redeem-side .voucher-business-quick-link{
  border:1px solid rgba(255,255,255,.52) !important;
  background:rgba(255,255,255,.22) !important;
  box-shadow:0 5px 12px rgba(20,24,26,.08) !important;
}
.theme-violet .voucher-redeem-side .voucher-business-quick-link{
  color:#302534 !important;
  background:rgba(255,255,255,.31) !important;
}
.theme-teal .voucher-redeem-side .voucher-business-quick-link{
  color:#fff !important;
}

/* Info and Share are deliberately inverse/opposite-brand circles so the two
   fixed actions bookend the variable contact buttons. */
.theme-teal .voucher-redeem-side .voucher-action-special{
  color:#6b4770 !important;
  background:#f1e6f3 !important;
  border:1px solid rgba(255,255,255,.78) !important;
  box-shadow:0 6px 14px rgba(23,29,31,.11) !important;
}
.theme-violet .voucher-redeem-side .voucher-action-special{
  color:#007a72 !important;
  background:#e4f3f1 !important;
  border:1px solid rgba(255,255,255,.82) !important;
  box-shadow:0 6px 14px rgba(23,29,31,.10) !important;
}
.theme-teal .voucher-redeem-side .voucher-action-special:hover{
  background:#f7eef8 !important;
}
.theme-violet .voucher-redeem-side .voucher-action-special:hover{
  background:#edf8f6 !important;
}

/* Large, legible symbols that properly fill each circle. */
.voucher-redeem-side .voucher-more-business-button .voucher-info-icon{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
}
.voucher-redeem-side .voucher-more-business-button .voucher-info-letter{
  display:block !important;
  font-family:"Exo 2",Arial,sans-serif !important;
  font-size:43px !important;
  line-height:.66 !important;
  font-weight:950 !important;
  font-style:italic !important;
  letter-spacing:-.11em !important;
  transform:skew(-8deg) translate(-1px,-1px) !important;
}
.voucher-redeem-side .voucher-business-quick-link svg,
.voucher-redeem-side .voucher-business-quick-social svg,
.voucher-redeem-side .voucher-tell-friend-icon svg{
  width:29px !important;
  height:29px !important;
}
.voucher-redeem-side .voucher-business-quick-social{
  font-size:22px !important;
  line-height:1 !important;
  font-weight:950 !important;
}
.voucher-redeem-side .voucher-tell-friend-icon{
  display:grid !important;
  place-items:center !important;
}
.voucher-redeem-side .voucher-tell-friend-icon svg{
  stroke-width:2.25 !important;
}

@media (max-width:520px){
  .voucher-redeem-area{
    --vv-action-size:46px !important;
    --vv-action-gap:9px !important;
    --vv-side-rail:48px !important;
    --vv-side-gap:10px !important;
    max-width:100% !important;
    margin-top:18px !important;
  }
  .voucher-redeem-main .voucher-seal-button,
  .voucher-redeem-main .voucher-seal-button.is-static{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
  }
  .voucher-redeem-side .voucher-more-business-button .voucher-info-letter{
    font-size:42px !important;
  }
  .voucher-redeem-side .voucher-business-quick-link svg,
  .voucher-redeem-side .voucher-business-quick-social svg,
  .voucher-redeem-side .voucher-tell-friend-icon svg{
    width:29px !important;
    height:29px !important;
  }
}

@media (max-width:380px){
  .voucher-redeem-area{
    --vv-action-size:42px !important;
    --vv-action-gap:8px !important;
    --vv-side-rail:44px !important;
    --vv-side-gap:8px !important;
  }
  .voucher-redeem-side .voucher-more-business-button .voucher-info-letter{
    font-size:39px !important;
  }
  .voucher-redeem-side .voucher-business-quick-link svg,
  .voucher-redeem-side .voucher-business-quick-social svg,
  .voucher-redeem-side .voucher-tell-friend-icon svg{
    width:27px !important;
    height:27px !important;
  }
}


/* =====================================================
   v0.62.21 — icon polish, tighter spacing, flicker-safe overlays
   ===================================================== */
/* Bring the action group a little closer to the address pill. */
.voucher-redeem-area{
  margin-top:11px !important;
}

/* The new information glyph is a purpose-drawn, chunky italic mark modelled
   on a classic display 'i', but centred optically inside the circle. */
.voucher-redeem-side .voucher-more-business-button .voucher-info-icon{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  place-items:center !important;
}
.voucher-redeem-side .voucher-more-business-button .voucher-info-glyph{
  width:35px !important;
  height:38px !important;
  display:block !important;
  transform:translate(1px,0) !important;
  overflow:visible !important;
}
/* Disable the earlier text-i styling now that the icon is SVG. */
.voucher-redeem-side .voucher-more-business-button .voucher-info-letter{
  display:none !important;
}

/* Facebook's single-character mark looked visually smaller than the SVG
   icons. Give it a larger optical size while keeping it centred. */
.voucher-redeem-side .voucher-facebook-glyph{
  display:block !important;
  font-family:Arial Black,Arial,sans-serif !important;
  font-size:30px !important;
  line-height:.9 !important;
  font-weight:900 !important;
  transform:translateY(-1px) !important;
}

/* Apple devices use the familiar square-and-up-arrow share symbol; Android
   and other platforms retain the connected-nodes share symbol. */
.voucher-redeem-side .voucher-share-platform-icon.is-apple{
  width:30px !important;
  height:30px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.05 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.voucher-redeem-side .voucher-share-platform-icon.is-android{
  width:29px !important;
  height:29px !important;
}

@media (max-width:520px){
  .voucher-redeem-area{
    margin-top:12px !important;
  }
  .voucher-redeem-side .voucher-more-business-button .voucher-info-glyph{
    width:35px !important;
    height:39px !important;
  }
  .voucher-redeem-side .voucher-facebook-glyph{
    font-size:31px !important;
  }
}

@media (max-width:380px){
  .voucher-redeem-side .voucher-more-business-button .voucher-info-glyph{
    width:32px !important;
    height:36px !important;
  }
  .voucher-redeem-side .voucher-facebook-glyph{
    font-size:28px !important;
  }
}


/* =====================================================
   v0.62.22 — slimmer information glyph + image error preservation
   ===================================================== */
/* A classic italic serif i, closer to the supplied reference but lighter and
   optically centred inside the fixed inverse-colour information circle. */
.voucher-redeem-side .voucher-more-business-button .voucher-info-serif{
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:43px !important;
  line-height:.82 !important;
  font-weight:700 !important;
  font-style:italic !important;
  letter-spacing:-.08em !important;
  color:currentColor !important;
  transform:translate(1px,-1px) !important;
}
/* v0.62.21 used an SVG version; keep any stale selectors from affecting the
   new text glyph if a browser restores cached DOM during an app update. */
.voucher-redeem-side .voucher-more-business-button .voucher-info-glyph{
  display:none !important;
}

.operator-image-validation-error{
  margin:10px 0 0 !important;
}

@media (max-width:520px){
  .voucher-redeem-side .voucher-more-business-button .voucher-info-serif{
    font-size:42px !important;
    transform:translate(1px,-1px) !important;
  }
}

@media (max-width:380px){
  .voucher-redeem-side .voucher-more-business-button .voucher-info-serif{
    font-size:39px !important;
  }
}

/* =====================================================
   v0.62.23 — remote redemption + information glyph polish
   ===================================================== */
/* The reference i has a narrow italic body. Keep the same inverse colours but
   slim it down and shift it optically left so it sits centrally in the disc. */
.voucher-redeem-side .voucher-more-business-button .voucher-info-serif{
  font-family:Georgia,"Times New Roman",serif !important;
  font-size:43px !important;
  line-height:.82 !important;
  font-weight:700 !important;
  font-style:italic !important;
  letter-spacing:-.09em !important;
  transform:translate(-3px,-1px) scaleX(.82) !important;
  transform-origin:center !important;
}

.operator-redemption-method-section{
  margin-top:22px !important;
}
.operator-remote-redemption-fields{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#faf9f6;
}
.operator-remote-redemption-fields.is-hidden{
  display:none !important;
}

/* Remote live-redemption content replaces the in-person "show this screen"
   instruction inside the gold panel. */
.redemption-overlay-remote-details{
  width:100%;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.28);
  text-align:center;
}
.redemption-overlay-remote-contact-actions{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:42px;
  margin-top:2px;
  white-space:nowrap;
}
.redemption-overlay-remote-contact-label{
  flex:0 0 auto;
  font-size:13px;
  line-height:1;
  font-weight:750;
  white-space:nowrap;
  opacity:.9;
}
.redemption-overlay-remote-contact-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.46);
  border-radius:50%;
  background:rgba(255,255,255,.17);
  color:inherit;
  text-decoration:none;
  box-shadow:0 5px 12px rgba(20,24,26,.08);
}
.redemption-overlay-remote-contact-icon:hover{
  background:rgba(255,255,255,.27);
}
.redemption-overlay-remote-contact-icon svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.redemption-overlay-remote-contact{
  margin-top:4px;
  font-size:15px;
  line-height:1.3;
  font-weight:650;
  overflow-wrap:anywhere;
}
.redemption-overlay-remote-contact strong{
  font-weight:900;
}
.redemption-overlay-remote-code-label{
  margin-top:13px;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.86;
}
.redemption-overlay-remote-code{
  width:100%;
  max-width:100%;
  margin-top:5px;
  font-size:clamp(28px,8vw,42px);
  line-height:1;
  font-weight:950;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  overflow-wrap:normal;
  word-break:normal;
  text-overflow:clip;
}
.redemption-overlay-remote-validity{
  margin-top:8px;
  font-size:12px;
  line-height:1.25;
  font-weight:750;
  opacity:.84;
}

/* A 24-hour remote timer has HH:MM:SS, so give it a little more room than the
   normal minute countdown without changing the in-person overlay layout. */
.redemption-overlay-timer{
  white-space:nowrap;
}

@media (max-width:520px){
  .voucher-redeem-side .voucher-more-business-button .voucher-info-serif{
    font-size:42px !important;
    transform:translate(-3px,-1px) scaleX(.82) !important;
  }
  .redemption-overlay-remote-code{
    font-size:32px;
  }
}

@media (max-width:380px){
  .voucher-redeem-side .voucher-more-business-button .voucher-info-serif{
    font-size:39px !important;
    transform:translate(-2px,-1px) scaleX(.82) !important;
  }
}
.redemption-overlay-remote-contact a{
  color:inherit;
  font-weight:850;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.redemption-overlay.is-remote-redemption .redemption-overlay-timer{
  font-size:clamp(25px,7.4vw,48px) !important;
  letter-spacing:-.045em !important;
}
.voucher-redeem-area.is-remote-redemption .voucher-seal-live-timer{
  width:58% !important;
  font-size:clamp(18px,5vw,27px) !important;
  letter-spacing:-.04em !important;
}


/* =====================================================
   v0.62.24 — remote countdown sizing in offer proof
   Keep 24-hour timers proportional to the simulated phone on desktop proof
   pages. The live customer offer remains unchanged.
   ===================================================== */
@media (min-width:541px){
  .offer-review-phone-screen .redemption-overlay.is-remote-redemption .redemption-overlay-timer{
    font-size:clamp(25px,7.4cqw,48px) !important;
  }

  .offer-review-phone-screen .voucher-redeem-area.is-remote-redemption .voucher-seal-live-timer{
    font-size:clamp(18px,5cqw,27px) !important;
  }
}

/* =====================================================
   v0.62.27 — offer-proof pill text size + centring
   Keep business-only offer terms clear and visually separate from the
   customer-facing voucher preview below.
   ===================================================== */
.offer-review-phone-preview-label{
  margin-bottom:0;
}

.offer-review-offer-facts{
  display:grid;
  gap:9px;
  margin:10px 16px 15px;
}

.offer-review-offer-pill{
  width:100%;
  box-sizing:border-box;
  border:1px solid transparent;
  border-radius:16px;
  padding:9px 13px 10px;
  text-align:center;
  box-shadow:0 4px 12px rgba(31,48,58,.07);
}

.offer-review-offer-pill.is-frequency{
  background:linear-gradient(180deg,rgba(0,127,120,.12),rgba(0,127,120,.07));
  border-color:rgba(0,127,120,.24);
  color:#075f59;
}

.offer-review-offer-pill.is-dates{
  background:linear-gradient(180deg,rgba(167,85,173,.12),rgba(167,85,173,.07));
  border-color:rgba(167,85,173,.24);
  color:#744078;
}

.offer-review-offer-pill-label{
  margin:0 0 3px;
  font-size:12px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase;
  opacity:.78;
}

.offer-review-offer-pill-value{
  margin:0;
  font-size:20px;
  line-height:1.2;
  font-weight:950;
}

@media (max-width:540px){
  .offer-review-offer-facts{
    margin:10px 15px 15px;
    gap:8px;
  }

  .offer-review-offer-pill{
    padding:11px 12px;
    border-radius:15px;
  }

  .offer-review-offer-pill-label{
    font-size:11px;
  }

  .offer-review-offer-pill-value{
    font-size:18px;
  }
}


/* ==========================================================
   v0.64.11 — stronger mobile-stable ambient gradient motion
   Keeps the splash alive without large blurred/animated layers that can
   stress iOS Safari during viewport zoom/resizing.
   ========================================================== */
.vv-launch-splash{
  background:
    radial-gradient(circle at 14% 18%,rgba(201,143,218,.72),transparent 34%),
    radial-gradient(circle at 88% 78%,rgba(42,205,193,.68),transparent 39%),
    radial-gradient(circle at 52% 42%,rgba(255,255,255,.96),rgba(255,255,255,.58) 42%,transparent 70%),
    linear-gradient(135deg,#f3d8f6 0%,#f9f8fb 48%,#b9eee8 100%) !important;
  background-color:#b9eee8 !important;
  animation:none !important;
}
.vv-launch-splash::before{
  inset:-5% !important;
  filter:none !important;
  background:
    radial-gradient(circle at 16% 22%,rgba(190,112,214,.47),transparent 39%),
    radial-gradient(circle at 84% 76%,rgba(24,203,190,.42),transparent 43%),
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.34),transparent 49%) !important;
  transform:translate3d(-2.7%,-1.9%,0) scale(1.035);
  opacity:.60;
  animation:vvSplashAmbientA 6.6s ease-in-out infinite alternate !important;
}
.vv-launch-splash::after{
  inset:-3% !important;
  background:
    radial-gradient(circle at 31% 33%,rgba(255,255,255,.33),transparent 35%),
    radial-gradient(circle at 72% 67%,rgba(255,255,255,.23),transparent 36%) !important;
  transform:translate3d(1.7%,-1%,0) scale(1.015);
  opacity:.46;
  animation:vvSplashAmbientB 8s ease-in-out infinite alternate !important;
}
@keyframes vvSplashAmbientA{
  from{transform:translate3d(-2.7%,-1.9%,0) scale(1.035);opacity:.54}
  48%{opacity:.91}
  to{transform:translate3d(3.2%,2.4%,0) scale(1.072);opacity:1}
}
@keyframes vvSplashAmbientB{
  from{transform:translate3d(1.7%,-1%,0) scale(1.015);opacity:.40}
  to{transform:translate3d(-2.3%,1.9%,0) scale(1.052);opacity:.86}
}
@media (max-width:640px){
  .vv-launch-splash::before,.vv-launch-splash::after{will-change:auto !important}
}
@media (prefers-reduced-motion:reduce){
  .vv-launch-splash::before,.vv-launch-splash::after{animation:none !important}
}


/* ==========================================================
   v0.64.12 — visible, zoom-safe ambient splash gradient
   ========================================================== */
.vv-launch-splash{
  background:
    radial-gradient(circle at 14% 18%,rgba(201,143,218,.78),transparent 34%),
    radial-gradient(circle at 88% 78%,rgba(42,205,193,.74),transparent 39%),
    radial-gradient(circle at 52% 42%,rgba(255,255,255,.96),rgba(255,255,255,.56) 42%,transparent 70%),
    linear-gradient(135deg,#f3d8f6 0%,#f9f8fb 48%,#b9eee8 100%) !important;
  background-size:118% 118%,122% 122%,116% 116%,100% 100% !important;
  background-position:0% 0%,100% 100%,50% 50%,50% 50% !important;
  background-repeat:no-repeat !important;
  animation:vvSplashBackgroundShift 5.4s ease-in-out infinite alternate !important;
}
.vv-launch-splash::before{
  inset:-4% !important;
  filter:none !important;
  transform:translate3d(-4%,-3%,0) scale(1.045) !important;
  opacity:.66 !important;
  animation:vvSplashAmbientA12 4.8s ease-in-out infinite alternate !important;
}
.vv-launch-splash::after{
  inset:-3% !important;
  filter:none !important;
  transform:translate3d(2.5%,-1.6%,0) scale(1.02) !important;
  opacity:.42 !important;
  animation:vvSplashAmbientB12 6.2s ease-in-out infinite alternate !important;
}
@keyframes vvSplashBackgroundShift{
  from{background-position:0% 0%,100% 100%,50% 50%,50% 50%}
  to{background-position:10% 7%,90% 93%,56% 44%,50% 50%}
}
@keyframes vvSplashAmbientA12{
  from{transform:translate3d(-4%,-3%,0) scale(1.045);opacity:.54}
  45%{opacity:.94}
  to{transform:translate3d(5%,3.5%,0) scale(1.09);opacity:1}
}
@keyframes vvSplashAmbientB12{
  from{transform:translate3d(2.5%,-1.6%,0) scale(1.02);opacity:.38}
  to{transform:translate3d(-3.4%,2.8%,0) scale(1.07);opacity:.88}
}
@media(prefers-reduced-motion:reduce){
  .vv-launch-splash{animation:vvSplashBackgroundShift 14s ease-in-out infinite alternate !important}
  .vv-launch-splash::before{animation:vvSplashAmbientA12 14s ease-in-out infinite alternate !important}
  .vv-launch-splash::after{animation:vvSplashAmbientB12 16s ease-in-out infinite alternate !important}
}


/* ==========================================================
   v0.64.13 — clearly visible, iPhone-safe splash ambience
   Uses transform/background-position only; no large blur layer.
   ========================================================== */
.vv-launch-splash{
  background:
    radial-gradient(circle at 9% 16%,rgba(201,143,218,.82),transparent 35%),
    radial-gradient(circle at 91% 79%,rgba(42,205,193,.78),transparent 41%),
    radial-gradient(circle at 52% 42%,rgba(255,255,255,.95),rgba(255,255,255,.50) 43%,transparent 72%),
    linear-gradient(135deg,#f3d8f6 0%,#f9f8fb 48%,#b9eee8 100%) !important;
  background-size:146% 146%,148% 148%,128% 128%,100% 100% !important;
  background-position:-7% -5%,107% 105%,48% 48%,50% 50% !important;
  animation:vvSplashBackgroundShift13 3.1s ease-in-out infinite alternate !important;
}
.vv-launch-splash::before{
  inset:-9% !important;
  filter:none !important;
  background:
    radial-gradient(circle at 16% 22%,rgba(180,91,210,.62),transparent 40%),
    radial-gradient(circle at 84% 76%,rgba(13,199,185,.58),transparent 44%),
    radial-gradient(circle at 51% 46%,rgba(255,255,255,.20),transparent 52%) !important;
  transform:translate3d(-7%,-4%,0) scale(1.035) !important;
  opacity:.70 !important;
  animation:vvSplashAmbientA13 2.8s ease-in-out infinite alternate !important;
}
.vv-launch-splash::after{
  inset:-5% !important;
  filter:none !important;
  background:
    radial-gradient(circle at 31% 33%,rgba(255,255,255,.30),transparent 36%),
    radial-gradient(circle at 72% 67%,rgba(255,255,255,.20),transparent 38%) !important;
  transform:translate3d(4%,-2%,0) scale(1.01) !important;
  opacity:.42 !important;
  animation:vvSplashAmbientB13 3.5s ease-in-out infinite alternate !important;
}
@keyframes vvSplashBackgroundShift13{
  from{background-position:-7% -5%,107% 105%,48% 48%,50% 50%}
  to{background-position:13% 10%,87% 90%,58% 42%,50% 50%}
}
@keyframes vvSplashAmbientA13{
  from{transform:translate3d(-7%,-4%,0) scale(1.035);opacity:.60}
  to{transform:translate3d(8%,5%,0) scale(1.08);opacity:.96}
}
@keyframes vvSplashAmbientB13{
  from{transform:translate3d(4%,-2%,0) scale(1.01);opacity:.34}
  to{transform:translate3d(-5%,3.5%,0) scale(1.055);opacity:.68}
}
@media(prefers-reduced-motion:reduce){
  .vv-launch-splash{animation:vvSplashBackgroundShift13 7s ease-in-out infinite alternate !important}
  .vv-launch-splash::before{animation:vvSplashAmbientA13 7s ease-in-out infinite alternate !important}
  .vv-launch-splash::after{animation:vvSplashAmbientB13 8s ease-in-out infinite alternate !important}
}


/* ==========================================================
   v0.64.14 — edge-free ambient splash motion
   Real circular layers replace transformed pseudo-element rectangles.
   ========================================================== */
.vv-launch-splash{
  isolation:isolate !important;
  background:linear-gradient(135deg,#fbf7fc 0%,#ffffff 47%,#eefbf9 100%) !important;
  background-color:#f5fbfa !important;
  animation:none !important;
}
.vv-launch-splash::before,
.vv-launch-splash::after{
  content:none !important;
  display:none !important;
  animation:none !important;
}
.vv-splash-orb,
.vv-splash-glow{
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  will-change:transform,opacity;
}
.vv-splash-orb-purple{
  width:118vw;
  height:118vw;
  left:-72vw;
  top:-48vw;
  background:radial-gradient(circle,
    rgba(201,143,218,.50) 0%,
    rgba(201,143,218,.31) 31%,
    rgba(201,143,218,.13) 51%,
    rgba(201,143,218,0) 71%);
  opacity:.86;
  animation:vvSplashPurpleOrb14 3.4s ease-in-out infinite alternate;
}
.vv-splash-orb-teal{
  width:128vw;
  height:128vw;
  right:-79vw;
  bottom:-71vw;
  background:radial-gradient(circle,
    rgba(42,205,193,.50) 0%,
    rgba(42,205,193,.30) 31%,
    rgba(42,205,193,.12) 52%,
    rgba(42,205,193,0) 72%);
  opacity:.88;
  animation:vvSplashTealOrb14 3.8s ease-in-out infinite alternate;
}
.vv-splash-glow{
  left:10%;
  top:12%;
  width:80%;
  height:48%;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.44) 43%,
    rgba(255,255,255,0) 76%);
  opacity:.78;
  animation:vvSplashWhiteBreath14 3.2s ease-in-out infinite alternate;
}
.vv-launch-splash-inner{position:relative;z-index:1 !important}
@keyframes vvSplashPurpleOrb14{
  from{transform:translate3d(-3vw,-1vh,0) scale(.98);opacity:.66}
  to{transform:translate3d(20vw,9vh,0) scale(1.10);opacity:.86}
}
@keyframes vvSplashTealOrb14{
  from{transform:translate3d(4vw,4vh,0) scale(1.02);opacity:.66}
  to{transform:translate3d(-20vw,-11vh,0) scale(1.11);opacity:.88}
}
@keyframes vvSplashWhiteBreath14{
  from{transform:scale(.95);opacity:.52}
  to{transform:scale(1.09);opacity:.90}
}
@media(prefers-reduced-motion:reduce){
  .vv-splash-orb-purple{animation:vvSplashPurpleOrb14 10s ease-in-out infinite alternate !important}
  .vv-splash-orb-teal{animation:vvSplashTealOrb14 11s ease-in-out infinite alternate !important}
  .vv-splash-glow{animation:vvSplashWhiteBreath14 10s ease-in-out infinite alternate !important}
}


/* ==========================================================
   v0.64.15 — richer, visibly moving splash ambience
   ========================================================== */
.vv-launch-splash{
  background:linear-gradient(135deg,#f1d7f5 0%,#fbf8fc 45%,#d5f3ef 100%) !important;
  background-color:#dff4f1 !important;
}
.vv-splash-orb-purple{
  width:108vw !important;
  height:108vw !important;
  left:-48vw !important;
  top:-27vw !important;
  background:radial-gradient(circle,
    rgba(190,112,207,.68) 0%,
    rgba(190,112,207,.46) 30%,
    rgba(190,112,207,.22) 50%,
    rgba(190,112,207,.07) 64%,
    rgba(190,112,207,0) 76%) !important;
  opacity:.96 !important;
  animation:vvSplashPurpleOrb15 2.8s ease-in-out -.8s infinite alternate !important;
}
.vv-splash-orb-teal{
  width:116vw !important;
  height:116vw !important;
  right:-50vw !important;
  bottom:-37vw !important;
  background:radial-gradient(circle,
    rgba(38,196,184,.64) 0%,
    rgba(38,196,184,.43) 30%,
    rgba(38,196,184,.20) 51%,
    rgba(38,196,184,.06) 65%,
    rgba(38,196,184,0) 77%) !important;
  opacity:.96 !important;
  animation:vvSplashTealOrb15 3.1s ease-in-out -1.2s infinite alternate !important;
}
.vv-splash-glow{
  left:8% !important;
  top:6% !important;
  width:84% !important;
  height:50% !important;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.84) 0%,
    rgba(255,255,255,.47) 40%,
    rgba(255,255,255,.10) 65%,
    rgba(255,255,255,0) 78%) !important;
  animation:vvSplashWhiteBreath15 2.6s ease-in-out -.6s infinite alternate !important;
}
@keyframes vvSplashPurpleOrb15{
  0%{transform:translate3d(-2vw,-2vh,0) scale(.96);opacity:.76}
  50%{opacity:1}
  100%{transform:translate3d(25vw,13vh,0) scale(1.10);opacity:.90}
}
@keyframes vvSplashTealOrb15{
  0%{transform:translate3d(4vw,5vh,0) scale(.98);opacity:.74}
  50%{opacity:1}
  100%{transform:translate3d(-25vw,-15vh,0) scale(1.11);opacity:.91}
}
@keyframes vvSplashWhiteBreath15{
  0%{transform:scale(.96);opacity:.56}
  100%{transform:scale(1.07);opacity:.88}
}
@media(prefers-reduced-motion:reduce){
  .vv-splash-orb-purple{animation:vvSplashPurpleOrb15 5s ease-in-out -1s infinite alternate !important}
  .vv-splash-orb-teal{animation:vvSplashTealOrb15 5.5s ease-in-out -1.5s infinite alternate !important}
  .vv-splash-glow{animation:vvSplashWhiteBreath15 5s ease-in-out -1s infinite alternate !important}
}


/* ==========================================================
   v0.64.16 — static splash background
   ========================================================== */
.vv-launch-splash{
  background:
    radial-gradient(circle at 9% 18%,
      rgba(190,112,207,.58) 0%,
      rgba(190,112,207,.39) 24%,
      rgba(190,112,207,.17) 43%,
      rgba(190,112,207,0) 63%),
    radial-gradient(circle at 92% 82%,
      rgba(38,196,184,.56) 0%,
      rgba(38,196,184,.37) 25%,
      rgba(38,196,184,.15) 45%,
      rgba(38,196,184,0) 65%),
    radial-gradient(ellipse at 54% 34%,
      rgba(255,255,255,.88) 0%,
      rgba(255,255,255,.54) 34%,
      rgba(255,255,255,.15) 57%,
      rgba(255,255,255,0) 72%),
    linear-gradient(135deg,#efd4f4 0%,#faf8fc 47%,#ccefeb 100%) !important;
  background-color:#d9f1ee !important;
  background-size:auto !important;
  background-position:initial !important;
  animation:none !important;
}

.vv-launch-splash::before,
.vv-launch-splash::after,
.vv-splash-orb,
.vv-splash-glow{
  display:none !important;
  animation:none !important;
  transform:none !important;
}


/* ==========================================================
   v0.64.17 — slightly lighter static splash gradient
   ========================================================== */
.vv-launch-splash{
  background:
    radial-gradient(circle at 9% 18%,
      rgba(190,112,207,.52) 0%,
      rgba(190,112,207,.34) 24%,
      rgba(190,112,207,.14) 43%,
      rgba(190,112,207,0) 63%),
    radial-gradient(circle at 92% 82%,
      rgba(38,196,184,.50) 0%,
      rgba(38,196,184,.32) 25%,
      rgba(38,196,184,.13) 45%,
      rgba(38,196,184,0) 65%),
    radial-gradient(ellipse at 54% 34%,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.60) 34%,
      rgba(255,255,255,.18) 57%,
      rgba(255,255,255,0) 72%),
    linear-gradient(135deg,#f2dbf7 0%,#fcfbfd 47%,#d5f3ef 100%) !important;
  background-color:#e0f4f1 !important;
}


/* ==========================================================
   v0.64.19 — brighter separated static splash gradient
   ========================================================== */
.vv-launch-splash{
  background:
    radial-gradient(ellipse at 50% 47%,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.96) 23%,
      rgba(255,255,255,.80) 37%,
      rgba(255,255,255,.34) 50%,
      rgba(255,255,255,0) 62%),
    radial-gradient(circle at 5% 14%,
      rgba(190,112,207,.52) 0%,
      rgba(190,112,207,.34) 22%,
      rgba(190,112,207,.14) 38%,
      rgba(190,112,207,0) 55%),
    radial-gradient(circle at 95% 86%,
      rgba(38,196,184,.50) 0%,
      rgba(38,196,184,.32) 23%,
      rgba(38,196,184,.13) 40%,
      rgba(38,196,184,0) 57%),
    linear-gradient(135deg,#f2dbf7 0%,#ffffff 49%,#d5f3ef 100%) !important;
  background-color:#eef9f7 !important;
  animation:none !important;
}


/* ==========================================================
   v0.64.26 — iOS/Safari live-redemption scrolling fix
   ========================================================== */

/* The live redemption is its own scroll surface. Using a block scroll
   container avoids iOS Safari's fixed + grid overflow edge case, where
   content could extend underneath the floating browser toolbar without
   creating usable scroll range. Review/proof overlays keep their simulated
   phone layout unchanged. */
.redemption-overlay.is-live-overlay:not(.is-review-redemption){
  display:block !important;
  height:100svh !important;
  min-height:100svh !important;
  max-height:100svh !important;
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  padding:
    calc(58px + env(safe-area-inset-top))
    6px
    calc(150px + env(safe-area-inset-bottom))
    !important;
}

/* Let the content determine its own height rather than forcing a 100%-high
   flex item inside the scroll container. */
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-stage{
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
  padding:
    4px
    0
    calc(110px + env(safe-area-inset-bottom))
    !important;
}

/* Keep the close control visible while the redemption itself scrolls. */
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-close{
  position:fixed !important;
}

/* Extra breathing room after the final terms ensures Safari's floating
   bottom controls can never cover the last readable lines. */
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-offer-terms{
  margin-bottom:0 !important;
  padding-bottom:
    calc(90px + env(safe-area-inset-bottom))
    !important;
}

@supports (height:100dvh){
  .redemption-overlay.is-live-overlay:not(.is-review-redemption){
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
  }
}



/* ==========================================================
   v0.64.27 — full-height live redemption dimmer on iOS Safari
   ========================================================== */

/* Safari can size the scrollable live-redemption surface to the visual
   viewport while its floating toolbar still overlays a strip below it.
   Put the dimmer on BODY, outside the scroll container, and deliberately
   extend it beyond the viewport so the background stays consistently dark
   all the way underneath the browser controls. */
body.has-live-redemption-overlay::before{
  content:"";
  position:fixed;
  z-index:4999;
  top:-35vh;
  right:-4px;
  bottom:-45vh;
  left:-4px;
  pointer-events:none;
  background:rgba(17,23,25,.90);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}

body.has-live-redemption-overlay.redemption-theme-teal::before{
  background:rgba(31,15,34,.90);
}

body.has-live-redemption-overlay.redemption-theme-violet::before{
  background:rgba(0,53,50,.92);
}

/* The body-level dimmer now owns the backdrop for a real live redemption.
   Leaving the overlay's own fixed backdrop active would darken the visible
   area twice while still not helping the Safari toolbar underlay. */
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-backdrop{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}



/* ==========================================================
   v0.64.28 — browser/PWA redemption viewport refinement
   ========================================================== */

/*
  Paint the dimming colour on the live overlay itself. This prevents the
  underlying app header/page showing through at the top in standalone mode
  and gives Safari a single continuous dark surface to composite.
*/
.redemption-overlay.is-live-overlay:not(.is-review-redemption){
  background:rgba(17,23,25,.90) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.redemption-overlay.is-live-overlay.theme-teal:not(.is-review-redemption){
  background:rgba(31,15,34,.90) !important;
}

.redemption-overlay.is-live-overlay.theme-violet:not(.is-review-redemption){
  background:rgba(0,53,50,.92) !important;
}

/* The overlay itself now owns the dimmer, so the previous body underlay is
   unnecessary and can no longer create a separate visible band. */
body.has-live-redemption-overlay::before{
  display:none !important;
}

/* Keep the nested backdrop transparent to avoid double-darkening. */
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-backdrop{
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/*
  Installed/PWA mode has no Safari address bar. The browser-oriented top
  breathing room was therefore making the redemption appear too low.
  Lift the live voucher significantly while still respecting the iPhone
  status-bar safe area.
*/
@media (display-mode:standalone){
  .redemption-overlay.is-live-overlay:not(.is-review-redemption){
    padding-top:
      calc(6px + env(safe-area-inset-top))
      !important;
    padding-bottom:
      calc(34px + env(safe-area-inset-bottom))
      !important;
  }

  .redemption-overlay.is-live-overlay:not(.is-review-redemption)
  .redemption-overlay-stage{
    padding-top:0 !important;
    padding-bottom:
      calc(46px + env(safe-area-inset-bottom))
      !important;
  }

  .redemption-overlay.is-live-overlay:not(.is-review-redemption)
  .redemption-overlay-close{
    top:
      calc(7px + env(safe-area-inset-top))
      !important;
  }

  .redemption-overlay.is-live-overlay:not(.is-review-redemption)
  .redemption-offer-terms{
    padding-bottom:
      calc(40px + env(safe-area-inset-bottom))
      !important;
  }
}

/*
  In normal Safari keep enough top space for the browser/status area and a
  generous scroll tail for the floating toolbar. The dynamic theme-colour
  applied by app.js makes Safari's bottom chrome blend with this dark surface.
*/
@media not all and (display-mode:standalone){
  .redemption-overlay.is-live-overlay:not(.is-review-redemption){
    padding-top:
      calc(42px + env(safe-area-inset-top))
      !important;
    padding-bottom:
      calc(170px + env(safe-area-inset-bottom))
      !important;
  }

  .redemption-overlay.is-live-overlay:not(.is-review-redemption)
  .redemption-overlay-stage{
    padding-bottom:
      calc(145px + env(safe-area-inset-bottom))
      !important;
  }

  .redemption-overlay.is-live-overlay:not(.is-review-redemption)
  .redemption-offer-terms{
    padding-bottom:
      calc(120px + env(safe-area-inset-bottom))
      !important;
  }
}


/* ==========================================================
   v0.64.29 — Safari root underlay + reliable PWA positioning
   ========================================================== */

/* Safari may composite its floating toolbar against the document root rather
   than against a fixed modal. Darken both root surfaces while redemption is
   active so there is no teal/white page colour available underneath it. */
html.has-live-redemption-overlay,
body.has-live-redemption-overlay{
  background:#171d1f !important;
}

html.has-live-redemption-overlay.redemption-theme-teal,
body.has-live-redemption-overlay.redemption-theme-teal{
  background:#241327 !important;
}

html.has-live-redemption-overlay.redemption-theme-violet,
body.has-live-redemption-overlay.redemption-theme-violet{
  background:#003b37 !important;
}

/*
  Normal Safari: use the LARGE viewport, not the dynamic visual viewport.
  This deliberately paints the redemption surface beneath the floating
  toolbar. The overlay remains its own scroll surface.
*/
html:not(.vv-standalone)
.redemption-overlay.is-live-overlay:not(.is-review-redemption){
  top:0 !important;
  right:0 !important;
  bottom:auto !important;
  left:0 !important;
  height:100lvh !important;
  min-height:100lvh !important;
  max-height:none !important;
  padding-top:
    calc(38px + env(safe-area-inset-top))
    !important;
  padding-bottom:
    calc(220px + env(safe-area-inset-bottom))
    !important;
}

html:not(.vv-standalone)
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-stage{
  padding-bottom:
    calc(180px + env(safe-area-inset-bottom))
    !important;
}

html:not(.vv-standalone)
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-offer-terms{
  padding-bottom:
    calc(150px + env(safe-area-inset-bottom))
    !important;
}

/*
  Installed iOS app: navigator.standalone is more reliable than the CSS
  display-mode query. Pull the voucher presentation upward; there is no
  Safari address bar to reserve space for.
*/
html.vv-standalone
.redemption-overlay.is-live-overlay:not(.is-review-redemption){
  height:100dvh !important;
  min-height:100dvh !important;
  max-height:100dvh !important;
  padding-top:
    calc(env(safe-area-inset-top) + 2px)
    !important;
  padding-bottom:
    calc(28px + env(safe-area-inset-bottom))
    !important;
}

html.vv-standalone
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-stage{
  margin-top:-52px !important;
  padding-top:0 !important;
  padding-bottom:
    calc(88px + env(safe-area-inset-bottom))
    !important;
}

html.vv-standalone
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-close{
  top:
    calc(7px + env(safe-area-inset-top))
    !important;
}

html.vv-standalone
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-offer-terms{
  padding-bottom:
    calc(70px + env(safe-area-inset-bottom))
    !important;
}



/* ==========================================================
   v0.64.30 — Safari live-redemption takeover refinement
   ========================================================== */

/*
  Safari's floating toolbar can sample the underlying document outside the
  fixed modal's visual viewport. While a real live redemption is open, hide
  the underlying app content entirely (but keep the redemption overlay).
  This makes the page beneath Safari's top/bottom chrome the same dark
  redemption colour rather than the normal teal/offers screen.
*/
html:not(.vv-standalone)
body.has-live-redemption-overlay
#app > *:not(.redemption-overlay){
  visibility:hidden !important;
  pointer-events:none !important;
}

/*
  The redemption itself remains fully visible and interactive.
*/
html:not(.vv-standalone)
body.has-live-redemption-overlay
#app > .redemption-overlay{
  visibility:visible !important;
  pointer-events:auto !important;
}

/*
  Pull the live voucher presentation slightly higher in normal Safari.
  This affects the scroll content only; the fixed close control remains
  safely positioned below the status area.
*/
html:not(.vv-standalone)
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-stage{
  margin-top:-28px !important;
}

/*
  Give the document enough dark scrollable paint below the redemption so
  Safari's bottom toolbar never reveals the normal offers page beneath it.
*/
html:not(.vv-standalone).has-live-redemption-overlay,
html:not(.vv-standalone).has-live-redemption-overlay body,
html:not(.vv-standalone).has-live-redemption-overlay #app{
  min-height:calc(100lvh + 280px) !important;
  background:inherit !important;
}



/* ==========================================================
   v0.64.31 — move Safari live redemption higher
   ========================================================== */

/* There is still useful empty space below the iPhone status area in normal
   Safari. Pull only the redemption content upward; leave the close button and
   Safari underlay behaviour unchanged. */
html:not(.vv-standalone)
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-stage{
  margin-top:-72px !important;
}



/* ==========================================================
   v0.64.32 — move Safari voucher artwork much closer to top
   ========================================================== */

/*
  Normal Safari only: pull the scrolling voucher content much higher so the
  top of the circular live-voucher artwork sits close to the top of the page.
  The fixed close X keeps its existing position. Standalone/PWA positioning
  is unchanged.
*/
html:not(.vv-standalone)
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-stage{
  margin-top:-205px !important;
}

/* Preserve generous scroll tail after moving the content upward. */
html:not(.vv-standalone)
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-offer-terms{
  padding-bottom:
    calc(230px + env(safe-area-inset-bottom))
    !important;
}



/* ==========================================================
   v0.64.33 — rebalance Safari redemption height
   ========================================================== */

/*
  v0.64.32 pulled the voucher too far upward. Move it back down to a
  midpoint: still higher than v0.64.31, but with the full top edge of the
  circular voucher comfortably visible. The close X stays fixed.
*/
html:not(.vv-standalone)
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-stage{
  margin-top:-118px !important;
}



/* ==========================================================
   v0.64.34 — tiny Safari redemption position adjustment
   ========================================================== */

/* Move the Safari voucher content down just a little from v0.64.33 so the
   circular voucher has a touch more breathing room at the top. The close X
   remains fixed in exactly the same place. */
html:not(.vv-standalone)
.redemption-overlay.is-live-overlay:not(.is-review-redemption)
.redemption-overlay-stage{
  margin-top:-105px !important;
}



/* ==========================================================
   v0.64.35 — immediate redemption activation feedback
   ========================================================== */

.redemption-overlay.is-activating-redemption
.redemption-overlay-close-disabled{
  cursor:default !important;
  opacity:.72 !important;
}

.redemption-overlay.is-activating-redemption
.redemption-overlay-activating-centre{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
}

.redemption-overlay-activating-label{
  font-weight:900;
  font-size:clamp(24px, 7vw, 42px);
  line-height:.98;
  letter-spacing:-.035em;
  color:#8e5797;
}

.redemption-overlay-activating-spinner{
  width:34px;
  height:34px;
  border-radius:50%;
  border:4px solid rgba(142,87,151,.24);
  border-top-color:currentColor;
  color:#8e5797;
  animation:vv-redemption-activating-spin .75s linear infinite;
}

.redemption-overlay-activating-note{
  width:min(82vw, 520px);
  margin:18px auto 0;
  text-align:center;
  font-size:16px;
  font-weight:700;
  line-height:1.35;
  color:rgba(255,255,255,.88);
}

@keyframes vv-redemption-activating-spin{
  to{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion:reduce){
  .redemption-overlay-activating-spinner{
    animation-duration:1.5s;
  }
}


/* ==========================================================
   v0.64.37 — Add to Home Screen prompt
   ========================================================== */

.vv-install-prompt{
  position:fixed;
  z-index:4300;
  left:50%;
  bottom:calc(92px + env(safe-area-inset-bottom));
  width:min(calc(100vw - 28px),440px);
  transform:translateX(-50%);
  padding:16px;
  border:1px solid rgba(0,127,120,.18);
  border-radius:22px;
  background:
    linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,252,251,.98));
  box-shadow:
    0 24px 60px rgba(31,46,50,.24),
    0 4px 16px rgba(31,46,50,.10);
  color:#263238;
  animation:
    vvInstallPromptIn .48s cubic-bezier(.2,.85,.25,1) both;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

.vv-install-prompt::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:
    radial-gradient(circle at 8% 0%,rgba(174,97,183,.16),transparent 36%),
    radial-gradient(circle at 100% 100%,rgba(0,163,151,.15),transparent 38%);
  pointer-events:none;
}

@keyframes vvInstallPromptIn{
  from{
    opacity:0;
    transform:translate(-50%,26px) scale(.97);
  }
  to{
    opacity:1;
    transform:translate(-50%,0) scale(1);
  }
}

.vv-install-prompt-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding-right:27px;
}

.vv-install-prompt-icon,
.vv-install-guide-icon{
  display:block;
  flex:0 0 auto;
  border-radius:14px;
  box-shadow:0 8px 18px rgba(55,60,67,.14);
}

.vv-install-prompt-icon{
  width:54px;
  height:54px;
  animation:
    vvInstallIconPulse 2.3s ease-in-out 1s infinite;
}

@keyframes vvInstallIconPulse{
  0%,72%,100%{transform:translateY(0) scale(1)}
  82%{transform:translateY(-4px) scale(1.035)}
  90%{transform:translateY(0) scale(1)}
}

.vv-install-prompt-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.vv-install-prompt-copy strong{
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:17px;
  line-height:1.15;
  font-weight:850;
  letter-spacing:-.02em;
}

.vv-install-prompt-copy span{
  font-size:13px;
  line-height:1.35;
  color:#66747a;
}

.vv-install-prompt-close{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#7a8589;
  font-size:25px;
  line-height:1;
}

.vv-install-prompt-button{
  width:100%;
  margin-top:13px;
  border:0;
  border-radius:14px;
  padding:13px 16px;
  background:linear-gradient(135deg,#007f78,#00a397);
  color:#fff;
  font-family:"Exo 2",system-ui,sans-serif;
  font-weight:850;
  box-shadow:0 8px 18px rgba(0,127,120,.20);
}

.vv-install-prompt-later{
  display:block;
  margin:8px auto -4px;
  padding:7px 12px;
  border:0;
  background:transparent;
  color:#68767b;
  font-size:12px;
  font-weight:750;
}

.vv-install-guide-overlay{
  position:fixed;
  z-index:7200;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.vv-install-guide-backdrop{
  position:absolute;
  inset:0;
  width:100%;
  border:0;
  background:rgba(27,29,36,.48);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}

.vv-install-guide-sheet{
  position:relative;
  z-index:1;
  width:min(100%,480px);
  max-height:calc(100dvh - 42px);
  overflow:auto;
  padding:
    12px 20px
    calc(24px + env(safe-area-inset-bottom));
  border-radius:28px 28px 0 0;
  background:#fff;
  box-shadow:0 -22px 65px rgba(20,28,32,.28);
  animation:
    vvInstallGuideUp .42s cubic-bezier(.2,.85,.25,1) both;
}

@keyframes vvInstallGuideUp{
  from{transform:translateY(45px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.vv-install-guide-handle{
  width:42px;
  height:5px;
  margin:0 auto 16px;
  border-radius:999px;
  background:#d8dedf;
}

.vv-install-guide-close{
  position:absolute;
  top:14px;
  right:15px;
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:#f1f5f4;
  color:#435157;
  font-size:25px;
  line-height:1;
}

.vv-install-guide-icon{
  width:64px;
  height:64px;
  margin:4px auto 12px;
}

.vv-install-guide-eyebrow{
  text-align:center;
  color:#007f78;
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:12px;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.vv-install-guide-sheet h2{
  margin:7px auto 8px;
  max-width:360px;
  text-align:center;
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:25px;
  line-height:1.08;
  letter-spacing:-.035em;
}

.vv-install-guide-intro{
  margin:0 auto 18px;
  max-width:370px;
  text-align:center;
  color:#66747a;
  font-size:14px;
  line-height:1.45;
}

.vv-install-guide-steps{
  display:grid;
  gap:10px;
}

.vv-install-guide-step{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  min-height:74px;
  padding:12px;
  border:1px solid #e2e9e7;
  border-radius:17px;
  background:#f8fbfa;
}

.vv-install-guide-number{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e3f6f3;
  color:#007f78;
  font-weight:900;
}

.vv-install-guide-step strong,
.vv-install-guide-step span{
  display:block;
}

.vv-install-guide-step strong{
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:14px;
  line-height:1.2;
  font-weight:850;
}

.vv-install-guide-step div > span{
  margin-top:3px;
  color:#68767b;
  font-size:12px;
  line-height:1.35;
}

.vv-ios-share-icon{
  position:relative;
  width:32px;
  height:28px;
  display:grid !important;
  place-items:start center;
  border:2px solid #007f78;
  border-top-color:transparent;
  border-radius:5px;
  color:#007f78;
  font-size:23px;
  font-weight:800;
  line-height:16px;
}

.vv-install-guide-plus{
  color:#007f78;
  font-size:30px;
  font-weight:500;
}

.vv-install-guide-done{
  width:100%;
  margin-top:16px;
  border:0;
  border-radius:14px;
  padding:14px 16px;
  background:#007f78;
  color:#fff;
  font-family:"Exo 2",system-ui,sans-serif;
  font-weight:850;
}

body.has-vv-install-guide{
  overflow:hidden;
}

@media (max-width:480px){
  .vv-install-prompt{
    bottom:calc(88px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion:reduce){
  .vv-install-prompt,
  .vv-install-prompt-icon,
  .vv-install-guide-sheet{
    animation:none !important;
  }
}

html.vv-standalone .vv-install-prompt,
html.vv-standalone .vv-install-guide-overlay{
  display:none !important;
}



/* ==========================================================
   v0.64.38 — newer iPhone Safari install instructions
   ========================================================== */

.vv-ios-menu-icon{
  min-width:38px;
  height:30px;
  display:grid !important;
  place-items:center;
  border-radius:999px;
  background:#edf5f4;
  color:#007f78;
  font-size:20px;
  font-weight:900;
  letter-spacing:1px;
  line-height:1;
}



/* ==========================================================
   v0.64.44 — email marketing consent + privacy controls
   ========================================================== */

.vv-marketing-prompt{
  position:fixed;
  z-index:4290;
  left:50%;
  bottom:calc(92px + env(safe-area-inset-bottom));
  width:min(calc(100vw - 28px),440px);
  transform:translateX(-50%);
  padding:18px 16px 15px;
  border:1px solid rgba(157,106,172,.20);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.985),rgba(250,247,252,.985));
  box-shadow:0 24px 60px rgba(31,46,50,.24),0 4px 16px rgba(31,46,50,.10);
  color:#263238;
  animation:vvMarketingPromptIn .48s cubic-bezier(.2,.85,.25,1) both;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

@keyframes vvMarketingPromptIn{
  from{opacity:0;transform:translate(-50%,26px) scale(.97)}
  to{opacity:1;transform:translate(-50%,0) scale(1)}
}

.vv-marketing-prompt-close{
  position:absolute;
  top:8px;
  right:8px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#7a8589;
  font-size:25px;
  line-height:1;
}

.vv-marketing-prompt-eyebrow{
  padding-right:34px;
  color:#007f78;
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:11px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.085em;
  text-transform:uppercase;
}

.vv-marketing-prompt h2{
  margin:6px 32px 6px 0;
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:20px;
  line-height:1.12;
  letter-spacing:-.025em;
}

.vv-marketing-prompt p{
  margin:0;
  color:#66747a;
  font-size:13px;
  line-height:1.42;
}

.vv-marketing-prompt-button{
  width:100%;
  margin-top:14px;
  border:0;
  border-radius:14px;
  padding:13px 16px;
  background:linear-gradient(135deg,#9d6aac,#b784c4);
  color:#fff;
  font-family:"Exo 2",system-ui,sans-serif;
  font-weight:850;
  box-shadow:0 8px 18px rgba(157,106,172,.22);
}

.vv-marketing-prompt-later{
  display:block;
  margin:7px auto -1px;
  padding:7px 12px;
  border:0;
  background:transparent;
  color:#68767b;
  font-size:12px;
  font-weight:750;
}

.vv-marketing-prompt-privacy{
  display:block;
  width:max-content;
  margin:3px auto 0;
  color:#68767b;
  font-size:11px;
  text-decoration:underline;
  text-underline-offset:2px;
}

.vv-email-preferences-card{
  margin-top:14px;
}

.vv-email-preference-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:16px;
  padding:14px;
  border:1px solid #dce8e5;
  border-radius:16px;
  background:#f8fbfa;
}

.vv-email-preference-row > div{
  min-width:0;
}

.vv-email-preference-row strong,
.vv-email-preference-row span{
  display:block;
}

.vv-email-preference-row strong{
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:14px;
  line-height:1.2;
}

.vv-email-preference-row div > span{
  margin-top:4px;
  color:#68767b;
  font-size:12px;
  line-height:1.35;
}

.vv-email-preference-toggle{
  flex:0 0 auto;
  min-width:62px;
  border:0;
  border-radius:999px;
  padding:9px 13px;
  background:#dfe5e4;
  color:#5c696d;
  font-weight:850;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

.vv-email-preference-toggle.is-on{
  background:#007f78;
  color:#fff;
}

.vv-email-preference-toggle:active:not(:disabled){
  transform:scale(.97);
}

.vv-email-preference-toggle:disabled{
  opacity:.6;
}

.vv-email-privacy-link a{
  color:var(--brand);
  font-weight:800;
}

@media(max-width:480px){
  .vv-marketing-prompt{
    bottom:calc(88px + env(safe-area-inset-bottom));
  }
}

@media(prefers-reduced-motion:reduce){
  .vv-marketing-prompt{
    animation:none !important;
  }
}


/* ==========================================================
   v0.64.46 — membership terms + data-rights controls
   ========================================================== */

.vv-membership-contract-summary{
  margin:16px 0 12px;
  padding:14px 15px;
  border:1px solid rgba(0,127,120,.18);
  border-radius:15px;
  background:#eef9f7;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.vv-membership-contract-summary strong{
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:16px;
}

.vv-membership-contract-summary span{
  color:#607075;
  font-size:13px;
  line-height:1.4;
}

.vv-membership-terms-consent{
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  gap:10px;
  align-items:start;
  margin:12px 0 16px;
  padding:13px 14px;
  border:1px solid #dfe8e6;
  border-radius:14px;
  background:#fff;
  color:#4b5a5f;
  font-size:12.5px;
  line-height:1.45;
}

.vv-membership-terms-consent input{
  width:20px;
  height:20px;
  margin:1px 0 0;
  accent-color:#007f78;
}

.vv-membership-terms-consent a{
  color:#007f78;
  font-weight:800;
}

.vv-data-rights-block{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #e2e9e7;
}

.vv-data-rights-block > strong{
  display:block;
  margin-bottom:5px;
  font-family:"Exo 2",system-ui,sans-serif;
  font-size:16px;
}

.vv-data-rights-block > p{
  margin:0 0 12px;
  color:#66747a;
  font-size:13px;
  line-height:1.45;
}

.vv-data-rights-actions{
  display:grid;
  gap:8px;
}

.vv-data-rights-actions .btn{
  margin:0;
}

.vv-data-delete-request{
  border-color:rgba(132,74,94,.22) !important;
  color:#704052 !important;
}



/* ==========================================================
   v0.64.47 — clearer membership Terms validation
   ========================================================== */

.vv-membership-terms-consent.is-error{
  border-color:#c8443d !important;
  background:#fff7f6 !important;
  box-shadow:
    0 0 0 3px rgba(200,68,61,.11);
}

.vv-membership-terms-consent.is-error input{
  outline:2px solid rgba(200,68,61,.28);
  outline-offset:2px;
}

.vv-membership-terms-error{
  margin:-4px 0 12px;
  padding:10px 12px;
  border-radius:11px;
  background:#fff1ef;
  border:1px solid rgba(180,35,24,.18);
  color:#b42318;
  font-size:13px;
  line-height:1.4;
  font-weight:750;
}



/* ==========================================================
   v0.64.50 — shorter Terms checkbox + separate cooling-off note
   ========================================================== */

.vv-membership-cooling-off-note{
  margin:-5px 2px 14px;
  color:#6d797d;
  font-size:11.5px;
  line-height:1.4;
}



/* ==========================================================
   v0.64.51 — membership CTA copy + cooling-off note position
   ========================================================== */

.vv-membership-cooling-off-note-below-button{
  margin:10px 2px 8px;
}



/* v0.64.71-dev: operator dashboard metrics + offer deletion */
.operator-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.operator-delete-offer-box{
  margin-top:18px;
  padding:16px;
  border:1px solid #efc9c4;
  border-radius:17px;
  background:#fff8f7;
}
.operator-delete-offer-box strong{display:block;margin-bottom:5px}
.operator-delete-offer-box .meta{margin:0 0 12px}
.operator-delete-offer-box .btn{margin:0}
@media (max-width:420px){
  .operator-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v0.64.71-dev: live-offer metrics exclude offers belonging to inactive businesses */


/* v0.64.71-dev: archived businesses keep published offer state but show inherited inactivity */
.status-chip.inactive{
  background:#f1f1ef;
  color:var(--muted);
}
.operator-business-archived-note{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0 0 18px;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#f7f5f0;
  color:var(--ink);
}
.operator-business-archived-note span{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}


/* ==========================================================
   v0.64.59 / v1.1.11 — fixed top anchor for redemption artwork
   ========================================================== */

/*
   Redemption content must grow downwards. A taller gold information panel
   must never cause the timer/seal artwork above it to be vertically centred
   and pushed up beyond the top edge of the viewport or proof phone.
*/
.redemption-overlay.is-live-overlay{
  align-items:start !important;
  justify-items:center !important;
}

.redemption-overlay.is-live-overlay .redemption-overlay-stage{
  justify-content:flex-start !important;
  min-height:0 !important;
  height:auto !important;
  flex:0 0 auto !important;
}

.redemption-overlay.is-live-overlay .redemption-overlay-seal-rail,
.redemption-overlay.is-live-overlay .redemption-overlay-seal{
  flex-shrink:0 !important;
}

/* Review/proof overlays still use the simulated phone viewport. Make that
   overlay a top-anchored scroll surface instead of a centred CSS-grid item,
   so extra offer/contact/terms content can only extend downwards. */
.redemption-overlay.is-live-overlay.is-review-redemption{
  display:block !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}

.redemption-overlay.is-live-overlay.is-review-redemption .redemption-overlay-stage{
  margin-top:0 !important;
}

@media (min-width:541px){
  .offer-review-phone-screen .redemption-overlay.is-live-overlay.is-review-redemption{
    padding-top:54px !important;
  }

  .offer-review-phone-screen .redemption-overlay.is-live-overlay.is-review-redemption
  .redemption-overlay-stage{
    padding-top:0 !important;
    padding-bottom:28px !important;
  }
}


/* ==========================================================
   v0.64.60 — desktop proof seal visual-top correction
   ========================================================== */
/*
   The redemption seal PNG contains transparent space around the visible
   circular artwork. The real phone overlay already looks correct, but in the
   desktop simulated-phone proof the new top anchor was anchoring the PNG box
   rather than the visible circle. Pull only the proof seal rail upward by the
   asset's visual padding. This does not affect real customer redemptions.
*/
@media (min-width:541px){
  .offer-review-phone-screen
  .redemption-overlay.is-live-overlay.is-review-redemption
  .redemption-overlay-seal-rail{
    margin-top:clamp(-138px,-21cqw,-120px) !important;
  }
}

/* v0.64.61 / v1.1.13 — desktop proof-only refinement.
   The page-level peach warning already makes the preview state clear, so the
   duplicate in-phone PREVIEW ONLY pill is removed. The visible seal circle is
   pulled further upward to compensate for transparent padding in the PNG. */


/* v0.64.63 / v1.1.15 — desktop proof seal micro-tweak.
   Nudge the desktop proof-only seal slightly downward again so it sits a touch
   lower without affecting real customer redemption positioning. */


/* ==========================================================
   v0.64.71-dev — corrected offer-card address wrapping + larger map pin
   ========================================================== */
.voucher-address-pill > span:last-child{
  overflow-wrap:normal;
  word-break:normal;
}

.voucher-address-pin,
.voucher-address-pin svg{
  width:28px !important;
  height:28px !important;
}
.voucher-address-pin svg{
  stroke-width:2.1;
}


/* v0.64.71-dev — same-card collapse history sync runs before the visible
   accordion transition, preventing intermittent one-frame image flashes. */


/* ==========================================================
   v0.64.71 — access-aware availability + offer end-date flashes
   ========================================================== */
/* Keep availability wording on one line and stack an optional expiry flash
   directly underneath it in the same top-right image corner. */
.voucher-frequency-flash{
  white-space:nowrap !important;
}
.voucher-end-flash{
  position:absolute;
  z-index:3;
  top:56px;
  right:11px;
  display:inline-flex;
  align-items:center;
  min-height:30px;
  max-width:calc(100% - 22px);
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  background:rgba(35,39,43,.76);
  color:#fff;
  box-shadow:0 6px 15px rgba(20,20,20,.15);
  font-size:12px;
  line-height:1.1;
  font-weight:850;
  text-align:center;
  white-space:nowrap;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
@media (max-width:420px){
  .voucher-end-flash{
    top:54px;
    right:9px;
    min-height:27px;
    padding:5px 9px;
    font-size:11px;
  }
}
/* v1.1.20-live — three-line access-aware redemption wording inside the voucher seal. */
.voucher-seal-join-text{
  width:52% !important;
  gap:0 !important;
}
.voucher-seal-join-text span{
  display:block;
  font-size:15px !important;
  line-height:1.02 !important;
  font-weight:900 !important;
  letter-spacing:-.015em !important;
  white-space:nowrap;
}
.voucher-seal-short-cta{
  width:48% !important;
}
.voucher-seal-short-cta span{
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:-.01em !important;
}
.voucher-seal-member-text{
  width:52% !important;
}
.voucher-seal-member-text span{
  font-size:15px !important;
  line-height:1.02 !important;
  letter-spacing:-.02em !important;
}


/* v1.1.21-live — installed-PWA six-digit email authentication. */
.vv-auth-code-input{
  max-width:280px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-size:30px !important;
  line-height:1.2;
  font-weight:850;
  letter-spacing:.34em;
  font-variant-numeric:tabular-nums;
}
.vv-auth-code-input::placeholder{
  letter-spacing:.34em;
  opacity:.28;
}


/* ==========================================================
   v0.64.75-dev — mobile offer-proof redemption positioning
   ========================================================== */
/*
   On a real phone, the business offer-proof page uses the real browser
   viewport rather than the desktop simulated phone. Keep that preview
   overlay painted to the full viewport and compensate for the transparent
   top padding in the voucher artwork, matching the visual top anchoring used
   by the desktop mock-phone proof. Review/proof only: customer redemption
   positioning is unchanged.
*/
@media (max-width:540px){
  .offer-review-phone-screen >
  .redemption-overlay.is-live-overlay.is-review-redemption{
    position:fixed !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    box-sizing:border-box !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-top:calc(48px + env(safe-area-inset-top)) !important;
    padding-bottom:calc(26px + env(safe-area-inset-bottom)) !important;
  }

  .offer-review-phone-screen
  .redemption-overlay.is-live-overlay.is-review-redemption
  .redemption-overlay-backdrop{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
  }

  .offer-review-phone-screen
  .redemption-overlay.is-live-overlay.is-review-redemption
  .redemption-overlay-stage{
    width:100% !important;
    min-height:0 !important;
    height:auto !important;
    margin-top:0 !important;
    padding-top:0 !important;
    padding-bottom:calc(34px + env(safe-area-inset-bottom)) !important;
  }

  /* The seal PNG deliberately contains transparent space around the circle.
     Cancel that visual top padding on a real phone proof just as we do in the
     desktop mock phone; safe-area inset is cancelled only for the artwork,
     while the close button remains safely below the status area. */
  .offer-review-phone-screen
  .redemption-overlay.is-live-overlay.is-review-redemption
  .redemption-overlay-seal-rail{
    margin-top:calc(-22vw - env(safe-area-inset-top)) !important;
  }
}

/* In ordinary mobile Safari use the large viewport so the proof dimmer is
   painted behind the floating browser controls all the way to the bottom. */
@media (max-width:540px){
  html:not(.vv-standalone)
  .offer-review-phone-screen >
  .redemption-overlay.is-live-overlay.is-review-redemption{
    bottom:auto !important;
    height:100lvh !important;
    min-height:100lvh !important;
    max-height:none !important;
  }

  html:not(.vv-standalone)
  .offer-review-phone-screen
  .redemption-overlay.is-live-overlay.is-review-redemption
  .redemption-overlay-backdrop{
    height:100lvh !important;
    min-height:100lvh !important;
  }
}


/* ==========================================================
   v0.64.76-dev — mobile offer-proof edge-to-edge Safari underlay
   ========================================================== */
/*
   Mobile Safari can composite its translucent top/bottom browser chrome
   against the document root outside the fixed visual viewport. While an
   offer-proof redemption is open, paint an oversized theme-matched underlay
   behind the proof so the normal offer page can never show through above or
   below it. This remains review/proof only; real customer redemption is
   unchanged.
*/
@media (max-width:540px){
  html.has-review-redemption-overlay,
  body.has-review-redemption-overlay{
    background:#171d1f !important;
  }

  html.has-review-redemption-overlay.review-redemption-theme-teal,
  body.has-review-redemption-overlay.review-redemption-theme-teal{
    background:#241327 !important;
  }

  html.has-review-redemption-overlay.review-redemption-theme-violet,
  body.has-review-redemption-overlay.review-redemption-theme-violet{
    background:#003b37 !important;
  }

  body.has-review-redemption-overlay::before{
    content:"";
    position:fixed;
    z-index:49;
    top:-45vh;
    right:-6px;
    bottom:-55vh;
    left:-6px;
    pointer-events:none;
    background:rgba(17,23,25,.92);
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
  }

  body.has-review-redemption-overlay.review-redemption-theme-teal::before{
    background:rgba(31,15,34,.92);
  }

  body.has-review-redemption-overlay.review-redemption-theme-violet::before{
    background:rgba(0,53,50,.94);
  }

  html:not(.vv-standalone).has-review-redemption-overlay,
  html:not(.vv-standalone).has-review-redemption-overlay body,
  html:not(.vv-standalone).has-review-redemption-overlay #app{
    min-height:calc(100lvh + 320px) !important;
    background:inherit !important;
  }

  /* The oversized root underlay owns the Safari bleed area. Keep the proof
     backdrop responsible only for the normal viewport, avoiding a doubled
     dark band at the top or bottom. */
  html:not(.vv-standalone)
  .offer-review-phone-screen
  .redemption-overlay.is-live-overlay.is-review-redemption
  .redemption-overlay-backdrop{
    background:transparent !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  html:not(.vv-standalone)
  .offer-review-phone-screen >
  .redemption-overlay.is-live-overlay.is-review-redemption{
    background:rgba(17,23,25,.90) !important;
  }

  html:not(.vv-standalone)
  .offer-review-phone-screen >
  .redemption-overlay.is-live-overlay.is-review-redemption.theme-teal{
    background:rgba(31,15,34,.90) !important;
  }

  html:not(.vv-standalone)
  .offer-review-phone-screen >
  .redemption-overlay.is-live-overlay.is-review-redemption.theme-violet{
    background:rgba(0,53,50,.92) !important;
  }
}


/* ==========================================================
   v0.64.77-dev — live operator audience + redemption metrics
   ========================================================== */
.operator-metrics-section{
  margin:14px 0 20px;
}
.operator-metrics-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:0 1px 10px;
}
.operator-metrics-heading h2{
  margin:4px 0 0;
  font-size:22px;
  line-height:1.08;
  letter-spacing:-.03em;
}
.operator-live-indicator{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:7px 10px;
  border:1px solid #cfe2df;
  border-radius:999px;
  background:#f2fbf9;
  color:var(--brand-dark);
  font-size:11px;
  line-height:1;
  font-weight:800;
  white-space:nowrap;
}
.operator-live-indicator i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 4px rgba(10,138,130,.10);
}
.operator-total-users-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:19px 20px;
  border-radius:20px;
  background:linear-gradient(145deg,var(--brand-deep),var(--brand));
  color:#fff;
  box-shadow:0 12px 26px rgba(0,83,79,.15);
}
.operator-total-users-card > div{
  flex:0 0 auto;
}
.operator-total-users-card span{
  display:block;
  color:#dff4f1;
  font-size:12px;
  line-height:1.15;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.operator-total-users-card strong{
  display:block;
  margin-top:3px;
  font-size:43px;
  line-height:.95;
  letter-spacing:-.055em;
  font-weight:950;
}
.operator-total-users-card p{
  max-width:370px;
  margin:0;
  color:#e7f6f4;
  font-size:12px;
  line-height:1.45;
  font-weight:650;
}
.operator-audience-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:9px;
}
.operator-redemption-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}
.operator-stat-detail,
.operator-stat-redemption{
  min-height:80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.operator-stat-detail strong,
.operator-stat-redemption strong{
  font-size:27px;
}
.operator-stat-unverified{
  grid-column:1 / -1;
  min-height:0;
  padding:13px 15px 14px;
  background:#faf9f7;
  border-style:dashed;
  justify-content:flex-start;
}
.operator-stat-unverified-title{
  display:block;
  margin-bottom:10px;
  color:var(--muted);
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  text-align:left;
}
.operator-unverified-split{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
}
.operator-unverified-split > div{
  min-width:0;
  padding:1px 10px;
  text-align:center;
}
.operator-unverified-split > div + div{
  border-left:1px solid #e1ddd7;
}
.operator-unverified-split strong{
  display:block;
  font-size:25px;
  line-height:1;
}
.operator-unverified-split small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:10px;
  line-height:1.15;
  font-weight:750;
}
.operator-operations-section .operator-stats{
  margin:0;
}
@media (max-width:640px){
  .operator-audience-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .operator-total-users-card{
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
  }
  .operator-total-users-card p{
    max-width:none;
  }
}
@media (max-width:420px){
  .operator-metrics-heading{
    align-items:center;
  }
  .operator-metrics-heading h2{
    font-size:20px;
  }
  .operator-live-indicator{
    padding:6px 8px;
    font-size:10px;
  }
  .operator-total-users-card{
    padding:17px;
  }
  .operator-total-users-card strong{
    font-size:39px;
  }
  .operator-redemption-stats{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
  }
  .operator-stat-redemption{
    padding-left:6px;
    padding-right:6px;
  }
  .operator-stat-redemption strong{
    font-size:23px;
  }
  .operator-stat-redemption span{
    font-size:10px;
  }
}


/* ==========================================================
   v0.64.82-dev — aligned audience calendar-period rows
   ========================================================== */
.operator-total-users-card{
  display:grid;
  grid-template-columns:minmax(112px,.42fr) minmax(0,.58fr);
  align-items:stretch;
  gap:18px;
  min-height:112px;
  padding:17px 20px;
}
.operator-total-users-number{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.operator-total-users-card strong{
  margin-top:4px;
  font-size:clamp(62px,9vw,82px);
  line-height:.78;
  letter-spacing:-.07em;
}
.operator-total-users-card p{
  align-self:center;
  max-width:none;
  margin:0;
}
.operator-audience-rows{
  display:grid;
  gap:9px;
  margin-top:9px;
}
.operator-audience-row{
  padding:13px 15px 14px;
  border:1px solid;
  border-radius:16px;
}
.operator-audience-row-title{
  display:block;
  margin-bottom:10px;
  font-size:11px;
  line-height:1.2;
  font-weight:850;
  text-align:left;
}
.operator-audience-row-split{
  display:grid;
  width:100%;
}
.operator-audience-row-split-3{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.operator-audience-row-split-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.operator-audience-row-split > div{
  min-width:0;
  padding:1px 10px;
  text-align:center;
}
.operator-audience-row-split > div + div{
  border-left:1px solid rgba(51,47,40,.13);
}
.operator-audience-row-split strong{
  display:block;
  font-size:26px;
  line-height:1;
  letter-spacing:-.035em;
  font-weight:900;
}
.operator-audience-row-split small{
  display:block;
  margin-top:5px;
  font-size:10px;
  line-height:1.15;
  font-weight:750;
}
.operator-audience-row-free{
  background:#fff4dd;
  border-color:#efd6a4;
}
.operator-audience-row-free .operator-audience-row-title,
.operator-audience-row-free strong{
  color:#80540e;
}
.operator-audience-row-free small{
  color:#8a6a35;
}
.operator-audience-row-paid{
  background:#e8f7ed;
  border-color:#b9ddc3;
}
.operator-audience-row-paid .operator-audience-row-title,
.operator-audience-row-paid strong{
  color:#20663b;
}
.operator-audience-row-paid small{
  color:#47775a;
}
.operator-audience-row-unverified{
  background:#fce9e7;
  border-color:#edc3be;
}
.operator-audience-row-unverified .operator-audience-row-title,
.operator-audience-row-unverified strong{
  color:#93463e;
}
.operator-audience-row-unverified small{
  color:#9a655f;
}
@media (max-width:640px){
  .operator-total-users-card{
    grid-template-columns:minmax(108px,.42fr) minmax(0,.58fr);
    align-items:stretch;
    gap:13px;
  }
  .operator-total-users-card p{
    max-width:none;
  }
}
@media (max-width:420px){
  .operator-total-users-card{
    min-height:106px;
    padding:15px 16px;
    gap:11px;
  }
  .operator-total-users-card strong{
    font-size:64px;
  }
  .operator-total-users-card p{
    font-size:10.5px;
    line-height:1.35;
  }
  .operator-audience-row{
    padding:12px 9px 13px;
  }
  .operator-audience-row-title{
    padding-left:5px;
  }
  .operator-audience-row-split > div{
    padding-left:5px;
    padding-right:5px;
  }
  .operator-audience-row-split strong{
    font-size:23px;
  }
  .operator-audience-row-split small{
    font-size:9px;
  }
}

/* ==========================================================
   v0.64.82-dev — aligned calendar-period audience stats
   ========================================================== */
.operator-audience-row-split-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.operator-plus-one-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  width:100%;
  margin-top:8px;
  padding:6px 0;
  border-top:1px solid rgba(32,102,59,.18);
  border-bottom:1px solid rgba(32,102,59,.18);
}
.operator-plus-one-strip > div{
  min-width:0;
  padding:0 10px;
  text-align:center;
  color:#6b8874;
  font-size:10px;
  line-height:1.1;
  font-weight:650;
}
.operator-plus-one-strip > div + div{
  border-left:1px solid rgba(32,102,59,.10);
}
.operator-plus-one-value{
  display:inline-flex;
  align-items:baseline;
  gap:1px;
  font-size:11px;
  font-weight:700;
  color:#63806d;
}
.operator-plus-one-value b{
  font:inherit;
  color:inherit;
}
.operator-plus-one-strip small{
  display:inline;
  margin:0 0 0 3px;
  font-size:8px;
  line-height:1;
  font-weight:600;
  color:#789482;
}
@media (max-width:420px){
  .operator-audience-row-split > div,
  .operator-plus-one-strip > div{
    padding-left:4px;
    padding-right:4px;
  }
  .operator-audience-row-split strong{
    font-size:22px;
  }
  .operator-audience-row-split small{
    font-size:8.5px;
  }
  .operator-plus-one-strip{
    margin-top:7px;
    padding-top:5px;
    padding-bottom:5px;
  }
  .operator-plus-one-value{
    font-size:10px;
  }
  .operator-plus-one-strip small{
    font-size:7.5px;
  }
}

/* ==========================================================
   v0.64.88-dev — aligned audience + growth colours and funnel rows
   ========================================================== */
.operator-current-audience-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-top:9px;
}
.operator-current-audience-card{
  min-width:0;
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:13px 14px;
  border:1px solid;
  border-radius:16px;
}
.operator-current-audience-card strong{
  display:block;
  font-size:29px;
  line-height:1;
  letter-spacing:-.04em;
  font-weight:900;
}
.operator-current-audience-card strong b{
  font:inherit;
  color:inherit;
}
.operator-current-audience-card span{
  display:block;
  margin-top:7px;
  font-size:10.5px;
  line-height:1.2;
  font-weight:800;
}
.operator-current-audience-substat{
  display:block;
  margin-top:4px;
  font-size:9px;
  line-height:1.15;
  font-weight:600;
  opacity:.72;
}
.operator-current-audience-substat b{
  font:inherit;
  font-weight:800;
  color:inherit;
}
.operator-current-audience-paid,
.operator-current-audience-plus-one{
  background:#e8f7ed;
  border-color:#b9ddc3;
  color:#20663b;
}
.operator-current-audience-plus-one{
  background:#f0f8f2;
}
.operator-current-audience-free{
  background:#fff4dd;
  border-color:#efd6a4;
  color:#80540e;
}
.operator-current-audience-unverified{
  background:#fce9e7;
  border-color:#edc3be;
  color:#93463e;
}
.operator-current-audience-marketing{
  background:#f3eaf4;
  border-color:#dacbde;
  color:#855b8a;
}
.operator-current-audience-home-screen{
  background:#eaf3ff;
  border-color:#bfd4ee;
  color:#315f8d;
}
.operator-growth-explainer{
  margin:-2px 1px 10px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
  font-weight:600;
}
.operator-growth-table{
  overflow:hidden;
  border:1px solid #ded8e0;
  border-radius:16px;
  background:#fff;
  box-shadow:0 7px 18px rgba(52,35,55,.035);
}
.operator-growth-header,
.operator-growth-row{
  display:grid;
  grid-template-columns:minmax(145px,1.35fr) repeat(3,minmax(74px,1fr));
  align-items:center;
}
.operator-growth-header{
  min-height:35px;
  padding:0 10px;
  background:#f8f6f9;
  border-bottom:1px solid #e5dfe7;
}
.operator-growth-header small{
  min-width:0;
  padding:0 8px;
  color:var(--muted);
  font-size:9px;
  line-height:1.1;
  font-weight:800;
  text-align:center;
}
.operator-growth-row{
  min-height:62px;
  padding:0 10px;
}
.operator-growth-row + .operator-growth-row{
  border-top:1px solid #ece7ed;
}
.operator-growth-row > span{
  min-width:0;
  padding:0 10px 0 4px;
  color:var(--brand-deep);
  font-size:11px;
  line-height:1.2;
  font-weight:850;
}
.operator-growth-row > strong{
  min-width:0;
  padding:5px 8px;
  border-left:1px solid #eee9ef;
  color:#263b39;
  font-size:25px;
  line-height:1;
  letter-spacing:-.035em;
  font-weight:900;
  text-align:center;
}
.operator-growth-row-paid{
  background:#e8f7ed;
}
.operator-growth-row-paid > span,
.operator-growth-row-paid > strong{
  color:#20663b;
}
.operator-growth-row-plus-one{
  background:#f0f8f2;
}
.operator-growth-row-plus-one > span,
.operator-growth-row-plus-one > strong{
  color:#20663b;
}
.operator-growth-row-free{
  background:#fff4dd;
}
.operator-growth-row-free > span,
.operator-growth-row-free > strong{
  color:#80540e;
}
.operator-growth-row-unverified{
  background:#fce9e7;
}
.operator-growth-row-unverified > span,
.operator-growth-row-unverified > strong{
  color:#93463e;
}
.operator-growth-row-marketing{
  background:#f3eaf4;
}
.operator-growth-row-marketing > span,
.operator-growth-row-marketing > strong{
  color:#855b8a;
}
.operator-growth-row-home-screen{
  background:#eaf3ff;
}
.operator-growth-row-home-screen > span,
.operator-growth-row-home-screen > strong{
  color:#315f8d;
}
@media (max-width:640px){
  .operator-current-audience-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:420px){
  .operator-current-audience-card{
    min-height:78px;
    padding:11px 12px;
  }
  .operator-current-audience-card strong{
    font-size:26px;
  }
  .operator-current-audience-card span{
    margin-top:6px;
    font-size:10px;
  }
  .operator-growth-explainer{
    font-size:10.5px;
  }
  .operator-growth-header,
  .operator-growth-row{
    grid-template-columns:minmax(112px,1.25fr) repeat(3,minmax(0,1fr));
    padding-left:6px;
    padding-right:6px;
  }
  .operator-growth-header small{
    padding-left:3px;
    padding-right:3px;
    font-size:7.5px;
  }
  .operator-growth-row{
    min-height:58px;
  }
  .operator-growth-row > span{
    padding-left:3px;
    padding-right:7px;
    font-size:9.5px;
  }
  .operator-growth-row > strong{
    padding-left:3px;
    padding-right:3px;
    font-size:21px;
  }
}

/* ==========================================================
   Operator business map pin editor — v0.64.91-dev
   ========================================================== */
.operator-map-editor{
  margin:14px 0 18px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 7px 18px rgba(52,35,55,.045)
}
.operator-map-editor-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px
}
.operator-map-editor-heading>div{
  min-width:0
}
.operator-map-editor-heading strong{
  display:block;
  color:var(--ink);
  font-size:14px;
  line-height:1.25
}
.operator-map-editor-heading span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35
}
.operator-map-address-btn{
  flex:0 0 auto;
  border:1px solid #cfdedc;
  border-radius:999px;
  background:var(--brand-soft);
  color:var(--brand-dark);
  padding:7px 10px;
  font:inherit;
  font-size:11px;
  font-weight:800;
  cursor:pointer
}
.operator-map-address-btn:disabled{
  opacity:.55;
  cursor:default
}
.operator-map-canvas{
  position:relative;
  height:250px;
  overflow:hidden;
  border:1px solid #d9d2dc;
  border-radius:14px;
  background:#e9ecef;
  cursor:crosshair;
  isolation:isolate
}
.operator-map-tiles{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
  background:#e9ecef
}
.operator-map-tiles img{
  position:absolute;
  width:256px;
  height:256px;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none
}
.operator-map-pin{
  position:absolute;
  z-index:4;
  width:38px;
  height:50px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  transform:translate(-50%,-100%);
  cursor:grab;
  touch-action:none;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.28))
}
.operator-map-pin svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible
}
.operator-map-pin path{
  fill:var(--brand-deep)
}
.operator-map-pin circle{
  fill:#fff
}
.operator-map-editor.is-dragging-pin .operator-map-pin{
  cursor:grabbing;
  transform:translate(-50%,-100%) scale(1.06)
}
.operator-map-zoom-controls{
  position:absolute;
  z-index:5;
  top:10px;
  right:10px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.16);
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 7px rgba(0,0,0,.16)
}
.operator-map-zoom-controls button{
  width:34px;
  height:34px;
  border:0;
  background:#fff;
  color:#252525;
  font:inherit;
  font-size:22px;
  line-height:1;
  cursor:pointer
}
.operator-map-zoom-controls button+button{
  border-top:1px solid #ddd
}
.operator-map-zoom-controls button:active{
  background:#f1f1f1
}
.operator-map-loading{
  position:absolute;
  z-index:6;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:9px 12px;
  border-radius:999px;
  background:rgba(0,77,73,.92);
  color:#fff;
  font-size:12px;
  font-weight:800;
  box-shadow:0 4px 14px rgba(0,0,0,.18)
}
.operator-map-loading[hidden]{
  display:none
}
.operator-map-attribution{
  position:absolute;
  z-index:3;
  right:5px;
  bottom:4px;
  padding:2px 4px;
  border-radius:4px;
  background:rgba(255,255,255,.86);
  color:#555;
  font-size:9px;
  line-height:1.2;
  text-decoration:none
}
.operator-map-status{
  margin:8px 2px 0
}
.operator-map-status.is-success{
  color:var(--success)
}
.operator-map-status.is-error{
  color:#a13535
}
@media (max-width:420px){
  .operator-map-editor{
    padding:11px
  }
  .operator-map-editor-heading{
    gap:8px
  }
  .operator-map-editor-heading span{
    font-size:11px
  }
  .operator-map-address-btn{
    padding:6px 9px
  }
  .operator-map-canvas{
    height:230px
  }
}

/* =====================================================
   PRIZE DRAWS
   ===================================================== */
.competition-card-kicker,
.operator-competition-kicker{
  margin:0 0 5px;
  color:var(--brand-deep);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase
}
.competition-prize-panel{
  margin:0 0 14px;
  padding:14px 15px;
  border:1px solid rgba(0,77,73,.14);
  border-radius:14px;
  background:rgba(255,255,255,.76)
}
.competition-prize-panel .eyebrow{margin-bottom:4px}
.competition-prize-panel strong{display:block;font-size:17px;line-height:1.3;color:var(--brand-deep)}
.competition-prize-panel span{display:block;margin-top:7px;color:var(--muted);font-size:12px}
.competition-seal-text{font-size:13px;line-height:1.05}
.competition-entry-confirmed-text{font-size:12px}
.competition-terms{margin-top:12px}
.competition-entry-overlay,
.competition-winner-overlay{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px
}
.competition-entry-panel,
.competition-winner-panel{
  position:relative;
  z-index:2;
  width:min(100%,460px);
  max-height:min(720px,calc(100vh - 40px));
  overflow:auto;
  padding:26px 22px 22px;
  border-radius:22px;
  background:#fff;
  box-shadow:0 22px 70px rgba(0,0,0,.28)
}
.competition-entry-panel h2,
.competition-winner-panel h2{margin:5px 44px 10px 0;color:var(--brand-deep)}
.competition-entry-panel p{line-height:1.45}
.competition-entry-error{margin:12px 0}
.competition-entry-submit{margin-top:14px}
.competition-winner-panel{text-align:center;background:#f8f6f9}
.competition-winner-brand{display:block;width:min(270px,78%);height:auto;margin:8px auto 18px}
.competition-winner-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 15px;
  padding:8px 16px;
  border-radius:999px;
  background:var(--brand-deep);
  color:#fff;
  font-size:13px;
  font-weight:900;
  letter-spacing:.15em
}
.competition-winner-prize{
  margin:14px 0;
  padding:16px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 5px 18px rgba(0,0,0,.06)
}
.competition-winner-prize span,
.competition-winner-code-label{display:block;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.competition-winner-prize strong{display:block;margin-top:5px;color:var(--brand-deep);font-size:19px;line-height:1.3}
.competition-winner-business,.competition-winner-name{margin:7px 0;font-weight:700}
.competition-winner-code{margin:7px auto 14px;padding:10px 12px;border:2px dashed var(--brand-deep);border-radius:12px;background:#fff;color:var(--brand-deep);font-size:22px;font-weight:900;letter-spacing:.08em}
.competition-winner-loading{padding:28px 8px;color:var(--muted);font-weight:700}
.operator-competition-image-thumb{margin:12px 0;overflow:hidden;border-radius:12px;aspect-ratio:16/9;background:#eee}
.operator-competition-image-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.operator-competition-details{display:flex;flex-wrap:wrap;gap:10px 18px;margin:12px 0;color:var(--muted);font-size:12px}
.operator-competition-details span{display:flex;gap:5px;align-items:baseline}
.operator-competition-prize-summary{margin:12px 0;padding:12px 14px;border-radius:12px;background:#f7f5f8}
.operator-competition-prize-summary span{display:block;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.operator-competition-prize-summary strong{display:block;margin-top:4px;line-height:1.35}
.operator-competition-winner-summary{margin:12px 0;padding:14px;border-radius:12px;background:#e8f6ef;color:#194d37}
.operator-competition-winner-summary strong,.operator-competition-winner-summary span,.operator-competition-winner-summary small{display:block;margin-top:3px}
.operator-competition-entry-warning{display:grid;gap:5px;margin:14px 0;padding:13px 14px;border-radius:12px;background:#fff4d8;color:#72520a}
.operator-competition-entry-warning span{font-size:12px;line-height:1.4}
.operator-competition-actions{display:flex;flex-wrap:wrap;gap:8px}
.operator-competition-actions button{width:auto;margin:0}
.operator-draw-winner-btn{background:var(--brand-deep)}
.status-chip.competition-complete{background:#e8e1f1;color:#654d75}
.operator-competition-dates-grid{align-items:start}
@media (max-width:520px){
  .competition-entry-overlay,.competition-winner-overlay{padding:12px;align-items:flex-end}
  .competition-entry-panel,.competition-winner-panel{width:100%;max-height:calc(100vh - 24px);border-radius:22px 22px 16px 16px}
  .operator-competition-actions{display:grid;grid-template-columns:1fr 1fr}
  .operator-competition-actions button{width:100%}
}

.operator-business-actions.has-prize-draws{
  grid-template-columns:1fr auto auto
}
@media (max-width:520px){
  .operator-business-actions.has-prize-draws{
    grid-template-columns:1fr 1fr
  }
  .operator-business-actions.has-prize-draws .operator-business-primary{
    grid-column:1 / -1
  }
  .operator-business-actions.has-prize-draws .operator-business-manage{
    width:100%
  }
}

/* =====================================================
   v0.64.94-dev — prize draw card refinements
   ===================================================== */
.competition-band.theme-teal,
.competition-band.theme-violet{
  --voucher-bg:#d9bd67 !important;
  --voucher-accent:#9a6f13 !important;
  --voucher-accent-dark:#5b410b !important;
  background:
    linear-gradient(
      112deg,
      rgba(92,58,0,.10) 0%,
      rgba(255,255,255,.17) 18%,
      rgba(255,255,255,.03) 34%,
      rgba(255,244,194,.24) 49%,
      rgba(255,255,255,.04) 64%,
      rgba(102,66,0,.10) 100%
    ),
    linear-gradient(
      100deg,
      #c8a747 0%,
      #dfc674 23%,
      #f1e0a7 41%,
      #d4b45c 58%,
      #ead58f 77%,
      #c9aa4d 100%
    ) !important;
  color:#3e2d09 !important;
}
.competition-band .voucher-saving,
.competition-band .voucher-description,
.competition-band .voucher-shop-name,
.competition-band .competition-card-kicker{
  color:#4b3508 !important;
}
.competition-band .competition-card-kicker{
  opacity:.86;
}
.competition-band .competition-courtesy-label{
  color:#5d430d !important;
  opacity:.82;
}
.competition-band .voucher-address-pill{
  color:#4a3408 !important;
  border-color:rgba(82,57,6,.16) !important;
  background:rgba(255,251,229,.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 6px 14px rgba(71,48,4,.08) !important;
}
.competition-band .voucher-address-pill:hover{
  background:rgba(255,251,229,.46) !important;
}
.competition-business-profile{
  margin:0 0 5px;
}
.competition-prize-panel{
  margin:0 0 14px;
  padding:13px 15px;
  border:1px solid rgba(89,61,5,.13);
  background:rgba(255,252,236,.58);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34)
}
.competition-prize-panel strong{
  display:block;
  margin:0;
  color:#493207;
  font-size:17px;
  line-height:1.32;
  font-weight:850;
}
.competition-prize-panel .competition-prize-label{
  display:inline;
  margin:0;
  color:inherit;
  font:inherit;
  font-weight:inherit;
}
.competition-prize-panel small{
  display:block;
  margin-top:6px;
  color:#6e5a30;
  font-size:12px;
  line-height:1.25;
  font-weight:650;
}

/* =====================================================
   v0.64.95-dev — prize draw info + fixed metallic finish
   ===================================================== */
.competition-prize-panel .competition-prize-line,
.competition-prize-panel .competition-closing-line{
  display:block;
  margin:0;
  color:#493207;
  font-size:17px;
  line-height:1.32;
}
.competition-prize-panel .competition-closing-line{
  margin-top:6px;
}
.competition-prize-panel .competition-prize-line strong,
.competition-prize-panel .competition-closing-line strong{
  display:inline;
  margin:0;
  color:inherit;
  font:inherit;
  font-weight:850;
}
.competition-prize-panel .competition-prize-line span,
.competition-prize-panel .competition-closing-line span{
  display:inline;
  margin:0;
  color:inherit;
  font:inherit;
  font-weight:500;
}

/* Prize-draw small print remains readable against the gold paper. */
.competition-band .competition-terms,
.competition-band .competition-terms strong{
  color:#111 !important;
}
.competition-band .competition-terms > div + div{
  border-top-color:rgba(0,0,0,.20) !important;
}

/*
  Keep the metallic highlights tied to horizontal x positions rather than the
  voucher height. Expanding/collapsing therefore cannot make the sheen slide.
  The exact same fixed gold finish is also masked into the perforated edge.
*/
.competition-band.theme-teal,
.competition-band.theme-violet{
  --competition-gold-finish:
    linear-gradient(
      90deg,
      rgba(92,58,0,.11) 0%,
      rgba(255,255,255,.18) 18%,
      rgba(255,255,255,.035) 34%,
      rgba(255,244,194,.25) 49%,
      rgba(255,255,255,.045) 64%,
      rgba(102,66,0,.11) 100%
    ),
    linear-gradient(
      90deg,
      #c8a747 0%,
      #dfc674 23%,
      #f1e0a7 41%,
      #d4b45c 58%,
      #ead58f 77%,
      #c9aa4d 100%
    );
  background:var(--competition-gold-finish) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:left top !important;
}

.voucher-band + .competition-band::before,
.competition-band.is-first-offer::before{
  background:var(--competition-gold-finish) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:left top !important;
  -webkit-mask:
    radial-gradient(
      circle at 14px 12px,
      #000 0 8px,
      transparent 8.4px
    ) 0 0 / 28px 12px repeat-x;
  mask:
    radial-gradient(
      circle at 14px 12px,
      #000 0 8px,
      transparent 8.4px
    ) 0 0 / 28px 12px repeat-x;
}

.competition-band.is-last-offer::after{
  background:var(--competition-gold-finish) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:left top !important;
  -webkit-mask:
    radial-gradient(
      circle at 14px 0,
      #000 0 8px,
      transparent 8.4px
    ) 0 0 / 28px 12px repeat-x;
  mask:
    radial-gradient(
      circle at 14px 0,
      #000 0 8px,
      transparent 8.4px
    ) 0 0 / 28px 12px repeat-x;
}

@media (max-width:420px){
  .voucher-band + .competition-band::before,
  .competition-band.is-first-offer::before{
    -webkit-mask:
      radial-gradient(
        circle at 12.5px 11px,
        #000 0 7.2px,
        transparent 7.6px
      ) 0 0 / 25px 11px repeat-x;
    mask:
      radial-gradient(
        circle at 12.5px 11px,
        #000 0 7.2px,
        transparent 7.6px
      ) 0 0 / 25px 11px repeat-x;
  }
  .competition-band.is-last-offer::after{
    -webkit-mask:
      radial-gradient(
        circle at 12.5px 0,
        #000 0 7.2px,
        transparent 7.6px
      ) 0 0 / 25px 11px repeat-x;
    mask:
      radial-gradient(
        circle at 12.5px 0,
        #000 0 7.2px,
        transparent 7.6px
      ) 0 0 / 25px 11px repeat-x;
  }
}


/* =====================================================
   v0.64.96-dev — metallic standard cards + prize-draw entry exclusions polish
   ===================================================== */

/* v0.64.97-dev — keep the redeemed voucher artwork at full strength.
   Only the central V mark is softened behind Entry confirmed / Winner selected. */
.competition-entry-confirmed-seal > img{
  opacity:1 !important;
}
.competition-entry-confirmed-seal::before{
  content:"";
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:44%;
  height:44%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(
    ellipse at center,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.78) 34%,
    rgba(255,255,255,.54) 56%,
    rgba(255,255,255,.18) 68%,
    rgba(255,255,255,0) 79%
  );
  filter:blur(.2px);
  pointer-events:none;
}

/* Give ordinary offer cards the same fixed horizontal metallic treatment as
   prize draws. Because every highlight is based only on x-position, expanding
   or collapsing the voucher cannot make the sheen move. */
.voucher-band.theme-teal:not(.competition-band){
  --voucher-metallic-finish:
    linear-gradient(
      90deg,
      rgba(0,48,45,.14) 0%,
      rgba(255,255,255,.13) 18%,
      rgba(255,255,255,.025) 34%,
      rgba(211,255,249,.16) 49%,
      rgba(255,255,255,.025) 64%,
      rgba(0,48,45,.13) 100%
    ),
    linear-gradient(
      90deg,
      #087d76 0%,
      #15978e 23%,
      #36aaa1 41%,
      #0a8a82 58%,
      #249d94 77%,
      #087c75 100%
    );
  background:var(--voucher-metallic-finish) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:left top !important;
}

.voucher-band.theme-violet:not(.competition-band){
  --voucher-metallic-finish:
    linear-gradient(
      90deg,
      rgba(68,43,78,.12) 0%,
      rgba(255,255,255,.16) 18%,
      rgba(255,255,255,.025) 34%,
      rgba(255,246,255,.20) 49%,
      rgba(255,255,255,.025) 64%,
      rgba(69,43,79,.12) 100%
    ),
    linear-gradient(
      90deg,
      #a981b7 0%,
      #bd9aca 23%,
      #cfb2d8 41%,
      #b58fc2 58%,
      #c5a3d0 77%,
      #aa82b8 100%
    );
  background:var(--voucher-metallic-finish) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:left top !important;
}

/* Continue each normal card's finish seamlessly into its perforated paper edge. */
.voucher-band + .voucher-band.theme-teal:not(.competition-band)::before,
.voucher-band.theme-teal.is-first-offer:not(.competition-band)::before,
.voucher-band + .voucher-band.theme-violet:not(.competition-band)::before,
.voucher-band.theme-violet.is-first-offer:not(.competition-band)::before{
  background:var(--voucher-metallic-finish) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:left top !important;
  -webkit-mask:
    radial-gradient(
      circle at 14px 12px,
      #000 0 8px,
      transparent 8.4px
    ) 0 0 / 28px 12px repeat-x;
  mask:
    radial-gradient(
      circle at 14px 12px,
      #000 0 8px,
      transparent 8.4px
    ) 0 0 / 28px 12px repeat-x;
}

.voucher-band.theme-teal.is-last-offer:not(.competition-band)::after,
.voucher-band.theme-violet.is-last-offer:not(.competition-band)::after{
  background:var(--voucher-metallic-finish) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
  background-position:left top !important;
  -webkit-mask:
    radial-gradient(
      circle at 14px 0,
      #000 0 8px,
      transparent 8.4px
    ) 0 0 / 28px 12px repeat-x;
  mask:
    radial-gradient(
      circle at 14px 0,
      #000 0 8px,
      transparent 8.4px
    ) 0 0 / 28px 12px repeat-x;
}

@media (max-width:420px){
  .voucher-band + .voucher-band.theme-teal:not(.competition-band)::before,
  .voucher-band.theme-teal.is-first-offer:not(.competition-band)::before,
  .voucher-band + .voucher-band.theme-violet:not(.competition-band)::before,
  .voucher-band.theme-violet.is-first-offer:not(.competition-band)::before{
    -webkit-mask:
      radial-gradient(
        circle at 12.5px 11px,
        #000 0 7.2px,
        transparent 7.6px
      ) 0 0 / 25px 11px repeat-x;
    mask:
      radial-gradient(
        circle at 12.5px 11px,
        #000 0 7.2px,
        transparent 7.6px
      ) 0 0 / 25px 11px repeat-x;
  }

  .voucher-band.theme-teal.is-last-offer:not(.competition-band)::after,
  .voucher-band.theme-violet.is-last-offer:not(.competition-band)::after{
    -webkit-mask:
      radial-gradient(
        circle at 12.5px 0,
        #000 0 7.2px,
        transparent 7.6px
      ) 0 0 / 25px 11px repeat-x;
    mask:
      radial-gradient(
        circle at 12.5px 0,
        #000 0 7.2px,
        transparent 7.6px
      ) 0 0 / 25px 11px repeat-x;
  }
}

/* =====================================================
   v1.1.33 — prize provider information inside prize panel
   ===================================================== */
.competition-provider-divider{
  height:1px;
  margin:13px 0 11px;
  background:rgba(73,50,7,.22);
}
.competition-provider-credit{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.28em;
  margin:0;
  color:#493207;
  font-size:13px;
  line-height:1.4;
}
.competition-prize-panel .competition-provider-credit span,
.competition-prize-panel .competition-provider-credit strong{
  display:inline;
  margin:0;
  color:inherit;
  font:inherit;
}
.competition-prize-panel .competition-provider-credit strong{
  font-weight:850;
}
.competition-provider-about{
  margin:7px 0 0;
  color:#4f442f;
  font-size:13px;
  line-height:1.48;
  font-weight:500;
}
.competition-provider-link{
  display:inline;
  color:#493207;
  font-weight:850;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.competition-provider-link:hover{
  text-decoration-thickness:2px;
}



/* =====================================================
   v1.1.33 — deterministic card switching
   ===================================================== */
/*
  The app controls vertical positioning when voucher accordions switch.
  Prevent browser scroll anchoring from independently selecting a moving
  voucher as its anchor during the same collapse/expand transition.
*/
.voucher-band,
.voucher-band .voucher-accordion{
  overflow-anchor:none;
}


/* =====================================================
   v1.1.33 — jump-free direct card switching
   ===================================================== */
html.vv-card-switch-swap{
  scroll-behavior:auto !important;
}

html.vv-card-switch-swap .voucher-accordion{
  transition:none !important;
}

html.vv-card-switch-swap .voucher-band,
html.vv-card-switch-swap .voucher-accordion,
html.vv-card-switch-swap .voucher-accordion-clip{
  overflow-anchor:none !important;
}


/* =====================================================
   v1.1.33 — direction-aware card switching
   ===================================================== */
/*
  While moving to a lower card, keep the old card's height in place until the
  selected card has finished scrolling. Disable browser scroll anchoring for
  the controlled phase so iPhone Safari cannot choose an element in the old
  accordion as its own anchor.
*/
html.vv-card-switch-deferred,
html.vv-card-switch-deferred body,
html.vv-card-switch-swap,
html.vv-card-switch-swap body{
  overflow-anchor:none !important;
}

html.vv-card-switch-deferred{
  scroll-behavior:auto;
}


/* =====================================================
   v0.64.134-dev — angled metallic sheen + lighter prefixes
   ===================================================== */

/*
  The previous metallic bands ran vertically because the gradients travelled
  horizontally at 90deg. A 120deg gradient turns those bands 30deg away from
  vertical while preserving the same colour stops and overall metallic finish.
*/
.competition-band.theme-teal,
.competition-band.theme-violet{
  --competition-gold-finish:
    linear-gradient(
      120deg,
      rgba(92,58,0,.11) 0%,
      rgba(255,255,255,.18) 18%,
      rgba(255,255,255,.035) 34%,
      rgba(255,244,194,.25) 49%,
      rgba(255,255,255,.045) 64%,
      rgba(102,66,0,.11) 100%
    ),
    linear-gradient(
      120deg,
      #c8a747 0%,
      #dfc674 23%,
      #f1e0a7 41%,
      #d4b45c 58%,
      #ead58f 77%,
      #c9aa4d 100%
    );
}

.voucher-band.theme-teal:not(.competition-band){
  --voucher-metallic-finish:
    linear-gradient(
      120deg,
      rgba(0,48,45,.14) 0%,
      rgba(255,255,255,.13) 18%,
      rgba(255,255,255,.025) 34%,
      rgba(211,255,249,.16) 49%,
      rgba(255,255,255,.025) 64%,
      rgba(0,48,45,.13) 100%
    ),
    linear-gradient(
      120deg,
      #087d76 0%,
      #15978e 23%,
      #36aaa1 41%,
      #0a8a82 58%,
      #249d94 77%,
      #087c75 100%
    );
}

.voucher-band.theme-violet:not(.competition-band){
  --voucher-metallic-finish:
    linear-gradient(
      120deg,
      rgba(68,43,78,.12) 0%,
      rgba(255,255,255,.16) 18%,
      rgba(255,255,255,.025) 34%,
      rgba(255,246,255,.20) 49%,
      rgba(255,255,255,.025) 64%,
      rgba(69,43,79,.12) 100%
    ),
    linear-gradient(
      120deg,
      #a981b7 0%,
      #bd9aca 23%,
      #cfb2d8 41%,
      #b58fc2 58%,
      #c5a3d0 77%,
      #aa82b8 100%
    );
}

/* Prefixes are deliberately lighter than the business name itself. */
.voucher-shop-at,
.competition-band .competition-courtesy-label{
  font-weight:400 !important;
  font-style:normal !important;
}


/* =====================================================
   v0.64.134-dev — one-line business overlay contacts
   ===================================================== */
.business-info-website,
.business-info-contact{
  width:100%;
  max-width:100%;
  white-space:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

.business-info-website{
  text-align:center;
}

.business-info-contact{
  flex-wrap:nowrap !important;
}

.business-info-contact span,
.business-info-contact strong{
  white-space:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}


/* =====================================================
   v0.64.134-dev — fixed angled metallic finish
   ===================================================== */
/*
  The angled sheen must not be sized from the card's changing height.
  The highlight layer therefore uses a fixed square tile based on viewport
  width (with an 820px minimum), while the underlying colour gradient remains
  horizontal/x-based. Expanding or collapsing a card no longer changes the
  geometry of the angled highlight, so the metallic finish stays visually
  locked in place.

  The perforated top edges use the exact same highlight tile, offset by the
  amount they protrude above the sheet, so the diagonal sheen continues
  seamlessly through the scallops instead of restarting inside the edge.
*/

.voucher-band.theme-teal:not(.competition-band){
  --vv-metallic-sheen:
    linear-gradient(
      120deg,
      rgba(0,48,45,.14) 0%,
      rgba(255,255,255,.13) 18%,
      rgba(255,255,255,.025) 34%,
      rgba(211,255,249,.16) 49%,
      rgba(255,255,255,.025) 64%,
      rgba(0,48,45,.13) 100%
    );
  --vv-metallic-base:
    linear-gradient(
      90deg,
      #087d76 0%,
      #15978e 23%,
      #36aaa1 41%,
      #0a8a82 58%,
      #249d94 77%,
      #087c75 100%
    );
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) max(100vw,820px),
    100% 100% !important;
  background-position:
    left top,
    left top !important;
  background-repeat:
    repeat,
    no-repeat !important;
}

.voucher-band.theme-violet:not(.competition-band){
  --vv-metallic-sheen:
    linear-gradient(
      120deg,
      rgba(68,43,78,.12) 0%,
      rgba(255,255,255,.16) 18%,
      rgba(255,255,255,.025) 34%,
      rgba(255,246,255,.20) 49%,
      rgba(255,255,255,.025) 64%,
      rgba(69,43,79,.12) 100%
    );
  --vv-metallic-base:
    linear-gradient(
      90deg,
      #a981b7 0%,
      #bd9aca 23%,
      #cfb2d8 41%,
      #b58fc2 58%,
      #c5a3d0 77%,
      #aa82b8 100%
    );
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) max(100vw,820px),
    100% 100% !important;
  background-position:
    left top,
    left top !important;
  background-repeat:
    repeat,
    no-repeat !important;
}

.competition-band.theme-teal,
.competition-band.theme-violet{
  --vv-metallic-sheen:
    linear-gradient(
      120deg,
      rgba(92,58,0,.11) 0%,
      rgba(255,255,255,.18) 18%,
      rgba(255,255,255,.035) 34%,
      rgba(255,244,194,.25) 49%,
      rgba(255,255,255,.045) 64%,
      rgba(102,66,0,.11) 100%
    );
  --vv-metallic-base:
    linear-gradient(
      90deg,
      #c8a747 0%,
      #dfc674 23%,
      #f1e0a7 41%,
      #d4b45c 58%,
      #ead58f 77%,
      #c9aa4d 100%
    );
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) max(100vw,820px),
    100% 100% !important;
  background-position:
    left top,
    left top !important;
  background-repeat:
    repeat,
    no-repeat !important;
}

/* Normal voucher top perforations — continue the same diagonal tile. */
.voucher-band + .voucher-band.theme-teal:not(.competition-band)::before,
.voucher-band.theme-teal.is-first-offer:not(.competition-band)::before,
.voucher-band + .voucher-band.theme-violet:not(.competition-band)::before,
.voucher-band.theme-violet.is-first-offer:not(.competition-band)::before{
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) max(100vw,820px),
    100% 100% !important;
  background-position:
    left 10px,
    left top !important;
  background-repeat:
    repeat,
    no-repeat !important;
}

/* Competition top perforations — same seamless continuation. */
.voucher-band + .competition-band::before,
.competition-band.is-first-offer::before{
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) max(100vw,820px),
    100% 100% !important;
  background-position:
    left 10px,
    left top !important;
  background-repeat:
    repeat,
    no-repeat !important;
}

/*
  The final lower edge uses the same fixed-size angled tile and base finish.
  Its low-contrast sheen means the tiny 10px protruding section reads as one
  continuous sheet while remaining completely independent of accordion height.
*/
.voucher-band.theme-teal.is-last-offer:not(.competition-band)::after,
.voucher-band.theme-violet.is-last-offer:not(.competition-band)::after,
.competition-band.is-last-offer::after{
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) max(100vw,820px),
    100% 100% !important;
  background-position:
    left top,
    left top !important;
  background-repeat:
    repeat,
    no-repeat !important;
}

@media (max-width:420px){
  .voucher-band + .voucher-band.theme-teal:not(.competition-band)::before,
  .voucher-band.theme-teal.is-first-offer:not(.competition-band)::before,
  .voucher-band + .voucher-band.theme-violet:not(.competition-band)::before,
  .voucher-band.theme-violet.is-first-offer:not(.competition-band)::before,
  .voucher-band + .competition-band::before,
  .competition-band.is-first-offer::before{
    background-position:
      left 9px,
      left top !important;
  }
}


/* =====================================================
   v0.64.134-dev — seamless static diagonal metallic finish
   ===================================================== */

/*
  v0.64.113 fixed the movement, but its square background image repeated
  vertically. That produced a visible horizontal restart line on tall cards.
  It also gave the perforated edge a different phase from the sheet.

  This version uses ONE fixed-height, non-repeating background image. Inside
  that image the sheen itself is a repeating-linear-gradient, so the metallic
  rhythm repeats diagonally without any rectangular/horizontal tile boundary.

  The sheet and its perforations share the same gradient coordinate system.
*/
.voucher-band{
  --vv-metallic-top-pad:10px;
  --vv-metallic-bottom-position:-1000px;
  --vv-metallic-image-height:4096px;
}

/* Standard teal voucher sheet. */
.voucher-band.theme-teal:not(.competition-band){
  --vv-metallic-sheen:
    repeating-linear-gradient(
      120deg,
      rgba(0,48,45,.14) 0px,
      rgba(255,255,255,.13) 180px,
      rgba(255,255,255,.025) 340px,
      rgba(211,255,249,.16) 490px,
      rgba(255,255,255,.025) 640px,
      rgba(0,48,45,.14) 1000px
    );
  --vv-metallic-base:
    linear-gradient(
      90deg,
      #087d76 0%,
      #15978e 23%,
      #36aaa1 41%,
      #0a8a82 58%,
      #249d94 77%,
      #087c75 100%
    );
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    100% 100% !important;
  background-position:
    left calc(0px - var(--vv-metallic-top-pad)),
    left top !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

/* Standard violet voucher sheet. */
.voucher-band.theme-violet:not(.competition-band){
  --vv-metallic-sheen:
    repeating-linear-gradient(
      120deg,
      rgba(68,43,78,.12) 0px,
      rgba(255,255,255,.16) 180px,
      rgba(255,255,255,.025) 340px,
      rgba(255,246,255,.20) 490px,
      rgba(255,255,255,.025) 640px,
      rgba(68,43,78,.12) 1000px
    );
  --vv-metallic-base:
    linear-gradient(
      90deg,
      #a981b7 0%,
      #bd9aca 23%,
      #cfb2d8 41%,
      #b58fc2 58%,
      #c5a3d0 77%,
      #aa82b8 100%
    );
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    100% 100% !important;
  background-position:
    left calc(0px - var(--vv-metallic-top-pad)),
    left top !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

/* Gold competition sheet. */
.competition-band.theme-teal,
.competition-band.theme-violet{
  --vv-metallic-sheen:
    repeating-linear-gradient(
      120deg,
      rgba(92,58,0,.11) 0px,
      rgba(255,255,255,.18) 180px,
      rgba(255,255,255,.035) 340px,
      rgba(255,244,194,.25) 490px,
      rgba(255,255,255,.045) 640px,
      rgba(92,58,0,.11) 1000px
    );
  --vv-metallic-base:
    linear-gradient(
      90deg,
      #c8a747 0%,
      #dfc674 23%,
      #f1e0a7 41%,
      #d4b45c 58%,
      #ead58f 77%,
      #c9aa4d 100%
    );
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    100% 100% !important;
  background-position:
    left calc(0px - var(--vv-metallic-top-pad)),
    left top !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

/*
  A normal lower card starts 10px below its protruding top scallops.
  The scallop pseudo-element therefore begins at gradient image y=0 while the
  body begins at image y=10. This makes the diagonal sheen one continuous
  surface through the perforation.
*/
.voucher-band + .voucher-band.theme-teal:not(.competition-band)::before,
.voucher-band + .voucher-band.theme-violet:not(.competition-band)::before,
.voucher-band + .competition-band::before{
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    100% 100% !important;
  background-position:
    left top,
    left top !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

/*
  The first card's top edge sits at y=0 rather than protruding above it, so it
  uses exactly the same phase as the body.
*/
.voucher-band.theme-teal.is-first-offer:not(.competition-band)::before,
.voucher-band.theme-violet.is-first-offer:not(.competition-band)::before,
.competition-band.is-first-offer::before{
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    100% 100% !important;
  background-position:
    left calc(0px - var(--vv-metallic-top-pad)),
    left top !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

/* Last-sheet lower perforation samples the exact continuation at card bottom. */
.voucher-band.theme-teal.is-last-offer:not(.competition-band)::after,
.voucher-band.theme-violet.is-last-offer:not(.competition-band)::after,
.competition-band.is-last-offer::after{
  background-image:
    var(--vv-metallic-sheen),
    var(--vv-metallic-base) !important;
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    100% 100% !important;
  background-position:
    left var(--vv-metallic-bottom-position),
    left top !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

@media (max-width:420px){
  .voucher-band{
    --vv-metallic-top-pad:9px;
  }
}


/* =====================================================
   v0.64.134-dev — remove residual vertical metallic band
   ===================================================== */
/*
  The remaining faint vertical sheen was not from the highlight layer.
  It was the underlying base-colour gradient, which was still 90deg.

  Both the tonal base and the highlight now run on the same 120deg fixed
  coordinate system. This removes the vertical band while preserving the
  static, seamless diagonal metallic finish through the card and perforations.
*/

.voucher-band.theme-teal:not(.competition-band){
  --vv-metallic-base:
    linear-gradient(
      120deg,
      #087d76 0%,
      #15978e 23%,
      #36aaa1 41%,
      #0a8a82 58%,
      #249d94 77%,
      #087c75 100%
    );
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    max(100vw,820px) var(--vv-metallic-image-height) !important;
  background-position:
    left calc(0px - var(--vv-metallic-top-pad)),
    left calc(0px - var(--vv-metallic-top-pad)) !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

.voucher-band.theme-violet:not(.competition-band){
  --vv-metallic-base:
    linear-gradient(
      120deg,
      #a981b7 0%,
      #bd9aca 23%,
      #cfb2d8 41%,
      #b58fc2 58%,
      #c5a3d0 77%,
      #aa82b8 100%
    );
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    max(100vw,820px) var(--vv-metallic-image-height) !important;
  background-position:
    left calc(0px - var(--vv-metallic-top-pad)),
    left calc(0px - var(--vv-metallic-top-pad)) !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

.competition-band.theme-teal,
.competition-band.theme-violet{
  --vv-metallic-base:
    linear-gradient(
      120deg,
      #c8a747 0%,
      #dfc674 23%,
      #f1e0a7 41%,
      #d4b45c 58%,
      #ead58f 77%,
      #c9aa4d 100%
    );
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    max(100vw,820px) var(--vv-metallic-image-height) !important;
  background-position:
    left calc(0px - var(--vv-metallic-top-pad)),
    left calc(0px - var(--vv-metallic-top-pad)) !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

/* Keep BOTH metallic layers in identical phase through inter-card scallops. */
.voucher-band + .voucher-band.theme-teal:not(.competition-band)::before,
.voucher-band + .voucher-band.theme-violet:not(.competition-band)::before,
.voucher-band + .competition-band::before{
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    max(100vw,820px) var(--vv-metallic-image-height) !important;
  background-position:
    left top,
    left top !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

/* First-card scallop remains in the exact same phase as the body. */
.voucher-band.theme-teal.is-first-offer:not(.competition-band)::before,
.voucher-band.theme-violet.is-first-offer:not(.competition-band)::before,
.competition-band.is-first-offer::before{
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    max(100vw,820px) var(--vv-metallic-image-height) !important;
  background-position:
    left calc(0px - var(--vv-metallic-top-pad)),
    left calc(0px - var(--vv-metallic-top-pad)) !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}

/* Bottom scallop also samples both diagonal layers at the same card-height phase. */
.voucher-band.theme-teal.is-last-offer:not(.competition-band)::after,
.voucher-band.theme-violet.is-last-offer:not(.competition-band)::after,
.competition-band.is-last-offer::after{
  background-size:
    max(100vw,820px) var(--vv-metallic-image-height),
    max(100vw,820px) var(--vv-metallic-image-height) !important;
  background-position:
    left var(--vv-metallic-bottom-position),
    left var(--vv-metallic-bottom-position) !important;
  background-repeat:
    no-repeat,
    no-repeat !important;
}


/* =====================================================
   v0.64.134-dev — operator campaigns + tracking links
   ===================================================== */
.operator-section-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  flex-wrap:wrap;
}

.operator-campaigns-btn{
  min-height:42px;
}

.operator-campaign-head p{
  max-width:680px;
}

.operator-campaign-create-card,
.operator-campaign-link-create{
  margin-top:18px;
}

.operator-campaign-create-card h2,
.operator-campaign-link-create h2{
  margin:5px 0 18px;
}

.operator-campaign-list,
.operator-campaign-links{
  display:grid;
  gap:14px;
  margin-top:16px;
}

.operator-campaign-card{
  margin:0;
}

.operator-campaign-card-top,
.operator-campaign-title-row,
.operator-campaign-link-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.operator-campaign-card h2,
.operator-campaign-title-row h1,
.operator-campaign-link-title-row h3{
  margin:3px 0 0;
}

.operator-campaign-metrics{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
  margin-top:18px;
}

.operator-campaign-metric{
  min-width:0;
  padding:11px 8px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#faf9f6;
  text-align:center;
}

.operator-campaign-metric strong{
  display:block;
  color:var(--brand-deep);
  font-size:22px;
  line-height:1;
}

.operator-campaign-metric span{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
  line-height:1.2;
  font-weight:750;
}

.operator-campaign-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:15px;
  color:var(--muted);
  font-size:13px;
}

.operator-campaign-status-actions,
.operator-campaign-link-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:14px;
}

.operator-campaign-summary{
  margin-top:16px;
}

.operator-short-link-editor{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:7px;
}

.operator-short-link-editor > span{
  color:var(--muted);
  font-size:14px;
  font-weight:750;
  white-space:nowrap;
}

.operator-short-link-status{
  min-height:20px;
}

.operator-short-link-status.is-available{
  color:#14734d;
  font-weight:800;
}

.operator-short-link-status.is-unavailable{
  color:#a33b35;
  font-weight:800;
}

.operator-campaign-link-card{
  margin:0;
}

.operator-campaign-link-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 182px;
  gap:20px;
  align-items:start;
}

.operator-campaign-link-copy{
  min-width:0;
}

.operator-campaign-url{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 8px;
  padding:12px 13px;
  border:1px solid rgba(0,122,114,.20);
  border-radius:13px;
  background:#eff8f7;
  color:var(--brand-deep);
  font:inherit;
  font-size:15px;
  font-weight:800;
  text-align:left;
  overflow:hidden;
}

.operator-campaign-url > span:first-child{
  min-width:0;
}

.operator-campaign-url span{
  flex:0 0 auto;
  color:var(--brand);
  font-size:12px;
}

.operator-campaign-qr{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  text-align:center;
}

.operator-campaign-qr canvas{
  display:block;
  width:170px;
  height:170px;
  max-width:100%;
  border-radius:10px;
  background:#fff;
}

.operator-campaign-qr small{
  color:var(--muted);
  font-size:10px;
  line-height:1.25;
}

.operator-campaign-qr-download{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 11px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  color:var(--brand-deep);
  text-decoration:none;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

@media (max-width:620px){
  .operator-campaign-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .operator-campaign-metrics .operator-campaign-metric:last-child{
    grid-column:span 2;
  }

  .operator-campaign-link-main{
    grid-template-columns:1fr;
  }

  .operator-campaign-qr{
    padding-top:4px;
  }

  .operator-campaign-card-top,
  .operator-campaign-title-row{
    align-items:flex-start;
  }
}

@media (max-width:420px){
  .operator-section-actions{
    width:100%;
    justify-content:stretch;
  }

  .operator-section-actions > button{
    flex:1 1 0;
  }

  .operator-short-link-editor{
    grid-template-columns:1fr;
    gap:5px;
  }

  .operator-campaign-url{
    font-size:13px;
  }
}


/* =====================================================
   v0.64.134-dev — compact QR + full-width campaign stats
   ===================================================== */

.operator-campaign-link-main{
  grid-template-columns:minmax(0,1fr) 98px !important;
  gap:12px !important;
  align-items:start;
}

.operator-campaign-qr{
  width:98px !important;
  max-width:98px !important;
  gap:5px !important;
}

.operator-campaign-qr canvas{
  width:88px !important;
  height:88px !important;
  max-width:88px !important;
}

.operator-campaign-qr small{
  max-width:94px;
  font-size:8.5px !important;
  line-height:1.15;
}

.operator-campaign-qr-download{
  min-height:27px !important;
  padding:5px 6px !important;
  font-size:9.5px !important;
  white-space:nowrap;
}

.operator-campaign-link-stats{
  width:100%;
  margin-top:15px;
}

.operator-campaign-link-stats .operator-campaign-metrics{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:0 !important;
}

.operator-campaign-link-stats .operator-campaign-metric{
  padding:12px 8px !important;
}

.operator-campaign-link-stats .operator-campaign-metric strong{
  font-size:24px !important;
}

.operator-campaign-link-stats .operator-campaign-metric span{
  font-size:11px !important;
}

.operator-campaign-link-stats .operator-campaign-link-actions{
  margin-top:14px;
}

.operator-campaign-link-stats .operator-campaign-link-actions > button{
  width:100%;
}

.operator-campaign-destination-select{
  width:100%;
  min-height:48px;
}

@media (max-width:620px){
  .operator-campaign-link-main{
    grid-template-columns:minmax(0,1fr) 88px !important;
    gap:9px !important;
  }

  .operator-campaign-qr{
    width:88px !important;
  }

  .operator-campaign-qr canvas{
    width:78px !important;
    height:78px !important;
    max-width:78px !important;
  }

  .operator-campaign-qr small{
    display:none;
  }

  .operator-campaign-link-stats .operator-campaign-metrics{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:5px !important;
  }

  .operator-campaign-link-stats .operator-campaign-metric{
    padding:10px 3px !important;
  }

  .operator-campaign-link-stats .operator-campaign-metric strong{
    font-size:21px !important;
  }

  .operator-campaign-link-stats .operator-campaign-metric span{
    font-size:9.5px !important;
  }
}


/* =====================================================
   v0.64.134-dev — cleaned operator dashboard navigation
   ===================================================== */

.operator-current-redemption-row{
  grid-column:1 / -1;
  margin-top:2px;
  padding-top:11px;
  border-top:1px solid rgba(83,74,88,.12);
}

.operator-current-redemption-heading{
  margin:0 0 8px 2px;
  color:var(--muted);
  font-size:11px;
  line-height:1.2;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.075em;
}

.operator-current-redemption-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
}

.operator-current-audience-redemption{
  min-height:80px;
  background:#edf7f6;
  border-color:#c4dfdc;
  color:#14665f;
}

.operator-dashboard-categories{
  display:grid;
  gap:11px;
  margin-top:18px;
}

.operator-dashboard-category{
  width:100%;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:17px 19px;
  border:1px solid #ddd7df;
  border-radius:18px;
  background:#fff;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(44,35,49,.045);
}

.operator-dashboard-category > span{
  min-width:0;
  display:block;
}

.operator-dashboard-category strong{
  display:block;
  color:var(--brand-deep);
  font-size:20px;
  line-height:1.08;
  font-weight:900;
}

.operator-dashboard-category small{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  font-weight:650;
}

.operator-dashboard-category > b{
  flex:0 0 auto;
  color:var(--brand);
  font-size:34px;
  line-height:1;
  font-weight:500;
}

.operator-dashboard-category:hover{
  border-color:rgba(0,122,114,.28);
  background:#fbfdfc;
  transform:translateY(-1px);
}

@media (max-width:640px){
  .operator-current-audience-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .operator-current-redemption-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .operator-current-audience-redemption{
    min-height:76px;
    padding:11px 8px;
  }

  .operator-current-audience-redemption strong{
    font-size:25px;
  }

  .operator-current-audience-redemption span{
    font-size:9.5px;
  }
}

@media (max-width:420px){
  .operator-dashboard-category{
    min-height:72px;
    padding:15px 16px;
  }

  .operator-dashboard-category strong{
    font-size:18px;
  }

  .operator-dashboard-category small{
    font-size:11px;
  }

  .operator-current-redemption-grid{
    gap:6px;
  }

  .operator-current-audience-redemption{
    padding:10px 5px;
  }

  .operator-current-audience-redemption strong{
    font-size:22px;
  }

  .operator-current-audience-redemption span{
    font-size:9px;
  }
}


/* =====================================================
   v0.64.134-dev — operator navigation + terms refinement
   ===================================================== */
.voucher-offer-terms,
.redemption-offer-terms{
  line-height:1.32 !important;
}


/* =====================================================
   Social preview images for campaign tracking links
   ===================================================== */

.operator-campaign-social-preview{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#faf9f6;
}

.operator-campaign-social-preview-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.operator-campaign-social-preview-heading strong{
  color:var(--brand-deep);
  font-size:14px;
}

.operator-campaign-social-preview-heading span{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.operator-campaign-social-preview-image{
  overflow:hidden;
  width:100%;
  max-width:420px;
  aspect-ratio:1200 / 630;
  border-radius:12px;
  background:#eee;
}

.operator-campaign-social-preview-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.operator-campaign-social-preview-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:11px;
}

.operator-campaign-social-preview-actions .operator-remove-image{
  margin:0;
}

@media (max-width:620px){
  .operator-campaign-social-preview-image{
    max-width:none;
  }
}


/* v1.1.50 — new/more offer grouping + end-of-stack email panel */
.vv-offer-section-heading{
  display:flex;
  align-items:center;
  gap:12px;
  margin:14px 4px 9px;
  color:#42545a;
  font-size:14px;
  font-weight:900;
  letter-spacing:.02em;
}
.vv-offer-section-heading::after{
  content:"";
  height:1px;
  flex:1;
  background:rgba(58,79,86,.18);
}
.vv-offer-section-heading.has-top-space{margin-top:26px}
/* v1.1.50 — contrasting metallic JUST ADDED flashes in the continuous stack.
   Style is determined by the voucher theme, never by the item's NEW status or
   separate section; the existing seven-day offerIsNew rule is unchanged. */
.voucher-new-badge{
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  box-sizing:border-box;
  margin:0 0 9px;
  padding:6px 13px 6px 11px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.095em;
  white-space:nowrap;
  box-shadow:0 3px 7px rgba(22,32,31,.16),inset 0 1px 0 rgba(255,255,255,.45);
}
.voucher-new-badge::before{
  content:"✦";
  display:inline-block;
  font-size:13px;
  line-height:1;
  margin-right:7px;
}
/* Pink metallic on teal cards. Dark ink stays legible through the highlights. */
.voucher-band.theme-teal:not(.competition-band) .voucher-new-badge{
  background:linear-gradient(120deg,#e1a4c5 0%,#f2c9df 30%,#d68eb4 69%,#edbfd8 100%);
  border-color:rgba(137,56,101,.62);
  color:#3c1a35;
}
/* Teal metallic on pink/violet cards. White lettering keeps the contrast. */
.voucher-band.theme-violet:not(.competition-band) .voucher-new-badge{
  background:linear-gradient(120deg,#07645f 0%,#14837b 30%,#0b6b65 68%,#117b73 100%);
  border-color:rgba(3,74,70,.8);
  color:#fff;
  text-shadow:0 1px 1px rgba(0,38,34,.28);
}
.vv-more-offers-panel{
  margin:22px 0 6px;
  padding:20px;
  border:1px solid rgba(10,138,130,.18);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,249,247,.96));
  text-align:center;
  box-shadow:0 8px 24px rgba(44,67,73,.06);
}
.vv-more-offers-panel strong{
  display:block;
  color:#26383e;
  font-size:18px;
  line-height:1.2;
}
.vv-more-offers-panel span{
  display:block;
  max-width:440px;
  margin:8px auto 14px;
  color:#5f7076;
  font-size:14px;
  line-height:1.45;
}
.vv-more-offers-panel.is-confirmed span{margin-bottom:0;color:#397069}
.vv-more-offers-panel .btn{width:auto;min-width:190px;margin:0 auto}

/* Operator Audience growth: latest ten meaningful interactions */
.operator-activity-section{ margin-top:22px; }
.operator-activity-list{ overflow:hidden; border:1px solid #dddce2; border-radius:16px; background:#fff; }
.operator-activity-item+.operator-activity-item{ border-top:1px solid #eee9ef; }
.operator-activity-row{ display:grid; width:100%; grid-template-columns:94px minmax(0,1fr) 116px;
  align-items:center; gap:10px; padding:12px 14px; margin:0; border:0; background:#fff;
  color:var(--brand-deep); text-align:left; font:inherit; cursor:pointer; }
.operator-activity-row:hover, .operator-activity-row[aria-expanded="true"]{ background:#f6f5f8; }
.operator-activity-row:focus-visible{ outline:3px solid var(--brand); outline-offset:-3px; }
.operator-activity-time{ align-self:start; color:#586c70; font-size:11px; font-weight:750; padding-top:2px; white-space:nowrap; }
.operator-activity-summary{ min-width:0; display:flex; flex-direction:column; gap:4px; line-height:1.3; }
.operator-activity-summary strong{ font-size:12px; overflow-wrap:anywhere; }
.operator-activity-summary>span{ font-size:11px; font-weight:750; }
.operator-activity-summary small{ font-size:10px; color:#697b80; overflow-wrap:anywhere; }
.operator-activity-detail{ font-weight:500; color:#62757a; }
.operator-activity-right{ display:flex; justify-content:flex-end; align-items:center; gap:6px; }
.operator-activity-status{ border-radius:100px; padding:5px 7px; background:#fff3db;
  border:1px solid #e7d2a6; color:#80540e; font-size:9px; font-weight:800; text-align:center; }
.operator-activity-status.paid{ background:#e2f4e9; border-color:#b0dac0; color:#1b6539; }
.operator-activity-status.pending{ background:#fce9e7; border-color:#edc3be; color:#93463e; }
.operator-activity-chevron{ font-size:20px; line-height:1; color:#4f7671; }
.operator-activity-journey{ margin:0 12px 13px; padding:15px;
  border:1px solid #d9e4e1; border-radius:12px; background:#f6fbfa; }
.operator-activity-journey-heading{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font-size:12px; color:#254844; }
.operator-activity-journey-heading span{ font-size:10px; color:#667c79; }
.operator-activity-timeline{ list-style:none; margin:14px 0 0; padding:0 0 0 12px;
  border-left:2px solid #8ebfb9; display:flex; flex-direction:column; gap:12px; }
.operator-activity-timeline li{ position:relative; display:grid; grid-template-columns:128px minmax(0,1fr); gap:12px; font-size:11px; }
.operator-activity-timeline li:before{ content:""; position:absolute; left:-18px; top:5px; width:9px; height:9px;
  border-radius:100px; background:#168b83; border:2px solid #f6fbfa; }
.operator-activity-timeline time{ color:#53716c; font-weight:700; }
.operator-activity-timeline li div{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.operator-activity-timeline li div span{ color:#536e68; overflow-wrap:anywhere; }
.operator-activity-empty{ padding:18px 14px; margin:0; color:#697b80; font-size:12px; }
.operator-activity-limit{ display:block; margin:13px 0 0; font-size:10px; color:#667c79; }
.operator-activity-refresh{ padding:6px 10px; border:1px solid #cadcd7; border-radius:999px;
  color:var(--brand-deep); background:#fff; font-size:11px; font-weight:800; cursor:pointer; }
@media(max-width:540px){
  .operator-activity-row{ grid-template-columns:61px minmax(0,1fr) 85px; gap:8px; padding:10px 9px; }
  .operator-activity-time{ white-space:normal; font-size:9px; }
  .operator-activity-summary strong{ font-size:10px; }
  .operator-activity-summary>span{ font-size:10px; }
  .operator-activity-summary small{ font-size:9px; }
  .operator-activity-status{ font-size:8px; padding:4px 5px; }
  .operator-activity-right{ gap:3px; }
  .operator-activity-journey{ margin:0 6px 8px; padding:12px 10px; }
  .operator-activity-timeline li{ grid-template-columns:92px minmax(0,1fr); gap:8px; font-size:10px; }
}