/* PepTech checkout - the four-step form and its summary card.
   Every colour, radius and family is a token already defined by the design
   system in store.css; nothing new is invented here. Scoped under .pt-store so
   it cannot reach the rest of the site, and written specifically enough to beat
   Astra's form rules, which otherwise set their own heights and borders. */

/* --- the checkout runs edge to edge ------------------------------------------

   Astra pads its article by 20px a side. That padding is what stopped the
   checkout's background short of both edges, and on desktop it stacked with the
   wrapper's own gutter, so the form sat in a narrow column with a lot of white
   either side.

   It is removed here at its source rather than escaped. The 100vw full-bleed
   trick was the first attempt and it was wrong: this body carries
   overflow-x:hidden, and a negative left margin under that is clipped rather
   than scrolled to, so the band filled on the right and stopped short on the
   left. Nothing is pulled anywhere now, no viewport units, no negative margins,
   and nothing is hidden - so the two sides cannot disagree.

   !important, and not lightly: the 20px comes from a theme rule that does not
   appear in the matched cascade, so competing on specificity would be guesswork.
   The scope is the checkout page only, by body class. Vertical padding is
   untouched. */
.pt-store.woocommerce-checkout .ast-article-single,
.pt-store.woocommerce-checkout .entry-content{
	padding-left:0!important;padding-right:0!important;
}
.pt-store .pt-co{width:auto;max-width:none;margin-left:0;margin-right:0}

.pt-store .pt-co{
	background:var(--surface);
	padding:clamp(28px,4vw,56px) 0 clamp(56px,7vw,96px);
	min-height:60vh;
}
/* The band behind the checkout runs the full width of the page; this holds the
   content inside it. Wider than the old 1180px so the two columns have room,
   still capped so the form never stretches past a readable measure, and the
   gutter scales with the screen: 16px on a phone, up to 56px on a desktop. */
/* The band runs the full width of the page; this centres the content inside it.
   A grid with one capped track rather than max-width: max-width on this element
   was not being honoured on the live page - the padding from the same rule
   applied and the cap did not - and a single centred track does the same job
   with a property that demonstrably works here. The heading and the form both
   sit in that track, so they line up with each other. 1172px is the two columns
   plus their gap. */
.pt-store .pt-co-wrap{
	width:100%;padding:0 clamp(16px,4vw,56px);
	display:grid;grid-template-columns:minmax(0,1172px);justify-content:center;
}

/* ------------------------------------------------------------------- header */

.pt-store .pt-co-head{margin:0 0 clamp(22px,3vw,34px)}
.pt-store .pt-co-title{
	font-family:var(--font-display),system-ui,sans-serif;
	font-size:clamp(30px,4vw,42px);font-weight:700;letter-spacing:-.02em;
	color:var(--ink);margin:0 0 8px;
}
.pt-store .pt-co-secure{
	display:flex;align-items:center;gap:8px;
	font-size:13px;line-height:1.5;color:var(--muted);margin:0;
}
.pt-store .pt-co-lock{display:inline-flex;color:var(--verify);flex:0 0 auto}

/* --------------------------------------------------------------- the layout */

/* The form column is capped rather than left to grow with the screen: past
   about 760px a row of labelled fields stops being comfortable to read across.
   justify-content centres the pair of tracks in whatever space is left, so the
   gutters stay balanced at any width without a max-width on the wrapper. */
.pt-store .pt-co-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:clamp(20px,2.5vw,32px);align-items:start}
.pt-store .pt-co-main{display:flex;flex-direction:column;gap:14px;min-width:0}
.pt-store .pt-co-aside{position:sticky;top:24px;min-width:0}

@media (max-width:1024px){
	.pt-store .pt-co-grid{grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:880px){
	.pt-store .pt-co-grid{grid-template-columns:minmax(0,1fr)}
	.pt-store .pt-co-aside{position:static;order:-1}
}

/* ---------------------------------------------------------------- the steps */

.pt-store .pt-co-step{
	background:var(--surface);border:1px solid var(--line);border-radius:16px;
	overflow:hidden;transition:border-color .2s cubic-bezier(.4,0,.2,1),box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.pt-store .pt-co-step.is-open{border-color:var(--sky-400);box-shadow:0 10px 30px rgba(11,27,46,.07)}
.pt-store .pt-co-step-head{margin:0;font-size:inherit;font-weight:inherit}
.pt-store .pt-co-step-btn{
	display:flex;align-items:center;gap:14px;width:100%;
	padding:20px clamp(18px,2.4vw,28px);background:transparent;border:0;
	text-align:left;cursor:default;color:var(--ink);
}
.pt-store .pt-co-step.is-done .pt-co-step-btn{cursor:pointer}

.pt-store .pt-co-step-num{
	display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
	width:28px;height:28px;border-radius:999px;
	background:var(--sky-200);color:var(--deep-600);
	font-family:var(--font-mono),ui-monospace,monospace;font-size:13px;font-weight:700;
}
.pt-store .pt-co-step.is-open .pt-co-step-num{background:var(--accent);color:#fff}
.pt-store .pt-co-step.is-done .pt-co-step-num{background:var(--ok-bg);color:var(--ok-fg);font-size:0}
.pt-store .pt-co-step.is-done .pt-co-step-num::after{
	content:"";display:block;width:9px;height:5px;margin-top:-3px;
	border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
	transform:rotate(-45deg);
}

.pt-store .pt-co-step-name{
	font-family:var(--font-display),system-ui,sans-serif;
	font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink);flex:0 0 auto;
}
.pt-store .pt-co-step-recap{
	flex:1 1 auto;min-width:0;font-size:13px;color:var(--muted);
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.pt-store .pt-co-step.is-open .pt-co-step-recap{display:none}
.pt-store .pt-co-step-edit{
	flex:0 0 auto;font-size:13px;font-weight:600;color:var(--accent);opacity:0;
}
.pt-store .pt-co-step.is-done .pt-co-step-edit{opacity:1}

.pt-store .pt-co-step-body{
	padding:0 clamp(18px,2.4vw,28px) clamp(22px,2.6vw,28px);
	border-top:1px solid var(--line);margin-top:-1px;padding-top:24px;
}
.pt-store .pt-co-step:not(.is-open) .pt-co-step-body{display:none}

/* ---------------------------------------------------------------- the fields */

.pt-store .pt-co-fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 12px}
.pt-store .pt-co-f{grid-column:span 6;margin:0;padding:0;float:none;width:auto}
.pt-store .pt-co-f-half{grid-column:span 3}
.pt-store .pt-co-f-third{grid-column:span 2}
@media (max-width:560px){
	.pt-store .pt-co-f-half,.pt-store .pt-co-f-third{grid-column:span 6}
}

.pt-store .pt-co-f label,.pt-store .pt-co-label{
	display:block;font-size:12.5px;font-weight:600;letter-spacing:.01em;
	color:var(--ink-soft);margin:0 0 6px;
}
.pt-store .pt-co-f .required{color:var(--alert);text-decoration:none;border:0}
.pt-store .pt-co-f .optional{color:var(--muted);font-weight:500}

.pt-store .pt-co-f input[type=text],
.pt-store .pt-co-f input[type=email],
.pt-store .pt-co-f input[type=tel],
.pt-store .pt-co-f input[type=number],
.pt-store .pt-co-f textarea,
.pt-store .pt-co-f select,
.pt-store .pt-co-f .select2-container .select2-selection--single{
	width:100%;height:48px;padding:0 14px;
	background:var(--surface);border:1px solid var(--line);border-radius:10px;
	font-family:var(--font-body),system-ui,sans-serif;font-size:15px;color:var(--ink);
	box-shadow:none;transition:border-color .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.pt-store .pt-co-f textarea{height:auto;min-height:96px;padding:12px 14px;line-height:1.6}
.pt-store .pt-co-f input::placeholder{color:#9AA8B8}
.pt-store .pt-co-f input:focus,
.pt-store .pt-co-f textarea:focus,
.pt-store .pt-co-f select:focus{
	outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);
}
.pt-store .pt-co-f.woocommerce-invalid input,
.pt-store .pt-co-f.woocommerce-invalid select{border-color:var(--alert)}

/* select2, which WooCommerce uses for the state field */
.pt-store .pt-co-f .select2-container .select2-selection--single{display:flex;align-items:center}
.pt-store .pt-co-f .select2-container--default .select2-selection--single .select2-selection__rendered{
	line-height:normal;padding:0;color:var(--ink);
}
.pt-store .pt-co-f .select2-container--default .select2-selection--single .select2-selection__arrow{height:46px;right:8px}

.pt-store .pt-co-sub{
	font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
	color:var(--muted);margin:24px 0 12px;
}
.pt-store .pt-co-billing[hidden]{display:none}

/* ------------------------------------------------------------- check boxes */

.pt-store .pt-co-check{
	display:flex;align-items:flex-start;gap:11px;margin:16px 0 0;cursor:pointer;
	font-size:14px;line-height:1.55;color:var(--ink-soft);
}
.pt-store .pt-co-check input{position:absolute;opacity:0;width:0;height:0}
.pt-store .pt-co-check-box{
	flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:6px;
	border:1.5px solid var(--line);background:var(--surface);
	transition:background .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1);
	position:relative;
}
.pt-store .pt-co-check input:checked+.pt-co-check-box{background:var(--accent);border-color:var(--accent)}
.pt-store .pt-co-check input:checked+.pt-co-check-box::after{
	content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;
	border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.pt-store .pt-co-check input:focus-visible+.pt-co-check-box{box-shadow:0 0 0 3px var(--accent-glow)}
.pt-store .pt-co-check-quiet .pt-co-check-text{color:var(--muted);font-size:13.5px}
.pt-store .pt-co-check-ack{
	align-items:flex-start;padding:14px 16px;margin:0 0 12px;
	background:var(--sky-100);border:1px solid var(--sky-200);border-radius:12px;font-size:13.5px;
}
.pt-store .pt-co-check-ack.is-missing{border-color:var(--alert);background:#FFF4F3}

/* --------------------------------------------------------------- delivery */

.pt-store .pt-co-delivery{display:flex;flex-direction:column;gap:10px}
.pt-store .pt-co-ship{
	display:flex;align-items:center;gap:13px;padding:16px 18px;cursor:pointer;
	background:var(--surface);border:1px solid var(--line);border-radius:12px;
	transition:border-color .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1);
}
.pt-store .pt-co-ship:hover{border-color:var(--sky-400)}
.pt-store .pt-co-ship input{position:absolute;opacity:0;width:0;height:0}
.pt-store .pt-co-ship-mark{
	flex:0 0 auto;width:20px;height:20px;border-radius:999px;
	border:1.5px solid var(--line);background:var(--surface);position:relative;
}
.pt-store .pt-co-ship input:checked+.pt-co-ship-mark{border-color:var(--accent);border-width:6px}
.pt-store .pt-co-ship input:focus-visible+.pt-co-ship-mark{box-shadow:0 0 0 3px var(--accent-glow)}
.pt-store .pt-co-ship:has(input:checked){border-color:var(--accent);background:var(--sky-100)}
.pt-store .pt-co-ship-body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.pt-store .pt-co-ship-name{font-size:14.5px;font-weight:600;color:var(--ink)}
.pt-store .pt-co-ship-eta{font-size:12.5px;color:var(--muted)}
.pt-store .pt-co-ship-cost{
	flex:0 0 auto;font-family:var(--font-mono),ui-monospace,monospace;
	font-size:14px;font-weight:700;color:var(--ink);
}
.pt-store .pt-co-free{color:var(--ok-fg);font-weight:700}
.pt-store .pt-co-pending{color:var(--muted);font-weight:500;font-size:13px}

.pt-store .pt-co-fine{font-size:12.5px;line-height:1.6;color:var(--muted);margin:14px 0 0}
.pt-store .pt-co-note{
	font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0;
	padding:14px 16px;background:var(--sky-100);border-radius:12px;
}

/* ---------------------------------------------------------------- payment */

.pt-store .pt-co-payment ul.payment_methods{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;border:0}
.pt-store .pt-co-payment ul.payment_methods li{
	background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0;
}
.pt-store .pt-co-payment ul.payment_methods li.pt-co-nopay{background:var(--sky-100);border-color:var(--sky-200)}
.pt-store .pt-co-payment ul.payment_methods label{
	font-size:14.5px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:10px;margin:0;
}
.pt-store .pt-co-payment .payment_box{
	margin:12px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
	background:transparent;font-size:13.5px;line-height:1.6;color:var(--muted);
}
.pt-store .pt-co-payment .payment_box::before{display:none}
.pt-store .pt-co-payment .woocommerce-info,
.pt-store .pt-co-payment .woocommerce-notice{
	background:transparent;border:0;padding:0;margin:0;
	font-size:13.5px;line-height:1.6;color:var(--ink-soft);
}
.pt-store .pt-co-payment .woocommerce-info::before{display:none}
.pt-store .pt-co-place{padding:0;margin:0}

/* ----------------------------------------------------------------- review */

.pt-store .pt-co-recap{
	display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
	background:var(--line);border:1px solid var(--line);border-radius:12px;
	overflow:hidden;margin:0 0 20px;
}
@media (max-width:640px){.pt-store .pt-co-recap{grid-template-columns:minmax(0,1fr)}}
.pt-store .pt-co-recap-cell{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--surface)}
.pt-store .pt-co-recap-k{
	font-family:var(--font-mono),ui-monospace,monospace;font-size:10.5px;font-weight:700;
	letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.pt-store .pt-co-recap-v{font-size:13.5px;line-height:1.5;color:var(--ink)}

.pt-store .pt-co-submit,
.pt-store .pt-co-form #place_order{
	display:inline-flex;align-items:center;justify-content:center;
	width:100%;height:56px;margin:18px 0 0;padding:0 32px;
	background:var(--accent);color:#fff;border:0;border-radius:8px;
	font-family:var(--font-body),system-ui,sans-serif;font-size:16px;font-weight:600;
	cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);
}
.pt-store .pt-co-submit:hover,.pt-store .pt-co-form #place_order:hover{
	background:var(--accent-deep);transform:translateY(-2px);box-shadow:0 10px 28px var(--accent-glow);color:#fff;
}
.pt-store .pt-co-submit[disabled]{opacity:.45;pointer-events:none;transform:none;box-shadow:none}

.pt-store .pt-co-next{
	display:inline-flex;align-items:center;justify-content:center;
	height:52px;margin:22px 0 0;padding:0 30px;
	background:var(--ink);color:#fff;border:0;border-radius:8px;
	font-family:var(--font-body),system-ui,sans-serif;font-size:15px;font-weight:600;
	cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);
}
.pt-store .pt-co-next:hover{background:var(--accent);box-shadow:0 8px 22px var(--accent-glow);color:#fff}

.pt-store .pt-co-form .woocommerce-terms-and-conditions-wrapper{margin:0 0 4px}
.pt-store .pt-co-form .woocommerce-privacy-policy-text p{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0 0 12px}
.pt-store .pt-co-form .woocommerce-form__label-for-checkbox{
	display:flex;align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.55;color:var(--ink-soft);
}
.pt-store .pt-co-form .woocommerce-form__label-for-checkbox input{margin:2px 0 0;width:18px;height:18px;accent-color:var(--accent)}

/* --------------------------------------------------------- summary card */

.pt-store .pt-co-summary-shell{
	background:var(--surface);border:1px solid var(--line);border-radius:16px;
	padding:clamp(18px,2.2vw,24px);box-shadow:0 10px 30px rgba(11,27,46,.05);
}
.pt-store .pt-co-aside-title{
	font-family:var(--font-display),system-ui,sans-serif;
	font-size:16px;font-weight:600;color:var(--ink);margin:0 0 16px;
}
.pt-store .pt-co-lines{list-style:none;margin:0;padding:0}
/* a rule between products, so three vials do not read as one block */
.pt-store .pt-co-line{
	display:flex;align-items:flex-start;gap:12px;margin:0;
	padding:14px 0;border-bottom:1px solid var(--line);
}
.pt-store .pt-co-line:first-child{padding-top:0}
.pt-store .pt-co-line:last-child{padding-bottom:0;border-bottom:0}
.pt-store .pt-co-line-media{position:relative;flex:0 0 auto;width:56px}
.pt-store .pt-co-line-media img{
	width:56px;height:56px;object-fit:cover;border-radius:10px;
	border:1px solid var(--line);background:var(--sky-100);
}
.pt-store .pt-co-line-qty{
	position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;
	display:inline-flex;align-items:center;justify-content:center;padding:0 5px;
	border-radius:999px;background:var(--ink);color:#fff;
	font-family:var(--font-mono),ui-monospace,monospace;font-size:11px;font-weight:700;
}
.pt-store .pt-co-line-body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.pt-store .pt-co-line-name{font-size:14px;font-weight:600;line-height:1.35;color:var(--ink)}
.pt-store .pt-co-line-variant{font-size:12.5px;color:var(--muted)}
.pt-store .pt-co-line-total{
	flex:0 0 auto;font-family:var(--font-mono),ui-monospace,monospace;
	font-size:13.5px;font-weight:700;color:var(--ink);
}

.pt-store .pt-co-promo{display:flex;gap:8px;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line)}
/* tag name included so this outranks Astra's own input[type=text] rules */
.pt-store .pt-co-promo input.pt-co-promo-input{
	flex:1 1 auto;min-width:0;height:44px;padding:0 18px;
	border:1px solid var(--sky-200);border-radius:999px;
	background:linear-gradient(180deg,#F5FAFF 0%,var(--sky-100) 100%);
	font-family:var(--font-body),system-ui,sans-serif;font-size:14px;color:var(--ink);
	box-shadow:none;
	transition:border-color .18s cubic-bezier(.4,0,.2,1),box-shadow .18s cubic-bezier(.4,0,.2,1),background .18s cubic-bezier(.4,0,.2,1);
}
.pt-store .pt-co-promo input.pt-co-promo-input::placeholder{color:var(--on-dark-3)}
.pt-store .pt-co-promo input.pt-co-promo-input:focus{
	outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);
	background:linear-gradient(180deg,#FFFFFF 0%,#F5FAFF 100%);
}
.pt-store .pt-co-promo button.pt-co-promo-btn{
	flex:0 0 auto;height:44px;padding:0 22px;border:1px solid var(--ink);border-radius:999px;
	background:transparent;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;
	transition:all .2s cubic-bezier(.4,0,.2,1);
}
.pt-store .pt-co-promo button.pt-co-promo-btn:hover{background:var(--ink);color:#fff}
.pt-store .pt-co-promo button.pt-co-promo-btn[disabled]{opacity:.5;pointer-events:none}
.pt-store .pt-co-promo-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pt-store .pt-co-promo-tag{
	display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 11px;
	background:var(--ok-bg);color:var(--ok-fg);border-radius:999px;
	font-size:12px;font-weight:600;
}
.pt-store .pt-co-promo-x{
	border:0;background:transparent;color:inherit;cursor:pointer;
	font-size:16px;line-height:1;padding:0 2px;
}
.pt-store .pt-co-promo-msg{font-size:12.5px;line-height:1.5;color:var(--alert);margin:8px 0 0}

.pt-store .pt-co-totals{margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.pt-store .pt-co-total-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0}
.pt-store .pt-co-total-row dt{font-size:14px;color:var(--muted);margin:0}
.pt-store .pt-co-total-row dd{
	margin:0;font-family:var(--font-mono),ui-monospace,monospace;
	font-size:14px;font-weight:600;color:var(--ink);text-align:right;
}
.pt-store .pt-co-total-row.is-credit dd{color:var(--ok-fg)}
.pt-store .pt-co-total-row.is-grand{
	margin-top:6px;padding-top:14px;border-top:1px solid var(--line);align-items:center;
}
.pt-store .pt-co-total-row.is-grand dt{font-size:16px;font-weight:600;color:var(--ink)}
.pt-store .pt-co-total-row.is-grand dd{font-size:22px;font-weight:700;letter-spacing:-.01em}
.pt-store .pt-co-total-row .includes_tax{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}

/* --------------------------------------------------------------- notices */

.pt-store .pt-co-form .woocommerce-error,
.pt-store .pt-co .woocommerce-error,
.pt-store .pt-co .woocommerce-message,
.pt-store .pt-co .woocommerce-info,
.pt-store .pt-co .woocommerce-NoticeGroup{
	list-style:none;margin:0 0 16px;padding:14px 18px;border-radius:12px;
	font-size:14px;line-height:1.55;background:var(--sky-100);
	border:1px solid var(--sky-200);color:var(--ink-soft);
}
/* where WooCommerce's checkout script puts a rejected submission */
.pt-store .pt-co .woocommerce-NoticeGroup{padding:0;background:transparent;border:0}
.pt-store .pt-co .woocommerce-NoticeGroup .woocommerce-error{margin:0 0 16px}
.pt-store .pt-co .woocommerce-error{background:#FFF4F3;border-color:#F3C9C5;color:#8C2020}
.pt-store .pt-co .woocommerce-error li,.pt-store .pt-co .woocommerce-message li{margin:0;padding:0;list-style:none}
.pt-store .pt-co .woocommerce-error::before,
.pt-store .pt-co .woocommerce-message::before,
.pt-store .pt-co .woocommerce-info::before{display:none}

.pt-store .pt-co .blockUI.blockOverlay{background:var(--surface)!important;opacity:.6!important}

/* ------------------------------------------------------- the verification gate

   Step zero: the researcher sign-in and the six-digit code, drawn in the same
   shell as the four steps so it reads as the start of one checkout rather than
   a separate screen. Everything below is the gate's own; the layout, the
   fields, the summary card and the buttons are all shared with the form. */

.pt-store .pt-co-gate .pt-co-step-btn{cursor:default}


.pt-store .pt-co-step-locked{opacity:.45;background:var(--surface)}
.pt-store .pt-co-step-locked .pt-co-step-num{background:var(--sky-200);color:var(--deep-600)}
.pt-store .pt-co-step-locked .pt-co-step-body{display:none}

.pt-store .pt-co-flash{
	padding:14px 18px;border-radius:12px;font-size:14px;line-height:1.55;
	background:var(--sky-100);border:1px solid var(--sky-200);color:var(--ink-soft);margin:0;
}
.pt-store .pt-co-flash-bad{background:#FFF4F3;border-color:#F3C9C5;color:#8C2020}
.pt-store .pt-co-flash-good{background:var(--ok-bg);border-color:#B7E7C6;color:var(--ok-fg)}

.pt-store .pt-vf-lead{font-size:14.5px;line-height:1.65;color:var(--muted);margin:0 0 22px}
.pt-store .pt-vf-hint{display:block;font-size:12.5px;line-height:1.5;color:var(--muted);margin:6px 0 0}
.pt-store .pt-vf-go{width:100%}
/* the sign-in offer, carried in the step heading beside "Sign up" */
/* its own line: run inline it read as "Create an accountAlready a member?" */
.pt-store .pt-vf-orsign{
	display:block;margin:4px 0 0;
	font-family:var(--font-body),system-ui,sans-serif;
	font-size:14px;font-weight:400;letter-spacing:0;line-height:1.5;color:var(--muted);
}
.pt-store .pt-vf-orsign a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pt-store .pt-vf-orsign a:hover{color:var(--accent-deep)}
/* the heading can now wrap, so it stops being a single non-shrinking line */
.pt-store .pt-co-gate .pt-co-step-name{flex:1 1 auto;min-width:0}
.pt-store .pt-vf-fine{
	font-size:12px;line-height:1.6;color:var(--muted);
	margin:24px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
}

.pt-store .pt-vf-codefield{max-width:320px}
.pt-store .pt-co-gate .pt-vf-code{
	width:100%;height:60px;padding:0 16px;
	background:var(--surface);border:1px solid var(--line);border-radius:12px;
	font-family:var(--font-mono),ui-monospace,monospace;
	font-size:30px;font-weight:700;letter-spacing:.36em;text-align:center;color:var(--ink);
}
.pt-store .pt-co-gate .pt-vf-code:focus{
	outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);
}
.pt-store .pt-co-gate .pt-vf-code::placeholder{color:var(--sky-300);letter-spacing:.36em}

.pt-store .pt-vf-expiry{
	font-size:12.5px;color:var(--muted);margin:10px 0 0;
	font-family:var(--font-mono),ui-monospace,monospace;
}
.pt-store .pt-vf-more{display:flex;flex-wrap:wrap;gap:6px 22px;margin:18px 0 0}
.pt-store .pt-vf-more form{margin:0}
.pt-store .pt-vf-link{
	background:transparent;border:0;padding:0;cursor:pointer;
	font-family:var(--font-body),system-ui,sans-serif;font-size:13.5px;font-weight:600;
	color:var(--accent);text-decoration:underline;text-underline-offset:3px;
}
.pt-store .pt-vf-link:hover{color:var(--accent-deep)}
.pt-store .pt-vf-link[disabled]{color:var(--muted);cursor:default;text-decoration:none}


/* ------------------------------------------------------------------- mobile

   Two things only show up on a phone.

   The header is position:fixed and about 104px tall there, and the checkout
   opened underneath it - the word "Checkout" sat behind the logo. The section
   needs to start below the header rather than at the top of the document.

   And the gate's step heading is a row: a padlock, then the wording. At this
   width the wording wraps to two lines and the row reads as ragged, so on a
   phone the padlock sits above the text and the whole thing centres. */

@media (max-width: 880px) {
	.pt-store .pt-co { padding-top: 128px; }
}

@media (max-width: 640px) {
	.pt-store .pt-co-gate .pt-co-step-btn {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 12px;
	}
	.pt-store .pt-co-gate .pt-co-step-name,
	.pt-store .pt-co-gate .pt-vf-orsign { text-align: center; }
	.pt-store .pt-co-gate .pt-co-step-num { flex: 0 0 auto; }
}


/* On a phone the gate should open on the thing it is asking for. The page
   furniture - the word "Checkout" and the encryption line - pushed the sign-up
   card below the fold, and the order summary sat above it as well. Both still
   apply to the four-step form; here the account card leads. */
@media (max-width: 880px) {
	.pt-store .pt-co-gate .pt-co-head { display: none; }
	.pt-store .pt-co-gate { padding-top: 116px; }
	.pt-store .pt-co-gate .pt-co-grid { display: flex; flex-direction: column; align-items: stretch; }
	.pt-store .pt-co-gate .pt-co-main { order: 0; }
	.pt-store .pt-co-gate .pt-co-aside { order: 1; }
}

/* a brief ring so the cursor landing in the field is visible, not just implied */
.pt-store .pt-co-gate input.pt-co-flash-focus,
.pt-store input.pt-co-flash-focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-glow);
	transition: border-color .18s cubic-bezier(.4,0,.2,1), box-shadow .18s cubic-bezier(.4,0,.2,1);
}

/* --- the account cards -------------------------------------------------------
   Both forms are in the page; the state on the wrapper decides which shows.
   It is rendered server-side, so the correct card is right on first paint and
   the swap links still work with no JavaScript at all. */

.pt-store .pt-co-gate .pt-vf-h{display:none}
.pt-store .pt-co-gate[data-card="signup"] .pt-vf-h[data-card-head="signup"],
.pt-store .pt-co-gate[data-card="signin"] .pt-vf-h[data-card-head="signin"]{display:block}

.pt-store .pt-co-gate[data-card="signup"] form[data-card="signin"],
.pt-store .pt-co-gate[data-card="signin"] form[data-card="signup"]{display:none}

.pt-store .pt-vf-alt{font-size:13.5px;margin:14px 0 0;text-align:center}
.pt-store .pt-vf-alt a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pt-store .pt-vf-alt a:hover{color:var(--accent-deep)}


/* --- mobile, once the account exists -----------------------------------------

   The order summary used to sit above the form, which pushed the shipping
   fields - the thing actually being asked for - below the fold. It moves under
   the steps, so the page opens on the address with the finished account step
   just above it. And the gutter narrows: at 20px a side the cards read as a
   column floating in the middle rather than a page. */

@media (max-width: 880px) {
	/* align-items:start comes from the two-column rule, and in a column flex
	   container that stops the children stretching - they size to their content
	   instead. The account step's email is nowrap, so its content width became
	   the page width and the whole checkout overflowed to 496px on a 375px
	   screen. Stretch puts every card back on the viewport. */
	.pt-store .pt-co-grid{display:flex;flex-direction:column;align-items:stretch}
	.pt-store .pt-co-main,
	.pt-store .pt-co-aside{width:100%;min-width:0}
	.pt-store .pt-co-main{order:0}
	.pt-store .pt-co-aside{order:1;position:static}
}

@media (max-width: 640px) {
	/* the wrapper's clamp already lands on 16px here; only the card padding
	   needs tightening so the fields are not squeezed */
	.pt-store .pt-co-step-btn{padding:18px 16px}
	.pt-store .pt-co-step-body{padding:20px 16px 24px}
	.pt-store .pt-co-summary-shell{padding:18px 16px}
}

/* the finished account step: closed, checked, and not a control */
.pt-store .pt-co-step-account .pt-co-step-btn{cursor:default}
.pt-store .pt-co-step-account .pt-co-step-recap{display:block}

/* --- the Stripe card payment section -----------------------------------------

   Three boxes were drawn around one form: the method <li> has a border, the
   .payment_box below it adds a border-top, and the <fieldset> the gateway emits
   carries the browser's default fieldset border and margin. Nested, they read as
   grey scaffolding rather than as a card. Only the <li> keeps a border now; the
   other two are flattened to nothing.

   What is deliberately NOT done here: the card number, expiry and security code
   live inside Stripe's iframe and cannot be styled from this document - reaching
   into it would break PCI scope even if it were possible. The gateway instead
   reads the *computed* styles of real elements on this page and hands them to
   Stripe's Appearance API. On classic checkout it samples #billing_first_name
   for field styling and walks a list of selectors for the background. So the
   in-iframe fields are styled by styling those elements, at the end of this
   block. */

/* Every selector below is anchored on #payment on purpose. Astra's WooCommerce
   stylesheet draws the grey box with ID selectors - '.woocommerce-checkout
   #payment div.payment_box' and friends - and no number of classes outranks an
   ID. Without #payment here the method card styled correctly but the grey box
   inside it survived untouched. With it, these rules sit at (1,4,0) or above
   and win on specificity alone; nothing needs !important. */

.pt-store.woocommerce-checkout #payment.pt-co-payment{
	--pay-line:#D8E3F0;
	--pay-field:#CCD7E5;
	--pay-blue:#0877E8;
	--pay-tint:#F5F9FF;
	--pay-shadow:0 4px 16px rgba(15,42,76,.06);

	background:#FFFFFF;
	padding:0;
	border:0;
}

/* a list of cards, with nothing of the list left */
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods{
	list-style:none;margin:0;padding:0;border:0;
	display:flex;flex-direction:column;gap:12px;
}

/* ---------------------------------------------------------- the method card */

/* The row wraps: radio and label sit on line one, the payment body takes the
   full width beneath them. That is what gives the header its hierarchy without
   any extra markup to hang it on. */
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method{
	display:flex;flex-wrap:wrap;align-items:center;gap:12px;
	margin:0;padding:24px;
	background:#FFFFFF;
	border:1px solid var(--pay-line);
	border-radius:12px;
	box-shadow:var(--pay-shadow);
	transition:border-color .18s cubic-bezier(.4,0,.2,1),
		background-color .18s cubic-bezier(.4,0,.2,1),
		box-shadow .18s cubic-bezier(.4,0,.2,1);
}

/* Selected. :has() rather than a class, because WooCommerce marks the choice on
   the input and never on the row. */
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method:has(> input.input-radio:checked){
	border-color:var(--pay-blue);
	background:var(--pay-tint);
}
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method:focus-within{
	box-shadow:var(--pay-shadow),0 0 0 3px rgba(8,119,232,.16);
}

.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method > input.input-radio{
	flex:0 0 auto;width:18px;height:18px;margin:0;
	accent-color:var(--pay-blue);cursor:pointer;
}

/* the header: method name left, brand marks right */
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method > label{
	flex:1 1 auto;min-width:0;margin:0;cursor:pointer;
	display:flex;align-items:center;flex-wrap:wrap;gap:8px;
	font-family:var(--font-display),var(--font-body),system-ui,sans-serif;
	font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
}
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method:has(> input.input-radio:checked) > label{
	color:var(--pay-blue);
}

/* card-brand logos: kept, sized to the text, never stretched */
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method > label img,
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method > label .stripe-icon{
	display:inline-block;height:22px;width:auto;max-width:100%;
	margin:0;padding:0;vertical-align:middle;object-fit:contain;
}
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method > label img{
	margin-left:auto;
}

/* ---------------------------------------------------------- the payment body */

/* second box removed: no rule above it, no background of its own */
.pt-store.woocommerce-checkout #payment.pt-co-payment .payment_box{
	flex:1 0 100%;
	margin:18px 0 0;padding:0;
	border:0;border-radius:0;background:transparent;
	font-size:14px;line-height:1.6;color:var(--muted);
}
.pt-store.woocommerce-checkout #payment.pt-co-payment .payment_box::before,
.pt-store.woocommerce-checkout #payment.pt-co-payment .payment_box::after{display:none}

/* Third box removed. min-width:0 matters as much as the border here: a fieldset
   takes an intrinsic minimum width from its contents, and that is what pushes
   the card off a 360px screen. */
.pt-store.woocommerce-checkout #payment.pt-co-payment fieldset.wc-upe-form,
.pt-store.woocommerce-checkout #payment.pt-co-payment fieldset.wc-payment-form{
	margin:0;padding:0;border:0;min-width:0;max-width:100%;
}

.pt-store.woocommerce-checkout #payment.pt-co-payment .wc-stripe-upe-element{
	margin:0;min-width:0;max-width:100%;
}

/* errors keep WooCommerce's own behaviour; they only get the site's voice */
.pt-store.woocommerce-checkout #payment.pt-co-payment #wc-stripe-upe-errors{
	margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--alert);
}
.pt-store.woocommerce-checkout #payment.pt-co-payment #wc-stripe-upe-errors:empty{
	margin:0;display:none;
}

/* saved cards and the wallet rows keep their own widths */
.pt-store.woocommerce-checkout #payment.pt-co-payment .woocommerce-SavedPaymentMethods{
	list-style:none;margin:0 0 14px;padding:0;
}
.pt-store.woocommerce-checkout #payment.pt-co-payment .woocommerce-SavedPaymentMethods li{
	margin:0 0 8px;font-size:14px;
}

/* ------------------------------------------------------------ security line */

.pt-store.woocommerce-checkout #payment .pt-co-pay-secure{
	display:flex;align-items:center;justify-content:center;gap:7px;
	margin:14px 0 0;padding:0;
	font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center;
}
.pt-store.woocommerce-checkout #payment .pt-co-pay-secure svg{
	flex:0 0 auto;color:var(--pay-blue);
}

.pt-store.woocommerce-checkout #payment .pt-co-place{margin:0;padding:0}

/* ------------------------------------ what Stripe copies into the iframe

   Classic checkout samples #billing_first_name for its field styling, so the
   card fields end up looking like whatever the site's own inputs look like.
   The whole set is given the same values rather than that one field alone -
   otherwise the sampled field would be the only input on the page that differed
   from its neighbours, and "consistent" would be false in the other direction. */

/* Anchored on the checkout <form> (.pt-co-form) so these reach (0,5,1): the
   store-wide rule in store.css, '.pt-store .woocommerce form .form-row
   input.input-text', sits at (0,4,2) and was out-ranking a plain .pt-co-f rule -
   the visible fields kept its 10px radius and sky-blue border while the sampled
   one changed. .pt-co-form exists only on this form, so account forms are out
   of reach. */
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f input[type=text],
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f input[type=email],
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f input[type=tel],
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f input[type=number],
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f select,
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f .select2-container .select2-selection--single,
.pt-store.woocommerce-checkout #billing_first_name{
	background:#FFFFFF;
	border:1px solid #CCD7E5;
	border-radius:8px;
	min-height:48px;
}
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f input:focus,
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f select:focus,
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f .select2-container--focus .select2-selection--single,
.pt-store.woocommerce-checkout #billing_first_name:focus{
	outline:none;
	border-color:#0877E8;
	box-shadow:0 0 0 3px rgba(8,119,232,.16);
}

/* WooCommerce's invalid state has to out-rank the rules above - and the
   store-wide one, which was already painting invalid fields sky-blue instead of
   red before this change. Validation is WooCommerce's; this only makes it
   visible again. */
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f.woocommerce-invalid input,
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f.woocommerce-invalid select,
.pt-store.woocommerce-checkout .pt-co-form .pt-co-f.woocommerce-invalid .select2-selection--single{
	border-color:var(--alert);
}

/* -------------------------------------------------------------------- mobile */

@media (max-width: 640px){
	.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method{
		padding:16px;gap:10px;
	}
	.pt-store.woocommerce-checkout #payment.pt-co-payment .payment_box{margin-top:14px}

	/* Nothing in here may set its own width. Given the room, the iframe stacks
	   the expiry and security code itself. */
	.pt-store.woocommerce-checkout #payment.pt-co-payment,
	.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods,
	.pt-store.woocommerce-checkout #payment.pt-co-payment li.wc_payment_method,
	.pt-store.woocommerce-checkout #payment.pt-co-payment .payment_box,
	.pt-store.woocommerce-checkout #payment.pt-co-payment fieldset,
	.pt-store.woocommerce-checkout #payment.pt-co-payment .wc-stripe-upe-element,
	.pt-store.woocommerce-checkout #payment.pt-co-payment iframe{
		min-width:0;max-width:100%;
	}
}

/* --- the double gutter on phones ----------------------------------------------

   store.css gives every store page '.pt-store .woocommerce' a clamp(20px,5vw,48px)
   side gutter. On the checkout that stacks with .pt-co-wrap's own 16px, so on a
   390px phone the step cards started 36px from each edge and the payment card,
   nested one level further in, was left 284px wide. The checkout was specified
   at 12-16px from the edges; this puts it back there.

   Phones only, checkout only, side padding only. The 150px top that clears the
   fixed header is left alone, and desktop keeps its balanced gutters. */
@media (max-width: 640px){
	.pt-store.woocommerce-checkout .woocommerce{padding-left:0;padding-right:0}
}

/* --- the note under 'Already a member? Sign in here' ---------------------- */
.pt-store .pt-vf-note{
	margin:0 0 20px;padding:12px 14px;
	background:#F5F9FF;border:1px solid #D8E3F0;border-left:3px solid #0877E8;border-radius:8px;
	font-size:13.5px;line-height:1.6;color:var(--ink-soft);text-align:left;
}

/* --- account form additions (peptech-verify 1.1.0) ------------------------- */
/* the confirm-password hint turns red or green as the second password is typed */
.pt-store .pt-vf-hint.is-bad{color:#B42318}
.pt-store .pt-vf-hint.is-good{color:var(--ok-fg)}
/* the reset-by-email offer, shown under Log in after two failed attempts */
.pt-store .pt-vf-reset{margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.pt-store .pt-vf-reset .pt-vf-note{margin:0 0 14px}
/* secondary to Log in: outlined, so the page still has one main action */
.pt-store .pt-vf-reset .pt-co-next{margin:0;background:var(--surface);color:var(--ink);border:1px solid var(--ink)}
.pt-store .pt-vf-reset .pt-co-next:hover{background:var(--ink);color:#fff;box-shadow:none}

/* --- mobile phone hint (text-link payments, 11 Sep 2026) -------------------- */
/* WooCommerce shows field descriptions as a blue bubble only while the field has
   focus (woocommerce.js slides it in and out). This one tells the buyer where
   the payment link goes, so it stays visible as a plain hint like the others. */
.pt-store #billing_phone_field .woocommerce-input-wrapper .description{
	display:block!important;position:static;margin:6px 0 0;padding:0;border-radius:0;
	background:none;color:var(--muted);font-size:12.5px;line-height:1.5;
}
.pt-store #billing_phone_field .woocommerce-input-wrapper .description::before{display:none}

/* --- payment inside Review & Order; My Account code card (11 Sep 2026) ------- */
.pt-store .pt-co-paysec{margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.pt-store .pt-co-paysec .pt-co-sub{margin:0 0 12px}
.pt-store .pt-co-square{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.pt-store .pt-co-square strong{color:var(--ink);font-weight:600}
/* the account grid is two columns (menu + content) when signed in; the sign-in card is one */
.pt-store .pt-acct .woocommerce:has(> .pt-acct-gate){grid-template-columns:minmax(0,1fr)}
.pt-store .pt-acct .pt-acct-gate{max-width:560px;margin:8px 0 0}
/* #payment keeps WooCommerce's place-order row (nonce, no-JS fallback); it is empty here */
.pt-store .pt-co-paysec #payment .pt-co-place{margin:0;padding:0;min-height:0}

/* --- Review & Order holds everything (11 Sep 2026) ---------------------------

   The owner's layout: order summary, then ship to and delivery, then the
   Square payment card, then the confirmations. The summary left the side column
   for the last step, so the form is one column - the wrap's single track
   narrows to a form width and the heading stays lined up with it. */
.pt-store .pt-co-solo .pt-co-wrap{grid-template-columns:minmax(0,820px)}
.pt-store .pt-co-solo .pt-co-grid{grid-template-columns:minmax(0,1fr)}
.pt-store .pt-co-sub.pt-co-sub-lead{margin-top:0}
.pt-store .pt-co-sumbox{margin:0 0 20px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pt-store .pt-co-recap.pt-co-recap-stack{grid-template-columns:minmax(0,1fr);margin:0}
.pt-store .pt-co-paysec{margin-top:24px}
.pt-store .pt-co-acks{margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}

/* the Square card: one fixed method, so no radio and no "selected" tint */
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method.pt-co-sqpay,
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method.pt-co-sqpay:has(> input.input-radio:checked){
	position:relative;gap:10px;padding:20px 22px;border-color:var(--pay-line);background:#FFFFFF;
}
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method.pt-co-sqpay > input.input-radio{
	position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none;
}
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method.pt-co-sqpay > label,
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method.pt-co-sqpay:has(> input.input-radio:checked) > label{
	flex:1 0 100%;gap:9px;color:#000000;cursor:default;
}
.pt-store .pt-co-sq-mark{flex:0 0 auto;display:block;width:24px;height:24px}
.pt-store .pt-co-sq-word{
	font-family:var(--font-display),var(--font-body),system-ui,sans-serif;
	font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1;color:#000000;
}
.pt-store.woocommerce-checkout #payment.pt-co-payment .pt-co-sqpay-text{
	flex:1 0 100%;margin:0;font-size:14px;line-height:1.6;color:var(--ink-soft);
}
@media (max-width:640px){
	.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method.pt-co-sqpay{padding:16px}
	.pt-store .pt-co-sumbox{padding:16px 14px}
}
/* Astra's clearfix puts empty ::before/::after boxes on the list and the card.
   In a flex container they are items, so each one took a gap - blank space above
   the Square logo and under the card. And WooCommerce's hidden place-order row
   (nonce only) keeps Astra's 2em bottom padding unless this out-ranks it. */
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods::before,
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods::after,
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.pt-co-sqpay::before,
.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.pt-co-sqpay::after{display:none}
.pt-store.woocommerce-checkout .pt-co-paysec #payment.pt-co-payment div.form-row.pt-co-place{margin:0;padding:0}
@media (max-width:640px){
	.pt-store.woocommerce-checkout #payment.pt-co-payment ul.payment_methods > li.wc_payment_method.pt-co-sqpay:has(> input.input-radio:checked){padding:16px}
}

/* --- recap in the site's type; centred code box (11 Sep 2026) ---------------
   The Ship to / Delivery keys were IBM Plex Mono, which read as a typewriter
   face beside the Inter section labels around them; they now match "Order
   summary" and "Payment", and the values are set in Inter at body weight. */
.pt-store .pt-co-recap-k{font-family:var(--font-body),system-ui,sans-serif;font-size:11.5px;letter-spacing:.08em}
.pt-store .pt-co-recap-v{font-family:var(--font-body),system-ui,sans-serif;font-size:14.5px;font-weight:500;color:var(--ink)}
/* the six-digit code box sits in the middle of its card, label and expiry line
   with it; text-indent offsets the trailing letter-spacing so the digits are
   centred inside the box too */
.pt-store .pt-vf-codefield{margin-left:auto;margin-right:auto;text-align:center}
.pt-store .pt-co-gate .pt-vf-code{text-indent:.36em}
.pt-store .pt-vf-expiry{text-align:center}
/* The code box's own rule was out-ranked: '.pt-store .pt-co-f input[type=text]'
   (checkout) and '.pt-store .pt-acct .woocommerce form input[type=text]' (My
   Account) both beat '.pt-store .pt-co-gate .pt-vf-code', so it rendered as an
   ordinary 48px field at 15px - and at 15px iOS zoomed the page when the buyer
   tapped it to type the code. This selector outranks both. */
.pt-store .pt-co-gate form.pt-vf-form .pt-co-f input.pt-vf-code{
	height:60px;padding:0 16px;border-radius:12px;
	font-family:var(--font-mono),ui-monospace,monospace;
	font-size:30px;font-weight:700;letter-spacing:.36em;text-align:center;text-indent:.36em;
}

/* the Ship to box is three lines - name, address, phone (11 Sep 2026) */
.pt-store .pt-co-recap-v[data-mirror="address"]{white-space:pre-line}