/* SPIRO 雙藻錠 — checkout skin (green + gold). All rules are scoped under
   body.spiro-skin so the rest of the store's checkout is never touched. */

body.spiro-skin{
  --g-deep:#0c3a33; --g-accent:#0f7a54; --gold-l:#e6cd92; --gold-d:#c4a258; --gold-tx:#13322c;
  --ink:#14181b; --body:#45504b; --faint:#8a948f; --tint:#f2f7f4; --inp:#fbfdfc; --line:#e2eae5;
  --line-green:#06c755; --pagebg:#eef2ef;
  --sans:"Noto Sans TC",system-ui,sans-serif; --disp:"Space Grotesk","Noto Sans TC",sans-serif; --mono:"IBM Plex Mono",monospace;
  background:var(--pagebg);font-family:var(--sans);color:var(--body);
}
/* Chrome-free wrapper from page-spiro-checkout.php */
body.spiro-co .spiro-co-page{max-width:1080px;margin:0 auto;padding:0 16px 96px}
@media(min-width:900px){body.spiro-co .spiro-co-page{padding-bottom:48px}}
body.spiro-skin .spiro-co-hidden{display:none!important}

/* Top bar / eyebar / countdown */
.sp-co-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 4px}
.sp-co-wordmark{display:flex;align-items:center;gap:8px;color:var(--ink)}
.sp-co-logo{width:30px;height:30px;border-radius:8px;background:var(--g-deep);color:var(--gold-l);font-family:var(--disp);font-weight:700;display:grid;place-items:center}
.sp-co-wordmark b{font-family:var(--disp);font-size:15px;letter-spacing:.05em}
.sp-co-wordmark .sp-co-sub{font-size:10px;letter-spacing:.3em;color:var(--faint)}
.sp-co-secure{font-family:var(--mono);font-size:11px;color:var(--g-accent)}
.sp-co-eyebar{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--faint);text-align:center;padding:4px 0 12px}
.sp-co-cdbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:var(--g-deep);color:#fff;border-radius:10px;padding:9px 14px;font-size:12.5px;margin-bottom:16px}
.sp-co-cdbar b{color:var(--gold-l)}
.sp-co-clock{font-family:var(--disp);display:inline-flex;align-items:center;gap:2px}
.sp-co-clock b{background:rgba(255,255,255,.12);border-radius:5px;padding:2px 5px;font-size:13px}
.sp-co-clock i{font-style:normal;font-size:9px;color:#9fc0b4;margin:0 1px}

/* Grid */
.sp-co-grid{display:flex;flex-direction:column;gap:18px}
@media(min-width:900px){.sp-co-grid{display:grid;grid-template-columns:minmax(0,1fr) 374px;gap:34px;align-items:start}}

/* Section cards */
.sp-co-sec{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
/* Hide WooCommerce's own "帳單資訊"/"配送資料" sub-headings — our numbered
   section headers already label each block. */
body.spiro-skin .sp-co-contact h3,
body.spiro-skin .sp-co-shipaddr h3,
body.spiro-skin #customer_details .woocommerce-billing-fields > h3,
body.spiro-skin #ship-to-different-address{display:none}
.sp-co-h{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:900;color:var(--ink);margin-bottom:14px}
.sp-co-num{width:24px;height:24px;border-radius:50%;background:var(--g-deep);color:#fff;font-family:var(--disp);font-size:13px;display:grid;place-items:center}

/* Form fields */
body.spiro-skin .sp-co-main .form-row{margin:0 0 12px;padding:0;float:none;width:100%}
body.spiro-skin .sp-co-main label{display:block;font-size:12.5px;color:var(--ink);font-weight:500;margin-bottom:5px}
body.spiro-skin .sp-co-main label .required{color:#b5121b;border:0}
body.spiro-skin .sp-co-main input.input-text,
body.spiro-skin .sp-co-main select,
body.spiro-skin .sp-co-main .select2-container .select2-selection{
  width:100%;font-size:16px;border:1px solid #d8e0db;border-radius:9px;background:var(--inp);padding:12px 12px;color:var(--ink);line-height:1.4;min-height:46px}
body.spiro-skin .sp-co-main input.input-text:focus,
body.spiro-skin .sp-co-main select:focus{outline:none;border-color:var(--gold-d);background:#fff;box-shadow:0 0 0 3px rgba(196,162,88,.15)}
body.spiro-skin .sp-co-main .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px}
body.spiro-skin .sp-co-main .woocommerce-input-wrapper{width:100%}

/* Shipping method radio cards */
body.spiro-skin #shipping_method{list-style:none;margin:0;padding:0;display:grid;gap:10px}
body.spiro-skin #shipping_method li{position:relative;border:1.5px solid var(--line);border-radius:12px;padding:14px 14px 14px 42px;background:#fff}
body.spiro-skin #shipping_method li input[type=radio]{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:18px;height:18px;accent-color:var(--gold-d)}
body.spiro-skin #shipping_method li label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:700;color:var(--ink);font-size:14px;margin:0;cursor:pointer}
body.spiro-skin #shipping_method li .amount{color:var(--g-accent);font-weight:700}
body.spiro-skin #shipping_method li:has(input:checked){border-color:var(--gold-d);background:#fbf6ea;box-shadow:0 0 0 2px rgba(196,162,88,.18)}
/* The order-review table only carries the shipping methods + RY store picker in
   our skin; hide the product rows/totals (the brand rail shows those) and the
   貨件 row label, then flatten the th/td table layout so the method cards span
   the full section width (otherwise they cram into a ~136px <td> on desktop). */
body.spiro-skin #order_review .shop_table thead,
body.spiro-skin #order_review .shop_table .cart_item,
body.spiro-skin #order_review .shop_table tfoot .cart-subtotal,
body.spiro-skin #order_review .shop_table tfoot .order-total,
body.spiro-skin .woocommerce-shipping-totals.shipping th,
body.spiro-skin #order_review_heading{display:none}
body.spiro-skin #order_review .shop_table{border:0;background:transparent}
body.spiro-skin #order_review,
body.spiro-skin #order_review .shop_table,
body.spiro-skin #order_review .shop_table tbody,
body.spiro-skin #order_review .shop_table tfoot,
body.spiro-skin .woocommerce-shipping-totals.shipping,
body.spiro-skin .woocommerce-shipping-totals.shipping td{display:block;width:100%}
body.spiro-skin .woocommerce-shipping-totals.shipping td{padding:0}

/* Payment methods */
body.spiro-skin #payment{background:transparent}
body.spiro-skin #payment ul.payment_methods{list-style:none;margin:0;padding:0;border:0;display:grid;gap:10px}
body.spiro-skin #payment ul.payment_methods li{position:relative;border:1.5px solid var(--line);border-radius:12px;padding:14px 14px 14px 42px;background:#fff}
body.spiro-skin #payment ul.payment_methods li input[type=radio]{position:absolute;left:15px;top:18px;width:18px;height:18px;accent-color:var(--gold-d)}
body.spiro-skin #payment ul.payment_methods li label{font-weight:700;color:var(--ink);font-size:14px;margin:0}
body.spiro-skin #payment ul.payment_methods li:has(input:checked){border-color:var(--gold-d);background:#fbf6ea;box-shadow:0 0 0 2px rgba(196,162,88,.18)}
body.spiro-skin #payment .payment_box{background:var(--tint);border-radius:10px;margin-top:10px;font-size:12.5px;color:var(--body)}
body.spiro-skin #payment .payment_box::before{display:none}
/* The real place-order button is proxied by the rail/sticky CTA; keep it reachable but compact */
body.spiro-skin #payment .place-order{padding:14px 0 0}
body.spiro-skin #place_order{width:100%;background:linear-gradient(135deg,#e6cd92,#c4a258);color:var(--gold-tx);border:0;border-radius:11px;padding:15px;font-size:16px;font-weight:900;box-shadow:0 6px 18px rgba(150,112,40,.3);cursor:pointer}

/* Trust / warehouse / installment / policy */
.sp-co-trust{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;font-family:var(--mono);font-size:11px;color:var(--faint);padding:4px 0}
.sp-co-warehouse{background:var(--g-deep);color:#cfe0d8;border-radius:14px;padding:16px}
.sp-co-wh-head{font-weight:900;color:#fff;font-size:14px;margin-bottom:6px}
.sp-co-warehouse p{font-size:12.5px}.sp-co-warehouse b{color:var(--gold-l)}
.sp-co-install{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-align:center}
.sp-co-install-h{font-weight:900;color:var(--ink);font-size:14px}
.sp-co-install p{font-size:12px;color:var(--body);margin:6px 0 10px}
.sp-co-line-btn{display:inline-flex;align-items:center;gap:6px;background:var(--line-green);color:#fff;font-weight:800;padding:9px 22px;border-radius:9px;font-size:13px}
.sp-co-policy{font-size:11px;color:var(--faint);line-height:1.7;padding:0 4px}

/* Summary rail */
.sp-co-rail{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sp-co-rail-toggle{display:none}
.sp-co-rail-body{padding:18px}
.sp-co-eye{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--faint);margin-bottom:12px}
.sp-co-line{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sp-co-thumb{position:relative;flex:0 0 56px}
.sp-co-thumb img{width:56px;height:56px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.sp-co-qty{position:absolute;top:-7px;right:-7px;background:var(--g-deep);color:#fff;font-size:10px;font-weight:700;border-radius:10px;padding:1px 6px}
.sp-co-line-name{font-weight:900;color:var(--ink);font-size:14px}
.sp-co-line-sub{font-size:11.5px;color:var(--faint)}
.sp-co-bonus{padding:12px 0;border-bottom:1px solid var(--line)}
.sp-co-bonus-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--g-accent);margin-bottom:7px}
.sp-co-bonus-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);padding:3px 0}
.sp-co-bonus-row .ck{color:var(--g-accent);font-weight:900}
.sp-co-bonus-row .nm{flex:1}
.sp-co-bonus-row .free{color:var(--g-accent);font-weight:700;font-size:11px}
.sp-co-totline{display:flex;justify-content:space-between;font-size:13px;color:var(--body);padding:5px 0}
.sp-co-totline.sp-co-save span:last-child{color:var(--g-accent);font-weight:700}
.sp-co-free{color:var(--g-accent);font-weight:700}
.sp-co-grand{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:6px;padding-top:10px;font-weight:900;color:var(--ink);font-size:15px}
.sp-co-grand b{font-family:var(--disp);font-size:24px;color:var(--g-accent)}
.sp-co-grand-note{text-align:right;font-size:10.5px;color:var(--faint);margin-bottom:12px}
.sp-co-railcta{width:100%;background:linear-gradient(135deg,#e6cd92,#c4a258);color:var(--gold-tx);border:0;border-radius:11px;padding:15px;font-size:16px;font-weight:900;box-shadow:0 6px 18px rgba(150,112,40,.3);cursor:pointer}
.sp-co-cd-mini{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;color:var(--body);margin-top:10px}
.sp-co-clock-mini{font-family:var(--disp);font-weight:700;color:var(--g-accent)}
.sp-co-ssl{text-align:center;font-size:11px;color:var(--faint);margin-top:8px}

/* Mobile collapsible rail */
@media(max-width:899px){
  .sp-co-rail-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;border:0;background:#fff;padding:14px 16px;font-weight:700;color:var(--ink);cursor:pointer}
  .sp-co-rail-total{font-family:var(--disp);color:var(--g-accent)}
  .sp-co-rail-body{display:none;border-top:1px solid var(--line)}
  .sp-co-rail.open .sp-co-rail-body{display:block}
  .sp-co-rail.open .sp-co-caret{transform:rotate(180deg)}
  .sp-co-railcta{display:none} /* sticky bar carries the CTA on mobile */
}

/* Sticky mobile pay bar */
.sp-co-paybar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.sp-co-paybar-cd{font-size:10.5px;color:var(--body);line-height:1.3;min-width:88px}
.sp-co-clock-mini b{color:var(--g-accent)}
.sp-co-paybar-cta{flex:1;background:linear-gradient(135deg,#e6cd92,#c4a258);color:var(--gold-tx);border:0;border-radius:10px;padding:13px;font-size:14.5px;font-weight:900;box-shadow:0 4px 14px rgba(150,112,40,.3);cursor:pointer}
@media(min-width:900px){.sp-co-paybar{display:none}}

/* Hide the Chaty floating widget on the funnel checkout / thank-you */
body.spiro-co [id^="chaty"],body.spiro-co .chaty-widget,body.spiro-co div[class*="chaty"],
body.spiro-skin [id^="chaty"],body.spiro-skin .chaty-widget,body.spiro-skin div[class*="chaty"]{display:none!important}

/* ============ Round: checkout refinements ============ */

/* 8. Wordmark like the sales page (no S logo box) */
.sp-co-wm{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:.04em;color:var(--ink);white-space:nowrap}
.sp-co-wm em{font-style:normal;font-family:var(--sans);font-weight:900;color:var(--g-accent)}

/* 2. Remove the "建立帳號" create-account option on the funnel checkout */
body.spiro-skin .woocommerce-account-fields,
body.spiro-skin .create-account{display:none!important}

/* 3. Mobile order: summary on top, then the form, then reviews at the bottom.
   display:contents lets the rail + reviews (both inside .sp-co-aside) be ordered
   independently as direct flex children of .sp-co-grid. */
@media(max-width:899px){body.spiro-skin .sp-co-aside{display:contents}body.spiro-skin .sp-co-rail{order:-1}body.spiro-skin .sp-co-main{order:0}body.spiro-skin .sp-co-reviews{order:1}}

/* 4. Bottom sticky bar = live countdown only (CTA removed) */
body.spiro-skin .sp-co-paybar-cdonly{background:var(--g-deep);color:#fff;justify-content:center;flex-wrap:wrap;gap:8px 12px;font-size:12.5px;padding:11px 14px}
body.spiro-skin .sp-co-paybar-cdonly b{color:var(--gold-l)}

/* 5. Warehouse / fulfilment block */
.sp-co-wh-banner{margin:-16px -16px 12px;line-height:0;border-radius:14px 14px 0 0;overflow:hidden}
.sp-co-wh-banner img,.sp-co-wh-banner svg{width:100%;height:170px;object-fit:cover;object-position:center;display:block}
.sp-co-wh-badges{display:grid;gap:9px;margin:12px 0 2px}
@media(min-width:520px){.sp-co-wh-badges{grid-template-columns:repeat(3,1fr)}}
.sp-co-wh-badge{display:flex;align-items:flex-start;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(230,205,146,.20);border-radius:11px;padding:11px 12px}
.sp-co-wh-badge .ic{font-size:18px;line-height:1.1}
.sp-co-wh-badge b{display:block;color:#fff;font-size:13px;margin-bottom:2px}
.sp-co-wh-badge span{font-size:11.5px;color:#bcd4ca;line-height:1.5}
.sp-co-flow{margin-top:14px;border-top:1px solid rgba(255,255,255,.12);padding-top:13px}
.sp-co-flow-h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--gold-l);margin-bottom:11px}
.sp-co-flow ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.sp-co-flow li{display:flex;align-items:center;gap:11px;font-size:12.5px;color:#e7f0eb}
.sp-co-flow .n{flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:var(--gold-d);color:var(--gold-tx);font-family:var(--disp);font-weight:700;font-size:12px;display:grid;place-items:center}

/* 6. Carrier logo badges beside each shipping method (萊爾富 removed server-side) */
body.spiro-skin #shipping_method li label{justify-content:flex-start;gap:10px}
body.spiro-skin #shipping_method li label .amount{margin-left:auto}
body.spiro-skin #shipping_method li label::before{content:"";flex:0 0 auto;width:42px;height:34px;background-size:contain;background-position:center;background-repeat:no-repeat}
body.spiro-skin #shipping_method li:has(input[value^="ry_ecpay_shipping_cvs_711"]) label::before{background-image:url(../img/cvs-711-logo.png)}
body.spiro-skin #shipping_method li:has(input[value^="ry_ecpay_shipping_cvs_family"]) label::before{background-image:url(../img/cvs-family-logo.png)}
body.spiro-skin #shipping_method li:has(input[value^="ry_ecpay_shipping_home_post"]) label::before{background-image:url(../img/home-truck.svg)}

/* 7. RY 超商門市 store picker — brand styling */
body.spiro-skin .ry-ecpay-cvs-info,body.spiro-skin .ry-cvs-info{margin-top:12px}
body.spiro-skin a.ry-choose-cvs,body.spiro-skin .ry-choose-cvs{display:inline-flex;align-items:center;gap:7px;background:var(--g-deep);color:#fff;border:0;border-radius:10px;padding:12px 20px;font-weight:700;font-size:13.5px;line-height:1;cursor:pointer;text-decoration:none;box-shadow:0 4px 12px rgba(12,58,51,.18);margin-top:10px}
body.spiro-skin a.ry-choose-cvs::before{content:"📍"}
body.spiro-skin a.ry-choose-cvs:hover{background:#0a322c}
body.spiro-skin .ry-cvs-store-info{background:var(--tint);border:1px solid var(--line);border-radius:11px;padding:13px 14px;margin-top:10px;font-size:12.5px;color:var(--ink);line-height:1.8}
body.spiro-skin .ry-cvs-store-info .store-name{font-weight:700;color:var(--g-accent)}

/* ===== Round: 配送方式 box + circle + CVS button ===== */

/* 5. Remove the nested white box (#order_review carried a 5.6px border + padding) */
body.spiro-skin .sp-co-shipmethod #order_review,
body.spiro-skin .sp-co-shipmethod .woocommerce-checkout-review-order{border:0!important;background:transparent!important;padding:0!important;margin:0!important}
/* Flatten every remaining tfoot row (shipping + CVS picker) to full width */
body.spiro-skin #order_review tfoot tr,
body.spiro-skin #order_review tfoot td{display:block;width:100%;border:0!important;padding:0!important}
body.spiro-skin #order_review tfoot th{display:none!important}

/* 4. Drop the radio circle on the method cards — selection shown by the card itself */
body.spiro-skin #shipping_method li{padding:14px 16px}
body.spiro-skin #shipping_method li input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
body.spiro-skin #shipping_method li{position:relative}
body.spiro-skin #shipping_method li:has(input:checked)::after{content:"✓";position:absolute;right:15px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:var(--gold-d);color:#fff;font-size:12px;font-weight:900;display:grid;place-items:center}

/* 6. 選擇超商門市 — bigger, full-width, centred */
body.spiro-skin a.ry-choose-cvs,
body.spiro-skin button.ry-choose-cvs{display:flex;width:100%;justify-content:center;align-items:center;gap:7px;padding:15px 24px;font-size:15px;font-weight:800;border-radius:11px;margin-top:14px}

/* 4b. Hide the theme's leftover custom radio dot (label::after) on method cards */
body.spiro-skin #shipping_method li label::after{display:none!important}

/* ===== Round: float fix + mobile summary + select2 district ===== */

/* 3. #order_review carries WC's default float:right, so the 配送方式 section card
   only wrapped its heading and the method cards/button spilled out below it.
   Unfloat so the section contains them and spacing to 付款方式 is correct. */
body.spiro-skin .sp-co-shipmethod #order_review{float:none!important;width:100%!important}

/* 4. Order summary was a collapsed toggle on mobile and easy to miss — show it
   expanded at the top (the rail is already moved above the form under 900px). */
@media(max-width:899px){
  body.spiro-skin .sp-co-rail-toggle{display:none}
  body.spiro-skin .sp-co-rail-body{display:block}
}

/* 5. 鄉鎮市 is a select2 dropdown (grey text, 8px pad) while 縣/市 is a native
   select; match the select2 to the native input so they look identical. */
body.spiro-skin .sp-co-main .select2-container--default .select2-selection--single{height:46px!important;border:1px solid #d8e0db!important;border-radius:9px;background:var(--inp)}
body.spiro-skin .sp-co-main .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--ink)!important;line-height:44px!important;padding-left:12px!important;padding-right:26px}
body.spiro-skin .sp-co-main .select2-container--default .select2-selection--single .select2-selection__arrow{height:44px!important;right:8px}

/* ===== Round: select centering (mobile) + larger fonts ===== */

/* 6. Vertically centre the 縣/市 (native) + 鄉鎮市 (select2) values on every
   viewport — min-height let the single line sit high on mobile; use a fixed
   height + matched line-height instead. */
body.spiro-skin .sp-co-main select{height:48px;min-height:48px;padding-top:0;padding-bottom:0;line-height:46px}
body.spiro-skin .sp-co-main .select2-container--default .select2-selection--single{height:48px!important;display:flex;align-items:center}
body.spiro-skin .sp-co-main .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:normal!important;width:100%}
body.spiro-skin .sp-co-main .select2-container--default .select2-selection--single .select2-selection__arrow{height:46px!important}

/* 4. Bump font sizes a notch for readability (no layout-breaking changes). */
body.spiro-skin .sp-co-main label{font-size:13.5px}
body.spiro-skin #shipping_method li label{font-size:15px}
body.spiro-skin #payment ul.payment_methods li label{font-size:15px}

/* 7. Customer reviews — right column under the rail (≥900px); bottom of the stack
   on mobile. Brand-matched: green header, white cards, gold stars, verified badge. */
.sp-co-reviews{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.sp-co-rev-head{display:flex;align-items:center;gap:7px;background:var(--g-deep);color:#fff;border-radius:12px;padding:11px 15px;font-size:13px}
.sp-co-rev-head b{font-family:var(--disp);font-size:15px;color:#fff}
.sp-co-rev-head .sp-co-rev-stars{color:var(--gold-l);font-size:13px;letter-spacing:1px}
.sp-co-rev-head .sp-co-rev-meta{color:#9fc0b4;font-size:12px}
.sp-co-rev-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.sp-co-rev-card .sp-co-rev-stars{color:var(--gold-d);font-size:12.5px;letter-spacing:1.5px}
.sp-co-rev-text{font-size:13.5px;color:var(--body);line-height:1.8;margin:7px 0 10px}
.sp-co-rev-who{display:flex;align-items:center;gap:8px}
.sp-co-rev-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)}
.sp-co-rev-av-i{display:flex;align-items:center;justify-content:center;background:#0f463d;color:var(--gold-l);font-size:13px;font-weight:700;border:0}
.sp-co-rev-name{font-size:13px;color:var(--ink);font-weight:500}
.sp-co-rev-vf{font-size:11px;color:var(--g-accent);font-weight:500}
body.spiro-skin #payment .payment_box{font-size:13.5px}
body.spiro-skin .sp-co-trust{font-size:12px}
body.spiro-skin .sp-co-policy{font-size:12px}
body.spiro-skin .sp-co-warehouse p{font-size:13.5px}
body.spiro-skin .sp-co-wh-badge span{font-size:12.5px}
body.spiro-skin .sp-co-flow li{font-size:13.5px}
body.spiro-skin .sp-co-line-name{font-size:15px}
body.spiro-skin .sp-co-bonus-row{font-size:13.5px}
body.spiro-skin .sp-co-totline{font-size:14px}

/* ============================================================================
 * 虎奶菇養氣飲 (TMK) — Fresh Wellness reskin of the SHARED checkout. All layout
 * comes from body.spiro-skin above; this only remaps the palette tokens (higher
 * specificity via the .gofit-line-tmk compound so it always wins) plus the few
 * hardcoded gold/green accents that don't flow through a token.
 * Ink #30351d · Primary olive · Amber accent #e3a52c. AA-safe: --g-accent
 * (#5f7522, 5.2:1) carries text on white; the bright Primary is decorative only.
 * Added 2026-07-04.
 * ========================================================================== */
body.spiro-skin.gofit-line-tmk{
  --g-deep:#30351d; --g-accent:#5f7522; --gold-l:#f2c368; --gold-d:#e3a52c; --gold-tx:#30351d;
  --ink:#30351d; --body:#4b5340; --faint:#636b53; --tint:#f3f6e9; --inp:#fcfdf8; --line:#e3e9d4;
  --line-green:#06c755; --pagebg:#eef1e6;
}
/* Hardcoded gold → amber (the three CTAs) + minor green accents that bypass tokens. */
body.spiro-skin.gofit-line-tmk #place_order,
body.spiro-skin.gofit-line-tmk .sp-co-railcta,
body.spiro-skin.gofit-line-tmk .sp-co-paybar-cta{background:linear-gradient(135deg,#f2c368,#e3a52c)}
body.spiro-skin.gofit-line-tmk #payment ul.payment_methods li:has(input:checked){background:#fbf4e4;box-shadow:0 0 0 2px rgba(227,165,44,.20)}
body.spiro-skin.gofit-line-tmk .sp-co-clock i,
body.spiro-skin.gofit-line-tmk .sp-co-rev-head .sp-co-rev-meta{color:#b9c69a}
body.spiro-skin.gofit-line-tmk .sp-co-warehouse{color:#dce7ca}
body.spiro-skin.gofit-line-tmk .sp-co-rev-av-i{background:#3b4223}

/* ============================================================================
 * SGLOW 亮密滑絲錠 — Aqua Clinical (水藍淨透) reskin of the SHARED checkout.
 * Same mechanism as TMK: token remap via the .gofit-line-sglow compound; the
 * checkout STRUCTURE is untouched — only colors change per the design handoff.
 * Primary #2E7D93 carries the CTAs (gold = detail only, never a CTA). AA:
 * primary on white = 4.7:1; white on primary CTA = 4.7:1. Updated 2026-07-08.
 * ========================================================================== */
body.spiro-skin.gofit-line-sglow{
  --g-deep:#16323B; --g-accent:#2E7D93; --gold-l:#E7D4A3; --gold-d:#C7A559; --gold-tx:#ffffff;
  --ink:#16323B; --body:#3B484C; --faint:#748287; --tint:#EAF4F8; --inp:#F7FAFB; --line:#E1E7E9;
  --line-green:#06c755; --pagebg:#F4F9FB;
}
/* CTAs -> primary aqua (design rule: gold is never a CTA). */
body.spiro-skin.gofit-line-sglow #place_order,
body.spiro-skin.gofit-line-sglow .sp-co-railcta,
body.spiro-skin.gofit-line-sglow .sp-co-paybar-cta{background:linear-gradient(135deg,#2E7D93,#286C80);box-shadow:0 6px 18px rgba(22,50,59,.28)}
/* Step-number circles: primary bg (their --gold-tx text is now white). */
body.spiro-skin.gofit-line-sglow .sp-co-flow .n{background:#2E7D93}
body.spiro-skin.gofit-line-sglow #payment ul.payment_methods li:has(input:checked){background:#EAF4F8;box-shadow:0 0 0 2px rgba(46,125,147,.2)}
body.spiro-skin.gofit-line-sglow .sp-co-clock i,
body.spiro-skin.gofit-line-sglow .sp-co-rev-head .sp-co-rev-meta{color:#AFD5E3}
body.spiro-skin.gofit-line-sglow .sp-co-warehouse{color:#D6EAF1}
body.spiro-skin.gofit-line-sglow .sp-co-rev-av-i{background:#1B4653}