/* Shared funnel components: product gallery, PDP price block, personalisation block (ornament cards),
   personaliser pop-up frame, insurance bump, exit-intent pop-up, ornament preview heart.
   Colours and fonts come only from tokens.css. Shapes follow the checkout1 library components (RadioCard1, BumpRow1, Field1). */

/* ---------- product gallery ---------- */
.gal{display:flex;flex-direction:column;gap:12px;min-width:0}
.gal-main{aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--color-background-brand-tint)}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumbs{display:flex;align-items:center;gap:12px}
.gal-arrow{flex:none;width:36px;height:36px;padding:0;border:0;background:none;border-radius:50%;cursor:pointer}
.gal-arrow svg{width:100%;height:100%;display:block}
.gal-arrow:hover svg rect{fill:var(--color-background-brand-tint)}
.gal-strip{flex:1;display:flex;gap:12px;overflow:hidden;min-width:0}
.gal-strip button{flex:0 0 calc((100% - 5*12px)/6);aspect-ratio:1/1;padding:0;border:0;border-radius:8px;overflow:hidden;background:none;cursor:pointer;outline-offset:-2px}
.gal-strip button:hover{opacity:.85}
.gal-strip button.is-on{outline:2px solid var(--color-brand-primary)}
.gal-strip img{width:100%;height:100%;object-fit:cover;display:block}

/* hero skin: the gallery fills the hero1 image slot; thumbs float on a white bar at the bottom */
.hero1__img .gal{position:absolute;inset:0;gap:0}
.hero1__img .gal-main{position:absolute;inset:0;border-radius:0;aspect-ratio:auto}
.hero1__img .gal-thumbs{position:absolute;left:24px;right:24px;bottom:24px;padding:8px;border-radius:12px;background:rgba(255,255,255,.92);gap:8px}
.hero1__img .gal-strip{gap:8px}
.hero1__img .gal-strip button{flex-basis:calc((100% - 5*8px)/6)}
.hero1__img .gal-thumbs img{position:static}
.hero1__img .gal-arrow{width:32px;height:32px}
/* tablet + mobile: the hero1 mobile image slot grows to fit a square photo with the thumbs underneath (no overlay) */
@media (max-width:1023px){
  .hero1__img--m{height:auto!important;overflow:visible}
  .hero1__img--m .gal{position:static;gap:10px}
  .hero1__img--m .gal-main{position:relative;aspect-ratio:1/1}
  .hero1__img--m .gal-main img{position:absolute;inset:0}
  .hero1__img--m .gal-thumbs{position:static;background:none;padding:0 15px}
}
@media (max-width:640px){
  .hero1__img .gal-arrow{width:26px;height:26px}
  .hero1__img .gal-strip{gap:6px}
  .hero1__img .gal-strip button{flex-basis:calc((100% - 4*6px)/5)}
  .gal--rail .gal-thumbs{gap:8px}
  .gal--rail .gal-arrow{width:26px;height:26px}
  .gal--rail .gal-strip{gap:8px}
  .gal--rail .gal-strip button{flex-basis:calc((100% - 3*8px)/4)}
}

/* ---------- PDP price block (sits between the hero list and the CTA) ---------- */
.pprice{display:flex;flex-direction:column;gap:4px;align-self:stretch}
.pprice__row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.pprice__row b{font:400 36px/1.1 var(--font-heading);color:var(--color-text-primary)}
.pprice__row s{font:500 20px/1.2 var(--font-body);color:var(--color-text-secondary)}
.pprice__row em{font:700 16px/1 var(--font-body);font-style:normal;background:var(--color-ui-green);color:var(--color-text-primary);padding:6px 10px;border-radius:4px;align-self:center}
.pprice__ladder{font:500 16px/1.5 var(--font-body);color:var(--color-text-secondary)}
@media (max-width:1023px){.pprice{align-items:center;text-align:center}.pprice__row{justify-content:center}}
@media (max-width:640px){.pprice__row b{font-size:32px}.pprice__row s{font-size:18px}.pprice__row em{font-size:14px}.pprice__ladder{font-size:14px}}

/* ---------- ornament preview (heart-shaped acrylic, mock only) ---------- */
.heart{width:96px;height:88px;position:relative;flex:none;background:var(--color-border-default);-webkit-mask:url(../../images/an/heart.svg) center/contain no-repeat;mask:url(../../images/an/heart.svg) center/contain no-repeat;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:16px;color:#fff;text-align:center;overflow:hidden}
.heart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.heart .l{position:relative;line-height:1.1;text-shadow:0 1px 3px rgba(0,0,0,.65);max-width:80%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.heart .l0{font-family:var(--font-heading);font-size:9px}
.heart .l1{font-size:10px;font-weight:600}
.heart .l2{font-size:8px}
.heart.empty{justify-content:center;padding:0 0 10px;color:var(--color-text-secondary)}
.heart.empty .l{text-shadow:none;font-size:10px;font-weight:600}
.heart--lg{width:260px;height:238px;padding-bottom:44px}
.heart--lg .l0{font-size:22px}.heart--lg .l1{font-size:22px}.heart--lg .l2{font-size:15px}
.heart--lg.empty .l{font-size:16px}
.heart--sm{width:64px;height:59px;padding-bottom:10px}
.heart--sm .l{display:none}
.heart--xs{width:40px;height:37px;padding:0}
.heart--xs .l{display:none}


/* ---------- one card per ornament ---------- */
.c1-pz{display:flex;flex-direction:column;gap:12px}
.oc{position:relative;display:flex;align-items:flex-start;gap:var(--gap-t);padding:var(--pad-s);background:var(--color-brand-whitespace);border:1px solid var(--color-border-default);border-radius:var(--r-m)}
.oc.is-saved{background:var(--color-background-brand-tint);border-color:var(--color-brand-primary)}
.oc.is-err{border-color:var(--color-ui-red);box-shadow:inset 0 0 0 1px var(--color-ui-red)}
.oc-num{position:absolute;top:-10px;left:12px;background:var(--color-brand-primary);color:var(--color-text-white);font:800 13px/1 var(--font-body);padding:5px 8px;border-radius:100px}
.oc-img{flex:none;width:88px;height:88px;border-radius:var(--r-s);object-fit:cover}
.oc-c{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.oc-t{font:700 var(--fs-ps)/1.4 var(--font-body)}
.oc-meta{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;font:500 var(--fs-pt)/1.4 var(--font-body);color:var(--color-text-secondary)}
.oc-meta b{font:400 var(--fs-pm)/1.2 var(--font-heading);color:var(--color-text-primary)}
.oc-meta span:first-child{padding-right:6px;border-right:1px solid var(--color-border-default)}
.oc-saved{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.oc-chip{display:inline-flex;align-items:center;gap:4px;background:var(--color-text-success);color:#fff;font:700 13px/1 var(--font-body);padding:5px 8px 5px 6px;border-radius:100px;flex:none}
.oc-chip svg{width:14px;height:14px}
.oc-sum{font:500 var(--fs-pt)/1.3 var(--font-body);color:var(--color-text-secondary);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.oc-btn{margin-top:4px;border:0;border-radius:6px;background:var(--color-brand-primary);color:var(--color-text-white);font:700 var(--fs-ps)/1.2 var(--font-body);padding:12px 18px;cursor:pointer}
.oc-btn:hover{background:var(--color-brand-primary-hover)}
.oc-btn--edit{background:var(--color-brand-whitespace);color:var(--color-brand-primary);box-shadow:inset 0 0 0 1.5px var(--color-brand-primary)}
.oc-btn--edit:hover{background:var(--color-brand-whitespace);color:var(--color-brand-primary-hover)}
.oc-err{font:600 var(--fs-pt)/1.4 var(--font-body);color:var(--color-ui-red)}
@media (max-width:640px){.oc{padding:14px 12px 12px}.oc-img{width:64px;height:64px}.oc-btn{width:100%;text-align:center}}

/* ---------- insurance bump (BumpRow1 shape) ---------- */
.bump{display:flex;align-items:center;gap:var(--gap-t);padding:var(--pad-t) var(--pad-s);background:var(--color-brand-whitespace);border:1.5px dashed var(--color-brand-primary);border-radius:var(--r-s);cursor:pointer;position:relative}
.bump.is-on{background:var(--color-background-brand-tint);border-style:solid}
.bump input{position:absolute;opacity:0;pointer-events:none}
.bump input:checked+.cb{background:var(--color-brand-primary);border-color:var(--color-brand-primary)}
.bump input:checked+.cb::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.bump input:focus-visible+.cb{outline:2px solid var(--color-brand-primary);outline-offset:2px}
.bump-c{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.4}
.bump-c b{font-weight:700;font-size:var(--fs-ps)}
.bump-c span{font-weight:500;font-size:var(--fs-pt);color:var(--color-text-secondary)}
.bump-p{font:400 var(--fs-pm)/1.2 var(--font-heading);white-space:nowrap}

/* checkout bits */
.rd-on{border-color:var(--color-brand-primary)!important}
.rd-on::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--color-brand-primary)}
.c1-err{font:600 var(--fs-ps)/1.4 var(--font-body);color:var(--color-ui-red);text-align:center}
.c1-applied{margin-top:4px;padding:10px 12px;border-radius:var(--r-s);background:var(--color-background-brand-tint);font:600 var(--fs-pt)/1.4 var(--font-body);color:var(--color-text-primary);text-align:center}
.sl small{display:block;font-size:var(--fs-pt);color:var(--color-text-secondary)}
.sl-savebig span:last-child{font-weight:800}
.u1-marks img{width:36px;height:24px;object-fit:contain;border-radius:var(--r-t);background:#fff}
.u1-slot-box .heart{margin:2px 0}
.u1-slot-box small{display:block;font-size:14px}

/* ---------- pop-up frame (personaliser + exit intent) ---------- */
html.pm-lock,html.pm-lock body{overflow:hidden}
.pm,.xi{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.pm[hidden],.xi[hidden]{display:none}
.pm-back,.xi-back{position:absolute;inset:0;background:rgba(29,25,22,.62)}
.pm-dialog{position:relative;width:min(980px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--color-background-white);border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.3)}
.pm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--color-border-default)}
.pm-head h2{font:400 24px/1.2 var(--font-heading);margin:0}
.pm-x{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:var(--color-background-brand-tint);color:var(--color-text-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.pm-x svg{width:20px;height:20px}
.pm-x:hover{background:var(--color-border-default)}
.pm-body{flex:1;overflow:auto;padding:20px}
.pm-slot{display:flex;flex-direction:column;gap:16px}
.pm-hint{display:block;margin-top:6px;font:500 13px/1.4 var(--font-body);color:var(--color-text-secondary)}
.pm-mock{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;background:#fff;border-radius:10px;padding:8px}
.pm-prev{display:flex;flex-direction:column;align-items:center;gap:10px}
.pm-prev p{font:600 14px/1.4 var(--font-body);color:var(--color-text-secondary)}
.pm-fields{display:flex;flex-direction:column;gap:16px}
.pm-up{position:relative;display:flex;align-items:center;justify-content:center;height:56px;border:1.5px dashed var(--color-border-default);border-radius:8px;font:600 16px/1 var(--font-body);cursor:pointer;background:var(--color-background-white)}
.pm-up:hover{border-color:var(--color-brand-primary)}
.pm-up input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pm-sample{align-self:flex-start;border:0;background:none;padding:0;font:600 14px/1.4 var(--font-body);color:var(--color-brand-primary);text-decoration:underline;cursor:pointer}
.pm-foot{display:flex;justify-content:flex-end;gap:12px;padding:16px 20px;border-top:1px solid var(--color-border-default)}
.pm-cancel,.pm-save{border:0;border-radius:6px;font:700 16px/1 var(--font-body);padding:16px 22px;cursor:pointer}
.pm-cancel{background:var(--color-background-brand-tint);color:var(--color-text-primary)}
.pm-save{background:var(--color-brand-primary);color:var(--color-text-white)}
.pm-save:hover{background:var(--color-brand-primary-hover)}
.pm-save:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:640px){
  .pm{padding:0;align-items:stretch}
  .pm-dialog{max-height:none;height:100%;border-radius:0}
  .pm-head h2{font-size:20px}
  .pm-body{padding:12px}
  .pm-mock{grid-template-columns:1fr;padding:4px;gap:16px}
  .heart--lg{width:200px;height:183px;padding-bottom:34px}
  .heart--lg .l0,.heart--lg .l1{font-size:17px}.heart--lg .l2{font-size:12px}
  .pm-foot{padding:12px}
  .pm-cancel,.pm-save{white-space:nowrap;padding:16px 14px;font-size:15px}
  .pm-save{flex:1}
}

/* exit intent */
.xi-dialog{position:relative;width:min(760px,100%);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--color-background-white);border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.3)}
.xi-x{position:absolute;top:12px;right:12px;z-index:1}
.xi-img img{width:100%;height:100%;object-fit:cover;display:block}
.xi-c{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:40px 32px 28px}
.xi-c h3{margin:0;font:400 34px/1.15 var(--font-heading);color:var(--color-brand-primary)}
.xi-sub{font:500 18px/1.4 var(--font-body)}
.xi-amt{font:400 48px/1 var(--font-heading);color:var(--color-text-primary)}
.xi-det{font:500 15px/1.4 var(--font-body);color:var(--color-text-secondary)}
.xi-cta{margin-top:8px}
.xi-no{border:0;background:none;font:600 15px/1.4 var(--font-body);color:var(--color-text-secondary);text-decoration:underline;cursor:pointer;padding:4px}
@media (max-width:640px){
  .xi{padding:16px}
  .xi-dialog{grid-template-columns:1fr}
  .xi-img{height:170px}
  .xi-c{padding:20px 16px 16px;gap:8px}
  .xi-c h3{font-size:28px}
  .xi-amt{font-size:40px}
}

/* policy footer (checkout1 1091:3225), shared by checkout, upsell, thank-you */
/* ---------- Footer ---------- */
.c1-foot{display:flex;flex-direction:column;align-items:center;gap:12px;padding:40px 60px}
.c1-foot nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px}
.c1-foot a,.c1-foot p{font-weight:500;font-size:14px;line-height:1.4;text-decoration:none;color:var(--color-text-primary)}

@media (max-width:640px){.c1-foot{gap:10px;padding:32px 24px}.c1-foot nav{gap:0 10px}}
.c1-foot a:hover{text-decoration:underline}