:root{
  --ink:#141110; --ink-2:#1E1A18;
  --paper:#FFFDFB; --paper-2:#F8F2EB; --paper-3:#F0E7DC;
  --line:rgba(20,17,16,.10); --line-dark:rgba(255,255,255,.13);
  --coral:#FF4B2B; --coral-deep:#E23612; --sun:#FFC93C; --mint:#6FD3B8; --violet:#6C5CE7;
  --muted:#7A726C; --muted-dark:#A79E97;
  --radius:14px; --radius-lg:22px; --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.display{font-family:'Archivo Black','Arial Black',Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:56px;padding:0 30px;border-radius:999px;
  font-size:13.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s;white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-coral{background:var(--coral);color:#fff}
.btn-coral:hover{background:var(--ink)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--coral)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-sm{height:46px;padding:0 22px;font-size:12px}
.btn-block{width:100%}

/* ---------- header ---------- */
.head{position:sticky;top:0;z-index:80;border-bottom:1px solid var(--line);background:rgba(255,253,251,.92);backdrop-filter:blur(12px)}
.head .row{display:flex;align-items:center;gap:18px;height:68px}
.logo{font-family:'Archivo Black',sans-serif;font-size:20px;text-transform:uppercase;display:flex;align-items:center;gap:9px}
.logo .mark{width:25px;height:25px;border-radius:50%;background:var(--coral);display:grid;place-items:center;flex:none}
.head .back{margin-left:auto;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.head .back:hover{color:var(--ink)}
.head .cart{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);position:relative}
.cart-dot{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--coral);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 5px}
/* 空购物车不显示徽标（WooCommerce 默认行为） */
.cart-dot:empty{display:none}

/* ---------- page hero ---------- */
.phero{background:var(--ink);color:#fff;padding:48px 0 44px;position:relative;overflow:hidden}
.phero::after{content:'';position:absolute;top:-180px;right:-120px;width:540px;height:540px;border-radius:50%;background:radial-gradient(circle,rgba(255,75,43,.24),transparent 66%)}
.phero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
@media(max-width:900px){.phero .wrap{grid-template-columns:1fr;gap:24px}.phero{padding:34px 0 32px}}
.phero h1{font-size:clamp(32px,5.6vw,64px);margin:12px 0 16px;color:#fff}
.phero h1 em{font-style:normal;color:var(--coral);display:block}
.phero p{margin:0;color:var(--muted-dark);font-size:16px;max-width:480px}
.phero .pill{display:inline-flex;align-items:center;gap:9px;background:rgba(255,201,60,.12);border:1px solid rgba(255,201,60,.36);color:var(--sun);font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:7px 15px;border-radius:999px}
.phero .mini{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px}
.phero .mini div b{display:block;font-family:'Archivo Black',sans-serif;font-size:26px;line-height:1}
.phero .mini div span{display:block;font-size:11.5px;color:var(--muted-dark);margin-top:6px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}

/* ---------- configurator ---------- */
.cfg{padding:52px 0 60px}
/* 1fr 的全称是 minmax(auto,1fr)，那个 auto 下限 = 内容的 min-content。
   配置器面板与报价卡（.quote 里 38px 的实价大字）min-content 加起来超过手机宽度时，
   会把整列顶宽 → 页面横向溢出 120px → 连带把 position:fixed 的 WA 气泡推出屏幕。
   必须写 minmax(0,1fr) 显式解除下限，并给子项 min-width:0。 */
.cfg .grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:34px;align-items:start}
.cfg .grid>*{min-width:0}
@media(max-width:1000px){.cfg .grid{grid-template-columns:minmax(0,1fr);gap:26px}}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px}
@media(max-width:620px){.panel{padding:20px 18px}}
.step{border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:26px}
.step:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
.step h3{display:flex;align-items:center;gap:12px;margin:0 0 6px;font-size:15.5px;font-weight:800}
.step h3 i{
  width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;flex:none;
  display:grid;place-items:center;font-family:'Archivo Black',sans-serif;font-size:11px;font-style:normal;
}
.step h3 .opt{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.step .hint{margin:0 0 16px;font-size:13px;color:var(--muted);padding-left:38px}
@media(max-width:620px){.step .hint{padding-left:0}}

/* dropzone */
.drop{
  border:2px dashed var(--paper-3);border-radius:var(--radius);padding:30px 20px;text-align:center;
  cursor:pointer;transition:border-color .25s,background .25s;
}
.drop:hover{border-color:var(--coral);background:#FFFAF8}
.drop.has{border-style:solid;border-color:var(--mint);background:#F3FBF8}
.drop .ic{
  width:48px;height:48px;border-radius:14px;background:var(--paper-2);margin:0 auto 14px;
  display:grid;place-items:center;
}
.drop b{display:block;font-size:14.5px;font-weight:800}
.drop small{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.drop .file{margin-top:12px;font-size:12.5px;font-weight:700;color:#1B8A4B}

/* pills */
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  min-height:52px;padding:9px 18px;border-radius:12px;border:1.6px solid var(--line);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;
  transition:border-color .2s,background .2s,transform .2s var(--ease);text-align:left;
}
.pill:hover{border-color:var(--ink)}
.pill b{font-size:14px;font-weight:800;line-height:1.2}
.pill small{font-size:11px;color:var(--muted);line-height:1.2}
.pill[aria-pressed="true"]{border-color:var(--coral);background:#FFF6F3;box-shadow:0 0 0 3px rgba(255,75,43,.10)}
.pill[aria-pressed="true"] small{color:var(--coral-deep)}
.pill.wide{flex:1 1 200px}

/* colors slider */
.slider-row{display:flex;align-items:center;gap:18px}
input[type=range]{
  -webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--sun),var(--coral));outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;
  border:3px solid var(--ink);cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.18);
}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--ink);cursor:pointer}
.colorval{
  font-family:'Archivo Black',sans-serif;font-size:24px;min-width:74px;text-align:center;
  background:var(--paper-2);border-radius:10px;padding:6px 10px;line-height:1;
}
.colorval small{display:block;font-family:'Inter',sans-serif;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:5px}
.swatchrow{display:flex;gap:6px;margin-top:14px;flex-wrap:wrap}
.swatchrow i{width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
textarea{
  width:100%;min-height:96px;border:1.6px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;font-family:inherit;font-size:14.5px;resize:vertical;outline:none;
  transition:border-color .2s;background:var(--paper);
}
textarea:focus{border-color:var(--coral)}

/* quote card */
.quote{position:sticky;top:88px;background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:28px;overflow:hidden}
.quote::after{content:'';position:absolute;top:-120px;right:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,75,43,.22),transparent 66%)}
.quote>*{position:relative;z-index:2}
.quote h3{margin:0 0 18px;font-size:16px;font-weight:800;letter-spacing:.02em}
.qrow{display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-size:13.5px;padding:9px 0;color:var(--muted-dark)}
.qrow b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.qdiv{height:1px;background:var(--line-dark);margin:12px 0}
.qtotal{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.qtotal span{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark);font-weight:800}
.qtotal strong{font-family:'Archivo Black',sans-serif;font-size:38px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.unitline{margin-top:6px;font-size:12.5px;color:var(--sun);font-weight:700}
.freebar{margin-top:18px;background:rgba(255,255,255,.07);border-radius:12px;padding:14px}
.freebar .lbl{font-size:12px;font-weight:700;display:flex;justify-content:space-between;gap:10px}
.freebar .tr{height:8px;border-radius:99px;background:rgba(255,255,255,.14);margin-top:10px;overflow:hidden}
.freebar .tr i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--sun),var(--coral));transition:width .4s var(--ease)}
.quote .btn{margin-top:18px}
.qtrust{margin-top:18px;display:flex;flex-direction:column;gap:11px}
.qtrust div{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;color:var(--muted-dark)}
.qtrust svg{flex:none;margin-top:2px}

/* ---------- process ---------- */
.process{background:var(--paper-2)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr);gap:24px}}
/* 让位高度 = .num 圆圈 44px + 间隙 12px；改动圆圈尺寸时必须同步改 padding-top，否则圆圈会压住标题 */
.stepcard{position:relative;padding-top:56px}
.stepcard .num{
  position:absolute;top:0;left:0;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-family:'Archivo Black',sans-serif;font-size:15px;
}
.stepcard:nth-child(2) .num{background:var(--coral)}
.stepcard:nth-child(3) .num{background:var(--sun);color:var(--ink)}
.stepcard:nth-child(4) .num{background:var(--mint);color:var(--ink)}
.stepcard h3{margin:0 0 9px;font-size:16.5px;font-weight:800}
.stepcard p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.68}

/* ---------- artwork guide ---------- */
.sec{padding:76px 0}
@media(max-width:620px){.sec{padding:52px 0}}
.sec-head{margin-bottom:36px}
.sec-head h2{font-size:clamp(26px,4.2vw,46px);margin:12px 0 0}
.sec-head p{color:var(--muted);margin:12px 0 0;font-size:15px;max-width:560px}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1000px){.guides{grid-template-columns:1fr}}
.guide{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px}
.guide .bar{height:6px;border-radius:99px;margin-bottom:20px}
.guide h3{margin:0 0 10px;font-size:16.5px;font-weight:800;display:flex;align-items:center;gap:10px}
.guide p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.68}
.guide ul{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.guide li{font-size:13px;color:var(--muted);display:flex;gap:9px}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{list-style:none;cursor:pointer;font-size:15.5px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;color:var(--muted);line-height:1}
.faq details[open] summary::after{content:'−'}
.faq p{margin:12px 0 0;color:var(--muted);font-size:14.5px}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#fff;padding:48px 0 30px}
.footer .top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer .logo{color:#fff}
.footer .links{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--muted-dark)}
.footer .links a:hover{color:#fff}
.footer .pay{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-dark);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.chip{height:30px;border-radius:6px;background:rgba(255,255,255,.09);display:grid;place-items:center;padding:0 11px;font-size:10.5px;font-weight:800;color:#fff;letter-spacing:.05em}
/* PayPal 徽标含两个子元素（Pay + Pal），不能继承 .chip 的 display:grid
   —— grid 会把每个子元素各放一行，导致 "Pay/Pal" 上下堆叠破版。改用 flex 单行排列。 */
.chip.pp{background:#fff;color:#003087;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;white-space:nowrap}
.footer .copyline{margin-top:20px;font-size:12px;color:#6B625C}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,140%);
  background:var(--ink);color:#fff;padding:15px 24px;border-radius:999px;font-size:13.5px;font-weight:700;
  box-shadow:0 18px 40px rgba(0,0,0,.3);transition:transform .4s var(--ease);z-index:200;
  display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);
}
.toast.show{transform:translate(-50%,0)}
.toast b{color:var(--sun)}
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,253,251,.96);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);padding:12px 16px;display:none;align-items:center;gap:12px;
}
.sticky-cta .p{font-size:12.5px;font-weight:800;line-height:1.2}
.sticky-cta .p small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.sticky-cta .btn{flex:1;height:50px}
/* ⚠ .quote 必须是定位元素（不能改回 static）：
   .quote::after 是 right:-120px 的装饰圆，靠 position:absolute 相对 .quote 定位，
   再由 .quote{overflow:hidden} 裁掉。一旦 .quote 变成 static，伪元素的包含块会跳到
   更外层祖先，装饰圆就按外层算，把文档宽度撑出 120px —— 连锁后果是
   position:fixed 的底部固定条与 WA 气泡一起被推出手机屏幕。
   单列布局下 sticky 无意义，用 relative 保住包含块即可。 */
@media(max-width:1000px){.sticky-cta{display:flex}body{padding-bottom:80px}.quote{position:relative}}
/* =========================================================
   WHATSAPP PRIVATE CHANNEL
   The quote card is the highest-intent moment on the whole
   site: the buyer already chose size, backing, quantity and
   colour count. Sending that exact config into WhatsApp turns
   a browser into a qualified lead in one tap.
   ========================================================= */
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1FB457;color:#fff}
.btn-ghost-line{background:transparent;border:1.5px solid rgba(255,255,255,.28);color:#fff}
.btn-ghost-line:hover{background:rgba(255,255,255,.1)}
.quote .btn + .btn{margin-top:10px}
.artwork-wa{
  margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 30px;
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.artwork-wa b{display:block;font-size:16.5px;font-weight:800;letter-spacing:-.01em}
.artwork-wa p{margin:8px 0 0;font-size:13.5px;color:var(--muted);max-width:560px;line-height:1.6}
.sticky-cta .sticky-btns{flex:1;display:flex;gap:10px}
.sticky-cta .sticky-btns .btn{flex:1}
.sticky-cta .sticky-btns .btn.btn-wa{flex:0 0 56px;width:56px;padding:0;display:grid;place-items:center}
/* floating widget */
.wa-fab{position:fixed;right:20px;bottom:20px;z-index:220;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.wa-bubble{
  width:min(324px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:16px 16px 18px;box-shadow:0 26px 60px rgba(20,17,16,.20),0 3px 10px rgba(20,17,16,.07);
  opacity:0;transform:translateY(14px) scale(.96);transform-origin:100% 100%;
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.9,.3,1.25);
  pointer-events:none;position:relative;
}
.wa-bubble.show{opacity:1;transform:none;pointer-events:auto}
.wa-x{position:absolute;top:8px;right:10px;width:26px;height:26px;border:0;background:transparent;color:#9A908A;
  font-size:20px;line-height:1;cursor:pointer;border-radius:50%;transition:background .2s,color .2s;font-family:inherit}
.wa-x:hover{background:rgba(20,17,16,.06);color:var(--ink)}
.wa-head{display:flex;align-items:center;gap:11px;padding-right:26px}
.wa-av{width:38px;height:38px;border-radius:50%;background:#25D366;display:grid;place-items:center;flex:none}
.wa-head b{display:block;font-size:13.5px;font-weight:800;color:var(--ink)}
.wa-head small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#6B625C;font-weight:600;margin-top:3px}
.wa-on{width:7px;height:7px;border-radius:50%;background:#25D366;flex:none;animation:waPulse 2.1s infinite}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.wa-msg{margin:13px 0 0;font-size:13px;line-height:1.56;color:#4A423E}
.wa-perk{margin-top:11px;background:#F2FBF5;border:1px dashed rgba(37,211,102,.5);border-radius:12px;padding:9px 11px;
  font-size:11.5px;line-height:1.5;color:#1E6B3F;font-weight:600}
.wa-perk b{font-weight:800}
.wa-cta{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:8px;height:47px;border-radius:12px;
  background:#25D366;color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  transition:background .22s,transform .22s}
.wa-cta:hover{background:#1FB457;transform:translateY(-1px)}
.wa-hours{margin:9px 0 0;text-align:center;font-size:10.5px;color:#9A908A;font-weight:600}
.wa-btn{width:60px;height:60px;border-radius:50%;border:0;background:#25D366;color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 14px 32px rgba(37,211,102,.42);position:relative;
  transition:transform .24s cubic-bezier(.2,.9,.3,1.4),box-shadow .24s}
.wa-btn:hover{transform:scale(1.07);box-shadow:0 18px 40px rgba(37,211,102,.5)}
.wa-btn .ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(37,211,102,.6);animation:waRing 2.6s infinite}
@keyframes waRing{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.55);opacity:0}}
.wa-btn .pip{position:absolute;top:1px;right:1px;width:14px;height:14px;border-radius:50%;background:var(--coral);border:2.5px solid #fff}
@media(max-width:1000px){.wa-fab{right:14px;bottom:88px}.wa-btn{width:54px;height:54px}}
@media(max-width:620px){.wa-bubble{width:calc(100vw - 68px)}.artwork-wa .btn{width:100%}}