.tg-how-order-widget{position:relative;overflow:hidden;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#112a46}
.tg-how-order-widget:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0}
.tg-how-order-inner{position:relative;z-index:1;width:100%;margin:0 auto;display:grid;gap:34px}
.tg-how-order-heading{width:100%;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px}
.tg-how-order-eyebrow{display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:100%;background:rgba(255,103,20,.09);color:#ff6714;font-size:13px;line-height:1.1;font-weight:400;letter-spacing:.03em}
.tg-how-order-heading h2{margin:0;color:#112a46;font-size:clamp(30px,3vw,42px);line-height:1.08;font-weight:400;letter-spacing:-.035em}
.tg-how-order-heading p{margin:0;max-width:720px;color:#667c93;font-size:15px;line-height:1.65;font-weight:400}
.tg-how-order-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;isolation:isolate}
.tg-how-order-grid:before,.tg-how-order-grid:after{content:"";display:none;position:absolute;left:8%;right:8%;top:39px;height:2px;border-radius:999px;z-index:-1;pointer-events:none}
.tg-how-order-widget.has-connector .tg-how-order-grid:before{display:block;background:rgba(20,92,193,.18)}
.tg-how-order-widget.has-connector .tg-how-order-grid:after{display:block;right:50%;background:#ff6714;opacity:.9}
.tg-how-order-card{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0;min-height:360px;padding:24px 20px;border:1px solid rgba(255,255,255,.82);border-radius:24px;background:rgba(255,255,255,.70);box-shadow:0 16px 42px rgba(17,45,78,.08),inset 0 1px 0 rgba(255,255,255,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:transform .3s cubic-bezier(.2,.75,.25,1),background .3s ease,border-color .3s ease,box-shadow .3s ease}
.tg-how-order-card:hover{transform:translateY(-6px);background:rgba(255,255,255,.88);border-color:rgba(255,103,20,.32);box-shadow:0 26px 54px rgba(17,45,78,.12),0 10px 28px rgba(255,103,20,.06),inset 0 1px 0 rgba(255,255,255,.92)}
.tg-how-order-number{position:absolute;top:18px;left:18px;z-index:3;display:grid;place-items:center;width:38px;height:38px;border:2px solid rgba(255,255,255,.9);border-radius:50%;background:#ff6714;color:#fff;font-size:12px;line-height:1;font-weight:400;box-shadow:0 9px 22px rgba(255,103,20,.18)}
.tg-how-order-artwork{display:grid;place-items:center;width:100%;min-height:178px;border-radius:20px;background:rgba(22,68,118,.035);overflow:hidden}
.tg-how-order-artwork img{display:block;width:155px;max-width:90%;max-height:168px;height:auto;object-fit:contain;transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.tg-how-order-card:hover .tg-how-order-artwork img{transform:scale(1.04)}
.tg-how-order-copy{display:grid;gap:7px;text-align:center}
.tg-how-order-card h3{margin:0;color:#112a46;font-size:20px;line-height:1.2;font-weight:400;letter-spacing:-.02em}
.tg-how-order-card p{margin:0;color:#6b7e93;font-size:14px;line-height:1.6;font-weight:400}
@media(max-width:1024px){
  .tg-how-order-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tg-how-order-grid:before,.tg-how-order-grid:after{display:none!important}
  .tg-how-order-card{min-height:330px}
}
@media(max-width:767px){
  .tg-how-order-inner{gap:24px}
  .tg-how-order-heading h2{font-size:28px}
  .tg-how-order-heading p{font-size:14px;line-height:1.55}
  .tg-how-order-grid{grid-template-columns:1fr;gap:14px}
  .tg-how-order-card{min-height:0;padding:20px 18px;border-radius:20px}
  .tg-how-order-artwork{min-height:152px}
  .tg-how-order-artwork img{width:138px;max-height:148px}
  .tg-how-order-card h3{font-size:18px}
  .tg-how-order-card p{font-size:13px;line-height:1.55}
}
@media(prefers-reduced-motion:reduce){.tg-how-order-card,.tg-how-order-artwork img{transition:none!important}}


/* v1.8.4 How To Order RTL */
html[dir="rtl"] .tg-how-order-widget,body.tixgate-rtl .tg-how-order-widget{direction:rtl;text-align:right}
html[dir="rtl"] .tg-how-order-card,body.tixgate-rtl .tg-how-order-card{direction:rtl;text-align:right}
html[dir="rtl"] .tg-how-order-heading,body.tixgate-rtl .tg-how-order-heading{text-align:center}