/* PinkyDolly V2 · pd-v2-shipping (T16, SPEC-shipping-care.md)
 * Ported from handover/v2/pages/shipping/styles.css. .pg/.blk/.art/.note/.ul/
 * .body are this package's new shared "content page" classes (also used by
 * pd-v2-care.css) — confirmed zero collisions with any existing class in this
 * repo, defined bare (not id-scoped) same as .faq/.acct/.ct elsewhere.
 * .btn--3, .mailx/.copy and the Fraunces tokens are already global (pd-v2-
 * header.css, pd-v2-account-shared.css, pd-v2-base.css) — not redefined here.
 */

/* ══ 内容页通用(Shipping / Usage & care 共用)══ */
.pg{max-width:1180px;margin:0 auto;padding:calc(var(--navh) + clamp(36px,7vh,80px)) var(--gut) clamp(56px,10vh,110px)}
.pg__head{max-width:760px;margin-bottom:clamp(30px,5vh,48px)}
.pg__head .cap{color:var(--act2)} html[data-mode="dark"] .pg__head .cap{color:var(--main1)}
.pg h1{font-size:clamp(36px,5.2vw,60px);letter-spacing:-.022em;line-height:1.02;margin:0}
/* No max-width — see pd-v2-care.css's own copy of this rule for why. */
.pg__sub{margin:16px 0 0;font-size:17px;line-height:1.65;color:var(--tx-dim)}
.pg h2{font-size:clamp(26px,3vw,38px);letter-spacing:-.018em;line-height:1.08;margin:0 0 16px}
.pg .cap{display:block;margin-bottom:10px}
.blk{padding-top:clamp(40px,7vh,72px);margin-top:clamp(40px,7vh,72px);border-top:1px solid var(--line)}
.pg p{line-height:1.7}
/* 插画:侧色光晕衬底 */
.art{position:relative;display:grid;place-items:center;padding:clamp(14px,2vw,26px)}
.art::before{content:"";position:absolute;inset:6% 8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--glow),.42),rgba(var(--glow),.12) 62%,transparent)}
html[data-mode="light"] .art::before{background:radial-gradient(closest-side,rgba(var(--glow),.22),rgba(var(--glow),.06) 62%,transparent)}
.art img{position:relative;width:auto;max-width:min(330px,100%);max-height:var(--art-h,360px);filter:drop-shadow(0 10px 22px rgba(0,0,0,.35))}
.art--p{--glow:254,3,115}.art--d{--glow:197,39,243}
.art--pd::before{background:radial-gradient(closest-side at 35% 50%,rgba(254,3,115,.36),transparent 70%),radial-gradient(closest-side at 65% 50%,rgba(197,39,243,.36),transparent 70%)}
/* 提示框 */
.note{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:var(--r);font-size:15px;line-height:1.6;color:var(--tx)}
.note svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* 12px, not the prototype's 11.5px — this theme's hard floor for any text, labels included. */
.note b{display:block;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:2px}
.note--tip{background:color-mix(in srgb,var(--mint) 14%,transparent);box-shadow:inset 3px 0 0 var(--mint)}
.note--tip svg,.note--tip b{color:var(--mint)}
html[data-mode="light"] .note--tip{background:#E3F8F0;box-shadow:inset 3px 0 0 #1F8A66}
html[data-mode="light"] .note--tip svg,html[data-mode="light"] .note--tip b{color:#1F7A5C}
/* 柠檬黄警示配色,见 pd-v2-care.css 的同一条规则(两处保持一致)。 */
.note--warn{background:color-mix(in srgb,var(--lemon) 16%,transparent);box-shadow:inset 3px 0 0 var(--lemon)}
.note--warn svg,.note--warn b{color:var(--lemon)}
html[data-mode="light"] .note--warn{background:#FFF8D6;box-shadow:inset 3px 0 0 #8A6D00}
html[data-mode="light"] .note--warn svg,html[data-mode="light"] .note--warn b{color:#8A6D00}
.ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ul li{position:relative;padding-left:22px;font-size:16px;line-height:1.65;color:var(--tx-dim)}
.ul li::before{content:"";position:absolute;left:2px;top:.68em;width:7px;height:7px;border-radius:50%;background:var(--act)}
html[data-mode="dark"] .ul li::before{background:var(--main2)}
.ul b,.pg p b{color:var(--tx);font-weight:700}
.body{font-size:16px;color:var(--tx-dim)}
.body p{margin:0}.body p+p,.body p+.ul,.body .ul+p{margin-top:12px}
.fact__n small,.step__n small{font-variation-settings:normal}

/* ══ Shipping ══ */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.fact{padding:22px 20px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:6px;align-content:start}
.fact__n{font-family:var(--disp);font-size:clamp(38px,4vw,52px);line-height:1;letter-spacing:-.02em;color:var(--tx)}
.fact__n small{font-family:var(--ui);font-size:14px;font-weight:700;letter-spacing:0;margin-left:6px;color:var(--tx-dim)}
.fact__l{font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--act2)}
html[data-mode="dark"] .fact__l{color:var(--main1)}
.fact__d{font-size:14.5px;line-height:1.55;color:var(--tx-dim)}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}
.pack{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:center}
.pack__l{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:16px}
.pack__l li{display:flex;gap:14px;align-items:flex-start}
.pack__ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--raise);box-shadow:inset 0 0 0 1px var(--line)}
.pack__ic svg{width:20px;height:20px;max-width:none;fill:none;stroke:var(--tx);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pack__l b{display:block;font-size:16px;color:var(--tx);margin-bottom:2px}
.pack__l span{font-size:15px;line-height:1.6;color:var(--tx-dim)}
@media (max-width:820px){.pack{grid-template-columns:1fr}.pack .art{--art-h:300px}}
.tl{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:s}
.tl li{position:relative;padding:44px 22px 0 0}
.tl li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;font:800 13px/1 var(--ui);background:var(--act);color:#fff}
.tl li::after{content:"";position:absolute;left:38px;right:8px;top:15px;border-top:1.5px dashed var(--tx-faint)}
.tl li:last-child::after{display:none}
/* Text style, not the global h1-h4 Display default — always 18px, never 24px+, so
   per SPEC-typography.md rule 14 it's picked by role (small step title), not left on
   Display. Found via parity check (prototype: weight 600/opsz auto; live was inheriting
   the sitewide h1-h4 Display rule — 650/opsz 144). Letter-spacing also needs its own
   override: the global h1-h4 rule's -.025em is Display's own tight-heading tracking,
   but Text style at ≤30px takes +.02em instead (rule 14) — without this it kept the
   Display heading's negative tracking even after the font-variation-settings fix. */
.tl h3{font-family:var(--disp);font-variation-settings:var(--fr-text);font-optical-sizing:auto;font-weight:600;
  letter-spacing:.02em;font-size:18px;margin:0 0 8px;line-height:1.25}
.tl p{margin:0;font-size:15px;color:var(--tx-dim)}
.tl .chip{display:inline-block;margin-top:10px;padding:4px 10px;border-radius:var(--pill);background:var(--raise);font:700 12.5px/1.3 var(--ui);color:var(--tx)}
@media (max-width:860px){.tl{grid-template-columns:1fr;gap:22px}
  .tl li{padding:0 0 0 46px}.tl li::after{left:14px;right:auto;top:38px;bottom:-16px;border-top:0;border-left:1.5px dashed var(--tx-faint)}}
.trk{margin-top:22px;font-size:15.5px;color:var(--tx-dim)}

/* ══ 「包裹在哪」助手 —— 全页唯一用柠檬黄的地方 ══ */
.help{margin-top:clamp(40px,6vh,64px);border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),inset 0 3px 0 var(--lemon);padding:clamp(20px,3vw,32px)}
html[data-mode="light"] .help{box-shadow:inset 0 0 0 1px var(--line),inset 0 3px 0 #D8C400}
.help__hd{display:flex;gap:16px;align-items:center}
.help__q{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--lemon);color:#262026;
  font:800 22px/1 var(--ui)}
.help__hd h3{margin:0;font-size:clamp(22px,2.3vw,28px);line-height:1.1}
.help__hd p{margin:4px 0 0;font-size:15px;color:var(--tx-dim)}
.help__opts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
/* text-transform:none — theme.css has two competing bare button{} rules (one none, one
   uppercase); uppercase wins by source order, so this question text was shouting in
   sentence case. Found via parity check against the prototype (sentence case there). */
.help__opts button{padding:11px 16px;border-radius:var(--pill);border:1.5px solid var(--tx-faint);background:none;color:var(--tx);
  font:700 14.5px/1.3 var(--ui);text-transform:none;cursor:pointer;text-align:left;transition:border-color .2s,background .2s,color .2s}
.help__opts button:hover{border-color:var(--tx)}
.help__opts button[aria-checked="true"]{background:var(--lemon);border-color:var(--lemon);color:#262026}
.help__opts button:focus-visible{outline:2px solid var(--lemon);outline-offset:3px}
html[data-mode="light"] .help__opts button:focus-visible{outline-color:var(--act)}
.help__ans{margin-top:16px}
.ans{padding:16px 18px;border-radius:var(--r);background:var(--raise);font-size:15.5px;line-height:1.6;color:var(--tx-dim)}
.ans+.ans{margin-top:10px}
.ans b{display:block;color:var(--tx);font-size:16px;margin-bottom:4px}
.ans p{margin:0}.ans p+p{margin-top:8px}
.ans__cta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:14px}
/* 有 JS 时只显示选中的答案;没有 JS 时三条全显示(渐进增强) */
.js-help .ans{display:none}.js-help .ans.is-on{display:block;animation:ansIn .25s ease}
.js-help .help__ans:not(:has(.is-on))::before{content:"↑ Choose one above.";display:block;font-size:14px;color:var(--tx-dim);padding:4px 2px}
@keyframes ansIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js-help .ans.is-on{animation:none}}
.help__more{margin:18px 0 0;font-size:14.5px;color:var(--tx-dim)}
.help__more a{color:var(--tx);text-underline-offset:3px}
@media (max-width:620px){.help__opts{flex-direction:column}.help__opts button{width:100%}}

/* ══ Fraunces(SPEC-typography.md 两种样式,不是原型自己那套已废弃的覆盖块)══ */
.pg h1,span.fact__n,.blk.pack h2,.blk h2,.help__hd h3{font-family:var(--disp);font-variation-settings:var(--fr-display);font-weight:650}
.help__hd h3{letter-spacing:.02em}