Sample Store — 地址填写界面预览

body { background:#ffffff; color:#333; font-family:Georgia, serif; margin:0; font-size:17px; }
.site-header { background:#f4f4f4; border-bottom:1px solid #ddd; padding:18px 20px; font:600 18px Georgia, serif; }
.site { max-width:900px; margin:0 auto; padding:0 20px 60px; }
.entry-content a { color:#c0392b; text-decoration:underline; }
.entry-content h2, .entry-content h3, .entry-content h4 { color:#111; text-transform:uppercase; }
.entry-content h2 { font-size:2rem; margin:1.4em 0 .6em; }
.entry-content h3 { font-size:1.4rem; margin:1.3em 0 .5em; }
.entry-content p { margin:1.5em 0; }
.entry-content ul { list-style:disc; padding-left:2.2em; }
.entry-content label { display:block; margin:1em 0 .3em; font-weight:700; }
.entry-content input, .entry-content select, .entry-content textarea {
width:100%; padding:8px; border:1px solid #ccc; border-radius:0; font-family:Georgia, serif; font-size:17px;
background:#fff; color:#333; min-height:44px; }
.entry-content button { font-family:Georgia, serif; }
.entry-content img { border-radius:12px; box-shadow:0 4px 18px rgba(0,0,0,.18); }
.entry-content dl { margin:1.4em 0; }
.entry-content dt { font-weight:700; }
.entry-content dd { margin:0 0 .8em 2em; }

/* ==========================================================================
Haofeng Sample Store — 收货地址填写界面(结账 Step 2)
粘贴位置:Appearance → Editor → Styles → Additional CSS(与 additional-css.css 放一起)
作用域:#hfss-addr —— 不影响站点其它页面与其它表单
========================================================================== */

/* ———- 1. 局部重置 ———- */
#hfss-addr, #hfss-addr * { box-sizing: border-box; }
#hfss-addr {
–a-bg: #0e0e0e;
–a-panel: #1a1a1a;
–a-field: #101010;
–a-line: #2b2b2b;
–a-line2: #3a3a3a;
–a-tx: #ececec;
–a-tx2: #a8a8a8;
–a-tx3: #7d7d7d;
–a-gold: #c9a227;
–a-gold2: #e0bb48;
–a-err: #d4694a;
background: var(–a-bg);
color: var(–a-tx);
font-family: “Helvetica Neue”, Helvetica, Arial, “PingFang SC”, “Microsoft YaHei”, sans-serif;
font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased;
padding: 56px 0;
}
#hfss-addr h1, #hfss-addr h2, #hfss-addr h3, #hfss-addr h4 {
margin: 0 !important; padding: 0 !important; color: #ececec !important;
font-weight: 700 !important; line-height: 1.2 !important; text-transform: none !important; letter-spacing: -.01em;
}
#hfss-addr p { margin: 0 !important; padding: 0 !important; color: inherit; }
#hfss-addr ul, #hfss-addr ol { margin: 0 !important; padding: 0 !important; list-style: none !important; }
#hfss-addr img { max-width: 100%; height: auto; display: block; border-radius: 0 !important; box-shadow: none !important; }
#hfss-addr a { text-decoration: none !important; }
#hfss-addr label { display: block; }

/* ———- 2. 容器 / 步骤条 ———- */
#hfss-addr .a-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
#hfss-addr .a-eyebrow { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(–a-gold); font-weight: 700; margin-bottom: 10px !important; }
#hfss-addr .a-title { font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px !important; }
#hfss-addr .a-lede { color: var(–a-tx2); font-size: 15px; max-width: 62ch; }

#hfss-addr .a-steps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 34px; }
#hfss-addr .a-step { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(–a-tx3); }
#hfss-addr .a-step i {
width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(–a-line2); color: var(–a-tx3);
display: flex; align-items: center; justify-content: center; font-size: 12px; font-style: normal; font-weight: 700; flex: 0 0 auto;
}
#hfss-addr .a-step–done { color: var(–a-tx2); }
#hfss-addr .a-step–done i { border-color: var(–a-gold); color: var(–a-gold); }
#hfss-addr .a-step–now { color: var(–a-tx); font-weight: 700; }
#hfss-addr .a-step–now i { background: var(–a-gold); border-color: var(–a-gold); color: #171100; }
#hfss-addr .a-step-sep { width: 22px; height: 1px; background: var(–a-line2); }

/* ———- 3. 两栏布局 ———- */
#hfss-addr .a-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 30px; align-items: start; }

/* ———- 4. 表单块 ———- */
#hfss-addr .a-card { background: var(–a-panel); border: 1px solid var(–a-line); border-radius: 14px; padding: 24px; margin-bottom: 18px; }
#hfss-addr .a-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
#hfss-addr .a-card__head span {
width: 26px; height: 26px; border-radius: 50%; background: rgba(201,162,39,.15); color: var(–a-gold);
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
#hfss-addr .a-card__head h3 { font-size: 16px; }
#hfss-addr .a-card__note { font-size: 12.5px; color: var(–a-tx3); margin-top: 4px !important; }

#hfss-addr .a-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
#hfss-addr .a-row–3 { grid-template-columns: 1.2fr .8fr; }
#hfss-addr .a-field { margin-bottom: 16px; }
#hfss-addr .a-field:last-child { margin-bottom: 0; }
#hfss-addr .a-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(–a-tx3); margin-bottom: 7px; }
#hfss-addr .a-label b { color: var(–a-gold); font-weight: 700; }
#hfss-addr .a-opt { color: var(–a-tx3); text-transform: none; letter-spacing: 0; font-weight: 400; }

#hfss-addr .a-input, #hfss-addr .a-select, #hfss-addr .a-textarea {
width: 100% !important; max-width: 100% !important;
background: var(–a-field) !important; color: var(–a-tx) !important;
border: 1px solid var(–a-line2) !important; border-radius: 10px !important;
padding: 13px 14px !important; font-size: 15px !important; font-family: inherit !important;
line-height: 1.3 !important; height: auto !important; min-height: 48px !important;
box-shadow: none !important; margin: 0 !important; appearance: none;
}
#hfss-addr .a-textarea { min-height: 88px !important; resize: vertical; }
#hfss-addr .a-select {
background-image: linear-gradient(45deg, transparent 50%, #a8a8a8 50%), linear-gradient(135deg, #a8a8a8 50%, transparent 50%) !important;
background-position: calc(100% – 20px) 21px, calc(100% – 15px) 21px !important;
background-size: 5px 5px, 5px 5px !important; background-repeat: no-repeat !important;
padding-right: 40px !important;
}
#hfss-addr .a-input::placeholder, #hfss-addr .a-textarea::placeholder { color: #5f5f5f; }
#hfss-addr .a-input:focus, #hfss-addr .a-select:focus, #hfss-addr .a-textarea:focus {
outline: none !important; border-color: var(–a-gold) !important; box-shadow: 0 0 0 3px rgba(201,162,39,.16) !important;
}
#hfss-addr .a-phone { display: grid; grid-template-columns: 118px 1fr; gap: 10px; }
#hfss-addr .a-hint { font-size: 12px; color: var(–a-tx3); margin-top: 6px !important; }
#hfss-addr .a-err { font-size: 12px; color: var(–a-err); margin-top: 6px !important; display: none; }
#hfss-addr .a-field.is-error .a-input, #hfss-addr .a-field.is-error .a-select, #hfss-addr .a-field.is-error .a-textarea {
border-color: var(–a-err) !important; background: rgba(212,105,74,.06) !important;
}
#hfss-addr .a-field.is-error .a-err { display: block; }
#hfss-addr .a-field.is-hidden { display: none !important; }

/* ———- 5. 承运商 / 勾选 ———- */
#hfss-addr .a-choices { display: grid; gap: 10px; }
#hfss-addr .a-choice {
display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
border: 1px solid var(–a-line2); border-radius: 12px; cursor: pointer; transition: border-color .15s, background .15s;
}
#hfss-addr .a-choice:hover { border-color: #4a4a4a; }
#hfss-addr .a-choice input { width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 3px 0 0 !important; padding: 0 !important; accent-color: var(–a-gold); flex: 0 0 auto; }
#hfss-addr .a-choice__txt { font-size: 14px; color: var(–a-tx); }
#hfss-addr .a-choice__txt em { display: block; font-style: normal; font-size: 12.5px; color: var(–a-tx3); margin-top: 2px; }
#hfss-addr .a-choice__price { margin-left: auto; font-size: 14px; font-weight: 700; color: var(–a-tx); white-space: nowrap; }
#hfss-addr .a-choice.is-on { border-color: var(–a-gold); background: rgba(201,162,39,.07); }

#hfss-addr .a-check { display: flex; align-items: flex-start; gap: 12px; font-size: 13.5px; color: var(–a-tx2); margin-top: 14px; cursor: pointer; }
#hfss-addr .a-check:first-of-type { margin-top: 0; }
#hfss-addr .a-check input { width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 3px 0 0 !important; padding: 0 !important; accent-color: var(–a-gold); flex: 0 0 auto; }
#hfss-addr .a-check a { color: var(–a-gold) !important; }

/* ———- 6. 订单摘要 ———- */
#hfss-addr .a-sum { background: var(–a-panel); border: 1px solid var(–a-line); border-radius: 14px; padding: 22px; position: sticky; top: 24px; }
#hfss-addr .a-sum__it { display: flex; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(–a-line); }
#hfss-addr .a-sum__it img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: 0 0 auto; background: #0b0b0b; }
#hfss-addr .a-sum__it h4 { font-size: 15px; }
#hfss-addr .a-sum__it p { font-size: 12px; color: var(–a-tx3); margin-top: 3px !important; }
#hfss-addr .a-sum__line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(–a-tx2); padding: 9px 0; }
#hfss-addr .a-sum__line b { color: var(–a-tx); font-weight: 700; }
#hfss-addr .a-sum__line–total { border-top: 1px solid var(–a-line); margin-top: 8px; padding-top: 14px; font-size: 15px; color: var(–a-tx); }
#hfss-addr .a-sum__line–total b { font-size: 22px; color: var(–a-gold); }
#hfss-addr .a-credit {
margin-top: 14px; font-size: 12.5px; color: #e8c98a; background: rgba(201,162,39,.1);
border: 1px solid rgba(201,162,39,.28); border-radius: 10px; padding: 11px 13px;
}
#hfss-addr .a-sum__pay { margin-top: 16px; }
#hfss-addr .a-btn {
display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px;
padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 700; cursor: pointer;
transition: background .18s, opacity .18s; font-family: inherit;
}
#hfss-addr .a-btn–gold { background: var(–a-gold) !important; color: #171100 !important; }
#hfss-addr .a-btn–gold:hover { background: var(–a-gold2) !important; }
#hfss-addr .a-btn–gold[disabled] { opacity: .45; cursor: not-allowed; }
#hfss-addr .a-btn–ghost { background: transparent !important; border-color: var(–a-line2) !important; color: var(–a-tx) !important; }
#hfss-addr .a-btn–ghost:hover { border-color: var(–a-gold) !important; color: var(–a-gold) !important; }
#hfss-addr .a-sum__safe { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(–a-tx3); margin-top: 12px !important; text-align: center; }
#hfss-addr .a-sum__safe i { color: var(–a-gold); font-style: normal; }

/* ———- 7. 校验汇总条 / 核对页 ———- */
#hfss-addr .a-alert {
display: none; align-items: flex-start; gap: 10px; margin-bottom: 18px; padding: 13px 16px;
border: 1px solid rgba(212,105,74,.5); background: rgba(212,105,74,.1); color: #f0b9a8;
border-radius: 12px; font-size: 13.5px;
}
#hfss-addr .a-alert.is-on { display: flex; }
#hfss-addr .a-review { display: none; }
#hfss-addr .a-review.is-on { display: block; }
#hfss-addr .a-review__box { border: 1px solid var(–a-line); border-radius: 12px; padding: 18px; background: #141414; margin-top: 16px; }
#hfss-addr .a-review__box dl { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 9px 16px; font-size: 14px; }
#hfss-addr .a-review__box dt { color: var(–a-tx3); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding-top: 3px; }
#hfss-addr .a-review__box dd { margin: 0; color: var(–a-tx); }
#hfss-addr .a-review__acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
#hfss-addr .a-review__acts .a-btn { width: auto; min-width: 200px; }

#hfss-addr .a-tiny { font-size: 12.5px; color: var(–a-tx3); }

/* ———- 8. 响应式 ———- */
@media (max-width: 940px) {
#hfss-addr .a-grid { grid-template-columns: 1fr; }
#hfss-addr .a-sum { position: static; }
#hfss-addr .a-sum–first { order: -1; margin-bottom: 18px; }
}
@media (max-width: 620px) {
#hfss-addr { padding: 40px 0; }
#hfss-addr .a-wrap { padding: 0 18px; }
#hfss-addr .a-row, #hfss-addr .a-row–3 { grid-template-columns: 1fr; }
#hfss-addr .a-card { padding: 18px; }
#hfss-addr .a-phone { grid-template-columns: 104px 1fr; }
#hfss-addr .a-review__box dl { grid-template-columns: 1fr; gap: 2px 0; }
#hfss-addr .a-review__box dt { padding-top: 10px; }
#hfss-addr .a-review__acts .a-btn { width: 100%; min-width: 0; }
#hfss-addr .a-steps { gap: 8px; margin: 20px 0 26px; }
#hfss-addr .a-step { font-size: 12px; }
#hfss-addr .a-step-sep { width: 12px; }
}



Step 2 of 3 — Shipping details

Where should we send your sample?

We ship with DHL Express and FedEx. Fill in the address exactly as it should appear on the courier label — a courier phone number is required for delivery.

✓ Choose sample
2 Shipping details
3 Payment

⚠  Please complete the highlighted fields before continuing.

1

Contact & sample requirements

Used for the order confirmation and for any question about your sample.

Full name *

Please enter the consignee name.

Company / Brand (optional)

Email *

Please enter a valid email address.

Phone / WhatsApp *

+1 United States / Canada+44 United Kingdom+61 Australia+64 New Zealand+86 China+852 Hong Kong+886 Taiwan+81 Japan+82 South Korea+65 Singapore+60 Malaysia+66 Thailand+84 Vietnam+62 Indonesia+63 Philippines+91 India+92 Pakistan+880 Bangladesh+94 Sri Lanka+971 United Arab Emirates+966 Saudi Arabia+974 Qatar+965 Kuwait+972 Israel+90 Turkey+49 Germany+33 France+39 Italy+34 Spain+351 Portugal+31 Netherlands+32 Belgium+41 Switzerland+43 Austria+46 Sweden+47 Norway+45 Denmark+358 Finland+48 Poland+420 Czechia+36 Hungary+40 Romania+30 Greece+7 Russia+380 Ukraine+55 Brazil+52 Mexico+54 Argentina+56 Chile+57 Colombia+51 Peru+27 South Africa+20 Egypt+234 Nigeria+254 Kenya+212 Morocco

Please enter a reachable phone number.

Sample requirements (optional)

Describe logo, colour and size here if the sample needs to be personalised.

2

Shipping address

Field names change automatically with the country you select.

Country / Region *
ChinaHong Kong SARTaiwanJapanSouth KoreaSingaporeMalaysiaThailandVietnamIndonesiaPhilippinesIndiaPakistanBangladeshSri LankaNepalCambodiaMyanmarMongoliaUnited KingdomIrelandGermanyFranceItalySpainPortugalNetherlandsBelgiumLuxembourgSwitzerlandAustriaSwedenNorwayDenmarkFinlandPolandCzechiaHungaryRomaniaGreeceUkraineRussiaTurkeyIsraelUnited Arab EmiratesSaudi ArabiaQatarKuwaitMacau SARSouth AfricaEgyptNigeriaKenyaMoroccoGhanaTanzaniaAlgeriaUnited StatesCanadaMexicoBrazilArgentinaChileColombiaPeruEcuadorAustraliaNew ZealandOther country / region

Please select a destination country.

Address line 1 *

Please enter the street address.

Address line 2 (optional)

City *

Please enter the city.

State *

Please enter the state or province.

ZIP code *

5 digits, or ZIP+4

Please check the postal code format for this country.

Courier contact phone *

DHL / FedEx will call this number on the delivery day.

A delivery phone number is required by the courier.

3

Delivery & confirmations

Shipping cost updates with the country you chose above.

DHL Express Fastest, door to door, tracking included
US$28

FedEx International Priority Alternative for remote areas
US$30

Ship on my own DHL / FedEx account You are billed directly by the carrier
US$0

Delivery note (optional)

I understand that duties, taxes and customs clearance fees are paid by the receiver. *

Save this address for my next sample order.

Questions about the address? WhatsApp +86 157 5092 2837 — we reply within 4 working hours.

✓

Please check the address on your courier label

This exact text will be printed on the shipping label. Edit anything that looks wrong.

Consignee
—
Company
—
Address
—
Country
—
Phone
—
Email
—
Carrier
—
Sample notes
—

Next step: PayPal checkout (card accepted without a PayPal account).

(function () {
var root = document.getElementById(‘hfss-addr’);
if (!root || root.dataset.ready) return;
root.dataset.ready = ‘1’;

/* ———- 商品目录:sku -> 名称 / 价格 / 图 ———- */
var CATALOG = {
‘SS-1001’: { n: ‘Blank Cotton Crew Neck Tee’, s: ‘Blank Cotton Tee’, p: 29, img: ‘https://haofenggroup.hk/wp-content/uploads/2026/05/k1.jpg’ },
‘SS-2001’: { n: ‘Fabric Swatch Book \u2014 43 Colorways’, s: ‘Fabric Swatch Book’, p: 39, img: ‘https://haofenggroup.hk/wp-content/uploads/2026/05/P3SS.jpg’ },
‘SS-2002’: { n: ‘Foam Print Craft Swatch’, s: ‘Foam Print Swatch’, p: 25, img: ‘https://haofenggroup.hk/wp-content/uploads/2026/05/N1-2.jpg’ },
‘SS-2003’: { n: ‘3D Silicone Mould Badge’, s: ‘3D Mould Badge’, p: 25, img: ‘https://haofenggroup.hk/wp-content/uploads/2026/05/N1-1.jpg’ },
‘SS-2004’: { n: ‘Gradient Dyed Fabric Panel’, s: ‘Gradient Fabric Panel’, p: 19, img: ‘https://haofenggroup.hk/wp-content/uploads/2026/06/p10s.jpg’ }
};

/* ———- 国家数据 ———-
名称 | ISO | 分区 | 需要省/州 | 省州标签 | 邮编标签 | 邮编提示 | 邮编正则(空=不校验格式)
分区:asia 18 / na 28 / eu 30 / anz 30 / row 35 */
var RAW = [
‘United States|US|na|1|State|ZIP code|5 digits, or ZIP+4|^\\d{5}(-\\d{4})?$’,
‘Canada|CA|na|1|Province|Postal code|A1A 1A1|^[A-Za-z]\\d[A-Za-z][ -]?\\d[A-Za-z]\\d$’,
‘Mexico|MX|na|1|State|Postal code|5 digits|^\\d{5}$’,
‘Brazil|BR|row|0||Postal code|01310-100|^\\d{5}-?\\d{3}$’,
‘Argentina|AR|row|0||Postal code||’,
‘Chile|CL|row|0||Postal code||’,
‘Colombia|CO|row|0||Postal code||’,
‘Peru|PE|row|0||Postal code||’,
‘Ecuador|EC|row|0||Postal code||’,
‘United Kingdom|GB|eu|0|County|Postcode|e.g. SW1A 1AA|^[A-Za-z]{1,2}\\d[A-Za-z\\d]?\\s?\\d[A-Za-z]{2}$’,
‘Ireland|IE|eu|0|County|Eircode||’,
‘Germany|DE|eu|0||Postal code|5 digits|^\\d{5}$’,
‘France|FR|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Italy|IT|eu|0|Province|Postal code|5 digits|^\\d{5}$’,
‘Spain|ES|eu|0|Province|Postal code|5 digits|^\\d{5}$’,
‘Portugal|PT|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Netherlands|NL|eu|0||Postal code|1234 AB|^\\d{4}\\s?[A-Za-z]{2}$’,
‘Belgium|BE|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Luxembourg|LU|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Switzerland|CH|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Austria|AT|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Sweden|SE|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Norway|NO|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Denmark|DK|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Finland|FI|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Poland|PL|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Czechia|CZ|eu|0||Postal code|123 45|^\\d{3}\\s?\\d{2}$’,
‘Hungary|HU|eu|0||Postal code|4 digits|^\\d{4}$’,
‘Romania|RO|eu|0||Postal code|6 digits|^\\d{6}$’,
‘Greece|GR|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Ukraine|UA|eu|0||Postal code||’,
‘Russia|RU|eu|0||Postal code|6 digits|^\\d{6}$’,
‘Turkey|TR|eu|0||Postal code|5 digits|^\\d{5}$’,
‘Israel|IL|row|0||Postal code||’,
‘United Arab Emirates|AE|row|1|Emirate|||’,
‘Saudi Arabia|SA|row|0||Postal code||’,
‘Qatar|QA|row|0||||’,
‘Kuwait|KW|row|0||Postal code||’,
‘China|CN|asia|1|Province|Postal code|6 digits|^\\d{6}$’,
‘Hong Kong SAR|HK|asia|0||||’,
‘Macau SAR|MO|asia|0||||’,
‘Taiwan|TW|asia|0||Postal code|3 or 5 digits|^\\d{3}(\\d{2})?$’,
‘Japan|JP|asia|1|Prefecture|Postal code|150-0001|^\\d{3}-?\\d{4}$’,
‘South Korea|KR|asia|1|Province / City|Postal code|5 digits|^\\d{5}$’,
‘Singapore|SG|asia|0||Postal code|6 digits|^\\d{6}$’,
‘Malaysia|MY|asia|1|State|Postal code|5 digits|^\\d{5}$’,
‘Thailand|TH|asia|1|Province|Postal code|5 digits|^\\d{5}$’,
‘Vietnam|VN|asia|1|Province / City|Postal code||’,
‘Indonesia|ID|asia|1|Province|Postal code|5 digits|^\\d{5}$’,
‘Philippines|PH|asia|1|Province|Postal code||’,
‘India|IN|asia|1|State|PIN code|6 digits|^\\d{6}$’,
‘Pakistan|PK|asia|0||Postal code||’,
‘Bangladesh|BD|asia|0||Postal code||’,
‘Sri Lanka|LK|asia|0||Postal code||’,
‘Nepal|NP|asia|0||Postal code||’,
‘Cambodia|KH|asia|0||Postal code||’,
‘Myanmar|MM|asia|0||Postal code||’,
‘Mongolia|MN|asia|0||Postal code||’,
‘Australia|AU|anz|1|State / Territory|Postcode|4 digits|^\\d{4}$’,
‘New Zealand|NZ|anz|0||Postcode|4 digits|^\\d{4}$’,
‘South Africa|ZA|row|1|Province|Postal code|4 digits|^\\d{4}$’,
‘Egypt|EG|row|0||Postal code||’,
‘Nigeria|NG|row|0||Postal code||’,
‘Kenya|KE|row|0||Postal code||’,
‘Morocco|MA|row|0||Postal code||’,
‘Ghana|GH|row|0||Postal code||’,
‘Tanzania|TZ|row|0||Postal code||’,
‘Algeria|DZ|row|0||Postal code||’,
‘Other country|XX|row|0||Postal code||’
];

var DIAL = [‘+1|United States / Canada’, ‘+44|United Kingdom’, ‘+61|Australia’, ‘+64|New Zealand’, ‘+86|China’, ‘+852|Hong Kong’, ‘+886|Taiwan’, ‘+81|Japan’, ‘+82|South Korea’, ‘+65|Singapore’, ‘+60|Malaysia’, ‘+66|Thailand’, ‘+84|Vietnam’, ‘+62|Indonesia’, ‘+63|Philippines’, ‘+91|India’, ‘+92|Pakistan’, ‘+880|Bangladesh’, ‘+94|Sri Lanka’, ‘+971|United Arab Emirates’, ‘+966|Saudi Arabia’, ‘+974|Qatar’, ‘+965|Kuwait’, ‘+972|Israel’, ‘+90|Turkey’, ‘+49|Germany’, ‘+33|France’, ‘+39|Italy’, ‘+34|Spain’, ‘+351|Portugal’, ‘+31|Netherlands’, ‘+32|Belgium’, ‘+41|Switzerland’, ‘+43|Austria’, ‘+46|Sweden’, ‘+47|Norway’, ‘+45|Denmark’, ‘+358|Finland’, ‘+48|Poland’, ‘+420|Czechia’, ‘+36|Hungary’, ‘+40|Romania’, ‘+30|Greece’, ‘+7|Russia’, ‘+380|Ukraine’, ‘+55|Brazil’, ‘+52|Mexico’, ‘+54|Argentina’, ‘+56|Chile’, ‘+57|Colombia’, ‘+51|Peru’, ‘+27|South Africa’, ‘+20|Egypt’, ‘+234|Nigeria’, ‘+254|Kenya’, ‘+212|Morocco’];

var $ = function (s) { return root.querySelector(s); };
var COUNTRIES = RAW.map(function (r) {
var a = r.split(‘|’);
return { name: a[0], iso: a[1], region: a[2], needState: a[3] === ‘1’, stateLabel: a[4], zipLabel: a[5], zipHint: a[6], zipRe: a[7] ? new RegExp(a[7]) : null };
});
var SHIP = { asia: 18, na: 28, eu: 30, anz: 30, row: 35 };
var state = { country: null, carrier: ‘dhl’, item: null };

/* ———- 初始化下拉 ———- */
var cSel = $(‘#hfss-country’);
var gAsia = [], gEu = [], gAm = [], gOther = [];
COUNTRIES.forEach(function (c) {
if (c.iso === ‘XX’) return;
var o = new Option(c.name, c.iso);
if ([‘CN’, ‘HK’, ‘TW’, ‘JP’, ‘KR’, ‘SG’, ‘MY’, ‘TH’, ‘VN’, ‘ID’, ‘PH’, ‘IN’, ‘PK’, ‘BD’, ‘LK’, ‘NP’, ‘KH’, ‘MM’, ‘MN’].indexOf(c.iso) > -1) gAsia.push(o);
else if ([‘AU’, ‘NZ’].indexOf(c.iso) > -1) gOther.push(o);
else if ([‘US’, ‘CA’, ‘MX’, ‘BR’, ‘AR’, ‘CL’, ‘CO’, ‘PE’, ‘EC’].indexOf(c.iso) > -1) gAm.push(o);
else gEu.push(o);
});
[[‘Asia’, gAsia], [‘Europe / Middle East / Africa’, gEu], [‘Americas’, gAm], [‘Oceania & other’, gOther]].forEach(function (g) {
var og = document.createElement(‘optgroup’);
og.label = g[0];
g[1].forEach(function (o) { og.appendChild(o); });
cSel.appendChild(og);
});
var last = document.createElement(‘option’);
last.value = ‘XX’; last.textContent = ‘Other country / region’;
cSel.appendChild(last);
cSel.value = ‘US’;

var dSel = $(‘#hfss-dial’);
DIAL.forEach(function (d) {
var a = d.split(‘|’);
dSel.appendChild(new Option(a[0] + ‘ ‘ + a[1], a[0]));
});
dSel.value = ‘+1’;

/* ———- 商品:URL ?sku= 优先,否则用默认 ———- */
var params = new URLSearchParams(location.search);
var sku = (params.get(‘sku’) || ”).toUpperCase();
state.item = CATALOG[sku] || CATALOG[root.dataset.fallbackSku];
state.sku = CATALOG[sku] ? sku : root.dataset.fallbackSku;
$(‘#hfss-item-name’).textContent = state.item.n;
$(‘#hfss-item-sku’).textContent = ‘SKU ‘ + state.sku;
$(‘#hfss-item-img’).src = state.item.img;
$(‘#hfss-sum-item-label’).textContent = state.item.s;

/* ———- 国家切换:字段名 / 必填 / 提示 / 运费 ———- */
function country() {
var iso = cSel.value;
var found = COUNTRIES.filter(function (c) { return c.iso === iso; })[0] || COUNTRIES[COUNTRIES.length – 1];
state.country = found;

var sf = $(‘#hfss-state-field’), zf = $(‘#hfss-zip-field’), sl = $(‘#hfss-state-label’), zl = $(‘#hfss-zip-label’);
var st = $(‘#hfss-state’), zp = $(‘#hfss-zip’);

if (found.needState) {
sf.classList.remove(‘is-hidden’);
sl.innerHTML = (found.stateLabel || ‘State / Province’) + ‘ *‘;
st.required = true;
} else {
sf.classList.add(‘is-hidden’);
st.required = false;
st.value = ”;
clearErr(st);
}

if (found.zipLabel) {
zf.classList.remove(‘is-hidden’);
zl.innerHTML = found.zipLabel + ‘ *‘;
zp.required = true;
$(‘#hfss-zip-hint’).textContent = found.zipHint || (found.zipLabel + ‘ of the delivery address.’);
} else {
zf.classList.add(‘is-hidden’);
zp.required = false;
zp.value = ”;
clearErr(zp);
}
updateTotals();
}

/* ———- 运费 / 合计 ———- */
function shipCost() {
if (state.carrier === ‘own’) return 0;
var base = SHIP[state.country.region] || 35;
return state.carrier === ‘fedex’ ? base + 2 : base;
}
function updateTotals() {
var sc = shipCost();
var label = state.carrier === ‘dhl’ ? ‘DHL Express’ : state.carrier === ‘fedex’ ? ‘FedEx International Priority’ : ‘Own carrier account’;
$(‘#hfss-sum-ship-label’).textContent = label;
$(‘#hfss-sum-ship’).textContent = sc === 0 ? ‘US$0 (collect)’ : ‘US$’ + sc;
$(‘#hfss-sum-item-price’).textContent = ‘US$’ + state.item.p;
$(‘#hfss-sum-total’).textContent = ‘US$’ + (state.item.p + sc);
root.querySelectorAll(‘[data-ship]’).forEach(function (el) {
var base = SHIP[state.country.region] || 35;
el.textContent = ‘US$’ + (el.dataset.ship === ‘fedex’ ? base + 2 : base);
});
}

root.querySelectorAll(‘#hfss-carriers input[name=”carrier”]’).forEach(function (r) {
r.addEventListener(‘change’, function () {
state.carrier = r.value;
root.querySelectorAll(‘#hfss-carriers .a-choice’).forEach(function (c) {
c.classList.toggle(‘is-on’, c.contains(r) && r.checked);
});
var acct = $(‘#hfss-acct-field’);
if (r.value === ‘own’) { acct.classList.remove(‘is-hidden’); $(‘#hfss-acct’).required = true; }
else { acct.classList.add(‘is-hidden’); $(‘#hfss-acct’).required = false; clearErr($(‘#hfss-acct’)); }
updateTotals();
});
});

/* ———- 校验 ———- */
function fieldOf(el) { return el.closest(‘.a-field’); }
function setErr(el, on) { var f = fieldOf(el); if (f) f.classList.toggle(‘is-error’, !!on); }
function clearErr(el) { setErr(el, false); }

function valid(el) {
var v = (el.value || ”).trim();
if (el.type === ‘checkbox’) return el.checked;
if (!el.required && !v) return true;
if (!v) return false;
if (el.id === ‘hfss-email’) return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v);
if (el.id === ‘hfss-phone’ || el.id === ‘hfss-cphone’) return v.replace(/[^\d]/g, ”).length >= 6;
if (el.id === ‘hfss-zip’ && state.country && state.country.zipRe) return state.country.zipRe.test(v.toUpperCase().replace(/\s+/g, ‘ ‘));
return true;
}

var FIELDS = [‘#hfss-name’, ‘#hfss-email’, ‘#hfss-phone’, ‘#hfss-country’, ‘#hfss-addr1’, ‘#hfss-city’, ‘#hfss-state’, ‘#hfss-zip’, ‘#hfss-cphone’, ‘#hfss-acct’];
FIELDS.forEach(function (sel) {
var el = $(sel);
el.addEventListener(‘blur’, function () { if ((el.value || ”).trim()) setErr(el, !valid(el)); });
el.addEventListener(‘input’, function () { if (fieldOf(el).classList.contains(‘is-error’) && valid(el)) clearErr(el); });
});
cSel.addEventListener(‘change’, function () { clearErr(cSel); country(); });
$(‘#hfss-duty’).addEventListener(‘change’, function () {
$(‘#hfss-duty-err’).style.display = this.checked ? ‘none’ : ‘block’;
});

/* ———- 提交 -> 核对 ———- */
function submit() {
var bad = [];
FIELDS.forEach(function (sel) {
var el = $(sel);
if (el.closest(‘.a-field.is-hidden’)) return;
if (!valid(el)) { setErr(el, true); bad.push(el); }
});
if (!$(‘#hfss-duty’).checked) { $(‘#hfss-duty-err’).style.display = ‘block’; bad.push($(‘#hfss-duty’)); }
var alert = $(‘#hfss-addr-alert’);
if (bad.length) {
alert.textContent = ‘\u26A0 Please complete the highlighted fields before continuing. (‘ + bad.length + ‘)’;
alert.classList.add(‘is-on’);
var first = bad[0];
var y = first.getBoundingClientRect().top + window.pageYOffset – 90;
window.scrollTo({ top: y, behavior: ‘smooth’ });
first.focus({ preventScroll: true });
return;
}
alert.classList.remove(‘is-on’);
fillReview();
$(‘#hfss-review’).classList.add(‘is-on’);
$(‘#hfss-review’).scrollIntoView({ behavior: ‘smooth’, block: ‘center’ });
}
$(‘#hfss-addr-form’).addEventListener(‘submit’, function (e) { e.preventDefault(); submit(); });
$(‘#hfss-submit-inline’).addEventListener(‘click’, submit);
$(‘#hfss-submit-side’).addEventListener(‘click’, submit);

function fillReview() {
var c = state.country;
var addr = [$(‘#hfss-addr1’).value, $(‘#hfss-addr2’).value, $(‘#hfss-city’).value,
c.needState ? $(‘#hfss-state’).value : ”, c.zipLabel ? $(‘#hfss-zip’).value : ”]
.filter(function (x) { return (x || ”).trim(); }).join(‘, ‘);
$(‘#rv-name’).textContent = $(‘#hfss-name’).value || ‘\u2014’;
$(‘#rv-company’).textContent = $(‘#hfss-company’).value || ‘\u2014 (individual)’;
$(‘#rv-address’).textContent = addr;
$(‘#rv-country’).textContent = c.name;
$(‘#rv-phone’).textContent = dSel.value + ‘ ‘ + $(‘#hfss-phone’).value + ‘ / courier: ‘ + $(‘#hfss-cphone’).value;
$(‘#rv-email’).textContent = $(‘#hfss-email’).value;
$(‘#rv-carrier’).textContent = (state.carrier === ‘dhl’ ? ‘DHL Express’ : state.carrier === ‘fedex’ ? ‘FedEx International Priority’ : ‘Own carrier account’) + ‘ \u00b7 ‘ + $(‘#hfss-sum-ship’).textContent;
$(‘#rv-notes’).textContent = $(‘#hfss-notes’).value || ‘\u2014’;
}

$(‘#hfss-edit’).addEventListener(‘click’, function () {
$(‘#hfss-review’).classList.remove(‘is-on’);
window.scrollTo({ top: root.querySelector(‘#hfss-name’).getBoundingClientRect().top + window.pageYOffset – 90, behavior: ‘smooth’ });
});
$(‘#hfss-pay’).addEventListener(‘click’, function () {
/* ⚠️ 换成你的 PayPal 收款链接;金额与商品名会由 PayPal 侧设置 */
var PAYPAL_LINK = ‘#PAYPAL_LINK’;
if (PAYPAL_LINK.indexOf(‘#’) === 0) {
window.alert(‘\u539f\u578b\u6f14\u793a\uff1a\u6b63\u5f0f\u7ad9\u8fd9\u91cc\u8df3\u8f6c PayPal \u6536\u6b3e\u94fe\u63a5\u3002\n\n\u8ba2\u5355\uff1a’ + state.sku + ‘ ‘ + state.item.n + ‘ ‘ + $(‘#hfss-sum-total’).textContent);
return;
}
location.href = PAYPAL_LINK;
});

country();
})();