/* FJackets US gift card page (giftcertificates.php): templates/__master/giftcertificates.html + Panels/PurchaseGiftCertificate.html */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,700&family=Poppins:wght@400;500;600;700&display=swap');

/* page shell: old template floats #Wrapper left at 1360px (right-side gap + stretched newsletter band) */
#Wrapper{float:none!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
#Wrapper>#LayoutColumn2.Content{float:none!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}

.fjgc{--navy:#00174F;--navy2:#0A2466;--red:#CC0C2F;--redd:#A80A27;--ink:#0F172A;--body:#39424F;--mute:#5B6676;--line:#E3E7EE;--field:#C3CCD9;--tint:#F5F7FB;--ff:'Poppins','Segoe UI',Arial,sans-serif;
  font-family:var(--ff);font-size:16px;line-height:1.6;color:var(--body);background:#fff;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
.fjgc *,.fjgc *::before,.fjgc *::after{box-sizing:border-box}
.fjgc h1,.fjgc h2,.fjgc h3,.fjgc p,.fjgc ul,.fjgc ol,.fjgc li,.fjgc figure{margin:0;padding:0}
.fjgc ul,.fjgc ol{list-style:none}
.fjgc h1,.fjgc h2,.fjgc h3{font-family:var(--ff);color:var(--ink);font-weight:700;line-height:1.15;letter-spacing:-.015em;text-transform:none;background:none;border:0;text-wrap:balance}
.fjgc img{max-width:100%;height:auto;display:block;border:0}
.fjgc a{color:var(--navy)}
.fjgc button,.fjgc input,.fjgc select,.fjgc textarea{font-family:var(--ff)}
.fjgc [id]{scroll-margin-top:96px}
.fjgc [tabindex="-1"]:focus{outline:none}
.fjgc :focus-visible{outline:2px solid var(--red);outline-offset:2px}
.fjgc-wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:768px){.fjgc-wrap{padding:0 28px}}
@media (min-width:1280px){.fjgc-wrap{padding:0 32px}}
.fjgc-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* buttons (brand CTA: 2px radius, 46px, uppercase 13/700/.08em) */
.fjgc-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 26px;border-radius:2px;border:2px solid transparent;font:700 13px/1 var(--ff);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.fjgc-btn--red{background:var(--red);color:#fff!important}
.fjgc-btn--red:hover{background:var(--redd)}
.fjgc-btn--navy{background:var(--navy);color:#fff!important}
.fjgc-btn--navy:hover{background:var(--navy2)}
.fjgc-btn--line{background:transparent;border-color:var(--navy);color:var(--navy)!important}
.fjgc-btn--line:hover{background:var(--navy);color:#fff!important}

/* ===== hero ===== */
.fjgc-hero{position:relative;background:var(--navy);color:#fff;padding-top:36px;background-image:radial-gradient(120% 90% at 85% 10%,rgba(255,255,255,.09),transparent 60%)}
.fjgc-hero__grid{display:grid;gap:28px;align-items:center;padding-bottom:32px}
.fjgc-hero h1{color:#fff;font-size:clamp(34px,6.4vw,58px);line-height:1.04;letter-spacing:-.03em;margin-bottom:16px;max-width:12em}
.fjgc .fjgc-hero__lead{font-size:clamp(16px,1.5vw,18px);color:rgba(255,255,255,.84);max-width:33em;margin-bottom:26px}
.fjgc-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.fjgc-hero__actions .fjgc-btn{flex:1 1 100%}
.fjgc-hero__bal{color:#fff!important;font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.45)}
.fjgc-hero__bal:hover{text-decoration-color:#fff}
@media (min-width:480px){.fjgc-hero__actions .fjgc-btn{flex:0 0 auto}}
@media (min-width:900px){.fjgc-hero{padding-top:64px}.fjgc-hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;padding-bottom:56px}}

.fjgc-fan{position:relative;width:100%;max-width:330px;margin:0 auto;aspect-ratio:1.32/1}
.fjgc-fan .fjgc-art{position:absolute;width:70%}
.fjgc-fan__l{left:0;top:9%;transform:rotate(-9deg)}
.fjgc-fan__r{right:0;top:0;transform:rotate(8deg)}
.fjgc-fan__r .fjgc-art__label{align-items:flex-start;padding-top:13%}
.fjgc-fan__f{left:13%;bottom:0;width:76%!important;transform:rotate(-1.5deg);z-index:2;box-shadow:0 24px 40px -18px rgba(0,0,0,.6)!important}
@media (min-width:600px){.fjgc-fan{max-width:440px}}
@media (min-width:900px){.fjgc-fan{max-width:500px}}

/* stitched seam + perks */
.fjgc-perks{background:var(--navy2);border-top:2px dashed rgba(255,255,255,.22)}
.fjgc-perks ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 16px;padding:22px 0}
.fjgc-perks li{display:flex;gap:12px;align-items:flex-start;color:#fff;min-width:0}
.fjgc-perks svg{flex:none;width:22px;height:22px;margin-top:2px;stroke:#fff;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.fjgc-perks b{display:block;font-size:14px;font-weight:600;line-height:1.3}
.fjgc-perks span{display:block;font-size:13px;line-height:1.4;color:rgba(255,255,255,.72)}
@media (max-width:359px){.fjgc-perks ul{grid-template-columns:1fr}}
@media (min-width:900px){.fjgc-perks ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:26px 0}}

/* ===== gift card artwork (illustrations of the 8 themes) ===== */
.fjgc-art{position:relative;display:block;width:100%;aspect-ratio:1.586/1;border-radius:12px;overflow:hidden;container-type:inline-size;isolation:isolate;box-shadow:0 10px 22px -12px rgba(0,16,60,.55);background:#fff}
.fjgc-art svg{position:absolute;pointer-events:none}
.fjgc-art__label{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:0 9%;text-align:center;font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:700;font-size:20px;font-size:12.5cqi;line-height:1.02;letter-spacing:0}
.fjgc-art--classic::before{content:"";position:absolute;left:0;right:0;top:0;height:9%;background:var(--navy)}
.fjgc-art--classic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6%;background:var(--red)}
.fjgc-art--classic img{position:absolute;left:50%;top:50%;width:54%;transform:translate(-50%,-50%)}
.fjgc-art--hero img{top:40%}
.fjgc-art__meta{position:absolute;left:7%;right:7%;bottom:13%;display:flex;justify-content:space-between;align-items:flex-end;color:var(--ink);font-size:11px;font-size:4.6cqi;line-height:1.2}
.fjgc-art__meta b{font-size:18px;font-size:8.4cqi;font-weight:700;letter-spacing:-.02em}
.fjgc-art__meta span{color:var(--mute);text-align:right}
.fjgc-art--xmas{background:linear-gradient(140deg,#9E0925 0%,#CC0C2F 55%,#D8304F 100%);color:#fff}
.fjgc-art--xmas svg{left:6%;top:12%;height:76%;width:auto}
.fjgc-art--xmas .fjgc-art__label{padding-left:30%}
.fjgc-art--bday{background:#121A3A;color:#fff;background-image:radial-gradient(circle at 12% 22%,#CC0C2F 0 2.2%,transparent 2.4%),radial-gradient(circle at 86% 18%,#E9CF8E 0 1.6%,transparent 1.8%),radial-gradient(circle at 78% 82%,#fff 0 1.3%,transparent 1.5%),radial-gradient(circle at 22% 84%,#E9CF8E 0 1.8%,transparent 2%),radial-gradient(circle at 52% 12%,#fff 0 1.1%,transparent 1.3%),radial-gradient(circle at 92% 54%,#CC0C2F 0 1.5%,transparent 1.7%),radial-gradient(circle at 6% 58%,#fff 0 1.2%,transparent 1.4%)}
.fjgc-art--newyear{background:#0D1222;color:#E9CF8E}
.fjgc-art--newyear svg{right:-10%;top:50%;width:58%;height:auto;opacity:.8;transform:translateY(-50%)}
.fjgc-art--newyear .fjgc-art__label{justify-content:flex-start;text-align:left;padding:0 40% 0 9%}
.fjgc-art--spring{background:#FFF3D3;color:#9A1B33;background-image:radial-gradient(ellipse 5% 3% at 10% 20%,#F0A3B4 98%,transparent),radial-gradient(ellipse 4% 2.6% at 88% 26%,#94B97F 98%,transparent),radial-gradient(ellipse 5% 3% at 84% 80%,#F0A3B4 98%,transparent),radial-gradient(ellipse 4% 2.6% at 16% 82%,#94B97F 98%,transparent),radial-gradient(ellipse 3% 2% at 50% 10%,#F6C76B 98%,transparent)}
.fjgc-art--valentine{background:linear-gradient(150deg,#760A1D 0%,#B20E2D 100%);color:#fff}
.fjgc-art--valentine svg{right:5%;bottom:-6%;width:34%;height:auto;fill:rgba(255,255,255,.16)}
.fjgc-art--wedding{background:#FBFAF6;color:var(--red)}
.fjgc-art--wedding::before{content:"";position:absolute;top:0;bottom:0;left:22%;width:7%;background:var(--red)}
.fjgc-art--wedding::after{content:"";position:absolute;left:0;right:0;top:30%;height:11%;background:var(--red)}
.fjgc-art--wedding .fjgc-art__label{padding-left:34%;padding-top:20%}
.fjgc-art--winter{background:linear-gradient(160deg,#0B2D66 0%,#2C68B8 100%);color:#fff}
.fjgc-art--winter svg{left:-6%;bottom:-18%;width:50%;height:auto;stroke:rgba(255,255,255,.22);fill:none;stroke-width:2.2;stroke-linecap:round}

/* ===== buy flow ===== */
.fjgc-buy{background:var(--tint);padding:36px 0 56px}
.fjgc-buy__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
@media (min-width:1024px){.fjgc-buy{padding:64px 0 88px}.fjgc-buy__grid{grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}}
.fjgc-flow{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px 16px 28px;container-type:inline-size}
@media (min-width:600px){.fjgc-flow{padding:32px 32px 36px}}
.fjgc-flow__head h2{font-size:clamp(24px,3.2vw,30px);margin-bottom:6px}
.fjgc-flow__head p{font-size:14px;color:var(--mute)}
.fjgc-req{color:var(--red);font-weight:600}
.fjgc-step{margin-top:24px;padding-top:24px;border-top:1px solid var(--line);border-radius:8px}
.fjgc-step__title{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.fjgc-step__n{display:none;flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;font-weight:600;align-items:center;justify-content:center;letter-spacing:0}
.fjgc-js .fjgc-step__n{display:inline-flex}
.fjgc-step__sub{font-size:14px;color:var(--mute);margin:4px 0 0!important}
.fjgc-js .fjgc-step__sub{margin-left:38px!important}
.fjgc-pick{display:none}
.fjgc-js .fjgc-pick{display:block}

/* step 1: value tiers */
.fjgc-tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
@container (min-width:520px){.fjgc-tiers{grid-template-columns:repeat(5,minmax(0,1fr))}}
.fjgc-tier,.fjgc-theme{position:relative;display:block;margin:0;cursor:pointer;font-size:inherit;font-weight:inherit}
.fjgc-tier input,.fjgc-theme input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.fjgc-tier__box{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:10px 12px;background:#fff;border:1px solid var(--field);border-radius:8px;transition:border-color .15s,background-color .15s,box-shadow .15s}
.fjgc-tier__val{font-size:21px;font-weight:700;line-height:1.15;color:var(--ink);letter-spacing:-.02em}
.fjgc-tier__pay{font-size:13px;line-height:1.3;color:var(--mute)}
.fjgc-tier:hover .fjgc-tier__box{border-color:var(--navy)}
.fjgc-tier input:checked+.fjgc-tier__box{border-color:var(--navy);background:#F0F4FC;box-shadow:inset 0 0 0 1px var(--navy)}
.fjgc-tier input:checked+.fjgc-tier__box .fjgc-tier__pay{color:var(--navy);font-weight:600}
.fjgc-tier input:focus-visible+.fjgc-tier__box,.fjgc-theme input:focus-visible+.fjgc-theme__box{outline:2px solid var(--red);outline-offset:2px}
.fjgc-price{margin-top:14px!important;font-size:14px;min-height:22px}
.fjgc-price b{color:var(--ink)}
.fjgc-price .fjgc-save{color:var(--red);font-weight:600;white-space:nowrap}

/* step 2: designs */
.fjgc-themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin-top:16px}
@container (min-width:520px){.fjgc-themes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.fjgc-theme__box{position:relative;display:block;padding:5px;border:1px solid transparent;border-radius:16px;transition:border-color .15s,box-shadow .15s}
.fjgc-theme__name{display:block;margin-top:6px;text-align:center;font-size:13px;line-height:1.3;font-weight:500;color:var(--body)}
.fjgc-theme:hover .fjgc-theme__box{border-color:var(--field)}
.fjgc-theme input:checked+.fjgc-theme__box{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.fjgc-theme input:checked+.fjgc-theme__box .fjgc-theme__name{color:var(--ink);font-weight:600}
.fjgc-theme input:checked+.fjgc-theme__box::after{content:"";position:absolute;top:-6px;right:-6px;z-index:3;width:24px;height:24px;border-radius:50%;background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 0 0 2px #fff}
.fjgc-step__note{margin-top:12px!important;font-size:13px;color:var(--mute)}

/* ===== existing Interspire purchase panel, restyled (markup + scripts untouched) ===== */
#PurchaseGiftCertificate{float:none!important;width:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
#PurchaseGiftCertificate .BlockContent{margin:0!important;padding:0!important;border:0!important;background:none!important}
#PurchaseGiftCertificate .ErrorMessage:not(:empty){margin:16px 0 0;padding:12px 14px;border:1px solid #F3B4C0;border-radius:8px;background:#FDECEF;color:#8A0A22;font-size:14px}
#frmGiftCertificate{margin:0!important;padding:0!important;font-family:'Poppins','Segoe UI',Arial,sans-serif;color:#39424F}
#frmGiftCertificate .FormContainer{float:none!important;width:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important}
#frmGiftCertificate dl{display:grid;grid-template-columns:minmax(0,1fr);column-gap:16px;margin:0!important;padding:0!important;width:auto!important}
#frmGiftCertificate dt{float:none!important;clear:none!important;width:auto!important;margin:16px 0 6px!important;padding:0!important;text-align:left!important;font:600 14px/1.35 'Poppins','Segoe UI',Arial,sans-serif!important;color:#0F172A!important;background:none!important}
#frmGiftCertificate dt small{font-size:13px;font-weight:400;color:#5B6676;margin-left:4px}
#frmGiftCertificate dt .Required{color:#CC0C2F!important;margin-right:3px;font-weight:600}
#frmGiftCertificate dd{float:none!important;width:auto!important;min-width:0;margin:0!important;padding:0!important;background:none!important}
#frmGiftCertificate dd small{display:block;margin-top:6px;font-size:12px;color:#5B6676;text-align:right}
#frmGiftCertificate input.Textbox,#frmGiftCertificate input[type=text],#frmGiftCertificate input[type=email],#frmGiftCertificate select,#frmGiftCertificate textarea{display:block;width:100%!important;max-width:100%!important;height:48px;margin:0!important;padding:0 14px!important;font:400 16px/1.4 'Poppins','Segoe UI',Arial,sans-serif!important;color:#0F172A!important;background-color:#fff!important;border:1px solid #C3CCD9!important;border-radius:8px!important;box-shadow:none!important;outline:0;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
#frmGiftCertificate textarea{height:auto!important;min-height:112px;padding:12px 14px!important;resize:vertical;line-height:1.5!important}
#frmGiftCertificate select{padding-right:40px!important;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2300174F' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 15px center!important}
#frmGiftCertificate input.Textbox:focus,#frmGiftCertificate input[type=text]:focus,#frmGiftCertificate select:focus,#frmGiftCertificate textarea:focus{border-color:#00174F!important;box-shadow:0 0 0 3px rgba(0,23,79,.14)!important}
#frmGiftCertificate input::placeholder,#frmGiftCertificate textarea::placeholder{color:#8A94A3}
/* field errors, same look as the checkout */
#frmGiftCertificate input.Textbox.fj-field-invalid,#frmGiftCertificate input[type=text].fj-field-invalid,#frmGiftCertificate textarea.fj-field-invalid{border:1px solid #CC0C2F!important;box-shadow:0 0 0 1px #CC0C2F!important;background-color:#FFF8F9!important}
#fjgc .fj-field-err{display:block;margin:6px 0 0;color:#CC0C2F;font-size:12.5px;font-weight:600;line-height:1.35}
#frmGiftCertificate .fjgc-hide{display:none!important}
#frmGiftCertificate .Submit{display:flex;flex-direction:column;align-items:center;gap:12px;margin:24px 0 0!important;padding:0!important;text-align:center!important;float:none!important}
#previewButton{width:100%;min-height:46px;height:auto;margin:0!important;padding:0 28px!important;border:0!important;border-radius:2px!important;background:#CC0C2F!important;background-image:none!important;color:#fff!important;font:700 13px/1 'Poppins','Segoe UI',Arial,sans-serif!important;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;box-shadow:none!important;-webkit-appearance:none;appearance:none;transition:background-color .15s}
#previewButton:hover{background:#A80A27!important}
#previewButton:focus-visible{outline:2px solid #00174F;outline-offset:3px}
#frmGiftCertificate .Submit>span{display:none;font-size:12px;color:#5B6676;text-align:center;letter-spacing:.04em}
#frmGiftCertificate.fjgc-has-pay .Submit>span{display:block}
#gift-payment-container{width:100%;max-width:420px}
#gift-payment-error{max-width:420px;text-align:center}
#gift-payment-error[hidden]{display:none!important}
@container (min-width:520px){
  #frmGiftCertificate dl.fjgc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #frmGiftCertificate dl.fjgc-grid>dt:nth-of-type(1){grid-area:1/1}#frmGiftCertificate dl.fjgc-grid>dd:nth-of-type(1){grid-area:2/1}
  #frmGiftCertificate dl.fjgc-grid>dt:nth-of-type(2){grid-area:1/2}#frmGiftCertificate dl.fjgc-grid>dd:nth-of-type(2){grid-area:2/2}
  #frmGiftCertificate dl.fjgc-grid>dt:nth-of-type(3){grid-area:3/1}#frmGiftCertificate dl.fjgc-grid>dd:nth-of-type(3){grid-area:4/1}
  #frmGiftCertificate dl.fjgc-grid>dt:nth-of-type(4){grid-area:3/2}#frmGiftCertificate dl.fjgc-grid>dd:nth-of-type(4){grid-area:4/2}
  #frmGiftCertificate dl.fjgc-grid>dt:nth-of-type(5){grid-area:5/1/6/3}#frmGiftCertificate dl.fjgc-grid>dd:nth-of-type(5){grid-area:6/1/7/3}
  #frmGiftCertificate dl.fjgc-grid>dt:nth-of-type(6){grid-area:7/1}#frmGiftCertificate dl.fjgc-grid>dd:nth-of-type(6){grid-area:8/1}
  #frmGiftCertificate dl.fjgc-grid>dt:nth-of-type(7){grid-area:7/2}#frmGiftCertificate dl.fjgc-grid>dd:nth-of-type(8){grid-area:8/2}
  #frmGiftCertificate dl.fjgc-grid>dd:nth-of-type(7){grid-area:9/1/10/3}
  #previewButton{width:auto;min-width:280px;align-self:center}
  #frmGiftCertificate .Submit>span{text-align:center}
}
/* preview modal: was z-index 1 (under the sticky header) and 50% wide (unusable on phones) */
#giftCardModal{position:fixed!important;top:0;right:0;bottom:0;left:0;z-index:100000!important;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px!important;background:rgba(15,23,42,.75)!important}
#giftCardModal .modal-content{position:relative;width:100%!important;max-width:620px!important;margin:0 auto!important;padding:50px 0 0!important;border:0!important;border-radius:16px!important;background:#fff!important;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden}
#giftCardModal .modal-content::before{content:"Gift card preview";position:absolute;top:0;left:0;right:0;height:50px;padding:0 64px 0 24px;display:flex;align-items:center;border-bottom:1px solid #E3E7EE;font:600 16px/1.2 'Poppins','Segoe UI',Arial,sans-serif;color:#0F172A}
#giftCardModal .close{position:absolute;top:3px;right:10px;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-size:30px;line-height:1;color:#0F172A;cursor:pointer;float:none}
#giftCardModal .close:hover{background:#F5F7FB}
#giftCardFrame{display:block;width:100%!important;height:calc(100vh - 74px)!important;max-height:900px;border:0!important;border-radius:0;background:#F5F7FB}

/* ===== sticky summary (laptop/desktop) ===== */
.fjgc-side{display:none}
@media (min-width:1024px){.fjgc-js .fjgc-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:96px}}
.fjgc-sum{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px}
.fjgc-sum h2{font-size:18px;font-weight:600;margin-bottom:14px}
.fjgc-sum__art{position:relative}
.fjgc-sum__amt{position:absolute;right:10px;bottom:10px;z-index:4;padding:4px 10px;border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.fjgc-sum dl{margin:18px 0 0;padding:0}
.fjgc-sum dl>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.fjgc-sum dt{margin:0;color:var(--mute);font-weight:400}
.fjgc-sum dd{margin:0;color:var(--ink);font-weight:500;text-align:right;min-width:0;overflow-wrap:anywhere}
.fjgc-sum dl>div.fjgc-sum__save dd{color:var(--red);font-weight:600}
.fjgc-sum dl>div.fjgc-sum__total{border-bottom:0;padding-top:12px;font-size:16px}
.fjgc-sum dl>div.fjgc-sum__total dt{color:var(--ink);font-weight:600}
.fjgc-sum dl>div.fjgc-sum__total dd{font-size:22px;font-weight:700;letter-spacing:-.02em}
.fjgc-sum dl>div dd:empty::before{content:"\2013";color:#9AA4B2;font-size:14px;font-weight:400}
.fjgc-sum .fjgc-btn{width:100%;margin-top:14px}
.fjgc-sum__note{margin-top:12px!important;font-size:13px;line-height:1.5;color:var(--mute)}
.fjgc-side__bal{font-size:14px;text-align:center}

/* ===== sections ===== */
.fjgc-sec{padding:56px 0}
@media (min-width:900px){.fjgc-sec{padding:88px 0}}
.fjgc-head{max-width:640px;margin-bottom:28px}
.fjgc-head h2{font-size:clamp(26px,3.6vw,38px);letter-spacing:-.025em}
.fjgc-head h2::after{content:"";display:block;width:44px;height:3px;margin-top:14px;background:var(--red)}
.fjgc-head p{margin-top:12px;font-size:16px}

.fjgc-how__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:768px){.fjgc-how__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}}
.fjgc-how__card{display:flex;flex-direction:column;padding:26px 20px;border:1px solid var(--line);border-radius:10px;background:#fff}
@media (min-width:600px){.fjgc-how__card{padding:32px}}
.fjgc-how__card h3{font-size:20px;margin-bottom:20px}
.fjgc-steps{counter-reset:fjgc}
.fjgc-steps li{position:relative;counter-increment:fjgc;padding:2px 0 20px 46px;font-size:15px;line-height:1.55}
.fjgc-steps li:last-child{padding-bottom:0}
.fjgc-steps li::before{content:counter(fjgc);position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--navy);background:#fff;color:var(--navy);font-size:13px;font-weight:600}
.fjgc-steps li:not(:last-child)::after{content:"";position:absolute;left:14.5px;top:34px;bottom:4px;border-left:1.5px dashed #B8C2D1}
.fjgc-code{display:inline-block;padding:1px 7px;border-radius:4px;background:var(--tint);border:1px solid var(--line);color:var(--ink);font-weight:600;letter-spacing:.06em;white-space:nowrap}
.fjgc-how__card .fjgc-btn{margin-top:24px;align-self:flex-start}

.fjgc-faq{background:var(--tint)}
.fjgc-faq__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
@media (min-width:900px){.fjgc-faq__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:48px;align-items:start}}
.fjgc-faq__list{border-top:1px solid #D5DCE6}
.fjgc-faq details{border-bottom:1px solid #D5DCE6}
.fjgc-faq summary{position:relative;display:block;list-style:none;cursor:pointer;padding:18px 44px 18px 0;font-size:16px;font-weight:600;line-height:1.4;color:var(--ink)}
.fjgc-faq summary::-webkit-details-marker{display:none}
.fjgc-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.fjgc-faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.fjgc-faq details p{max-width:66ch;padding:0 0 20px;font-size:15px}

.fjgc-tiles{display:grid;grid-auto-flow:column;grid-auto-columns:74%;gap:12px;margin:0 -16px;padding:0 16px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.fjgc-tiles::-webkit-scrollbar{display:none}
.fjgc-tile{display:block;scroll-snap-align:start;border-radius:10px;overflow:hidden;background:#E9EDF4}
.fjgc-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .4s ease}
.fjgc-tile:hover img{transform:scale(1.03)}
@media (min-width:600px){.fjgc-tiles{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;margin:0;padding:0;overflow:visible}}

@media (prefers-reduced-motion:reduce){.fjgc *,.fjgc *::before,.fjgc *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.fjgc-hero,.fjgc-side,.fjgc-more{display:none}}

/* ===== additions to the reference, found against the live template ===== */
/* fjackets.css sets font-family (Work Sans) directly on a long element list (div, p, a, span, b, li, small, label, ...),
   so nothing inside inherits the block's Poppins - restate it on every element except the Playfair card labels */
.fjgc *:not(.fjgc-art__label){font-family:var(--ff)}
/* the old template also sets .Content{min-width:1360px!important}: phones scrolled sideways */
#Wrapper>#LayoutColumn2.Content{min-width:0!important}
/* the old template sets #Container{overflow:hidden}, which stops position:sticky (header + summary) on this page */
#Container{overflow:visible!important;overflow-x:clip!important}
/* HTMLHead gives #Wrapper position:relative + z-index:0, a stacking context that kept the preview modal (z 100000)
   UNDER the sticky header (z 40, outside #Wrapper): the top of the modal and its close button were not clickable on
   desktop. Nothing else in this block goes above z-index 4, so only the modal now rises over the header. */
#Wrapper{z-index:auto!important}
.fjgc-sum__amt:empty{display:none}