/*
* Checkout, on one page.
*
* The platform's one-page checkout stacks four full-width blocks: the bag, the
* addresses, the delivery methods and the payment methods. Measured on this
* store that is 3,429px — four screens — which is the complaint people have
* about one-page checkouts, and it is a LAYOUT problem, not a flow one.
*
* So: two columns, the order pinned beside the steps, and each finished step
* folded down to a single line by 60-studio-checkout.js. The page comes in
* around a screen and a quarter with no reloads.
*
* Only structure lives here, and the few colours are neutral on purpose —
* a translucent grey border and currentColor read correctly on Motion's navy
* and on Clean's white alike, so no design has to restate them. Each design's
* own rules keep dressing the buttons, fields and panels inside.
*/
body.studio .st-co {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 28px;
align-items: start;
}
body.studio .st-co-main { min-width: 0; }
/* The order stays in view while the steps are filled in. */
body.studio .st-co-side {
position: sticky;
top: 90px;
display: grid;
gap: 14px;
padding: 20px;
border: 1px solid rgba(128, 128, 128, .28);
border-radius: var(--st-pay-radius, 12px);
}
body.studio .st-co-side:empty { display: none; }
body.studio .st-co-side h3 {
margin: 0;
font-size: .78rem;
letter-spacing: .18em;
text-transform: uppercase;
}
body.studio .st-co-lines { display: grid; gap: 10px; }
body.studio .st-co-line { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
body.studio .st-co-line img { width: 44px; height: 44px; object-fit: contain; }
body.studio .st-co-line b { font-weight: 600; }
body.studio .st-co-line span { display: block; font-size: .8rem; }
body.studio .st-co-totals { display: grid; gap: 7px; padding-top: 14px; border-top: 1px solid rgba(128, 128, 128, .28); font-size: .9rem; }
body.studio .st-co-totals div { display: flex; justify-content: space-between; gap: 12px; }
body.studio .st-co-totals .st-co-grand { padding-top: 9px; border-top: 1px solid rgba(128, 128, 128, .28); font-size: 1.15rem; font-weight: 700; }
body.studio .st-co-totals b { font-variant-numeric: tabular-nums; }
/* ---- the steps ---------------------------------------------------------- */
body.studio .st-step {
border: 1px solid rgba(128, 128, 128, .28);
border-radius: var(--st-pay-radius, 12px);
margin: 0 0 14px;
overflow: hidden;
}
body.studio .st-step-head {
display: grid;
grid-template-columns: 30px 1fr auto auto;
gap: 12px;
align-items: center;
padding: 16px 18px;
}
body.studio .st-step-n {
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 50%;
border: 1px solid rgba(128, 128, 128, .45);
font-size: .82rem; font-weight: 700;
font-variant-numeric: tabular-nums;
}
body.studio .st-step-t { margin: 0; font-size: 1.02rem; font-weight: 700; }
/* No opacity here: this line already takes the design's muted colour, and
dimming a muted grey again lands around 3.4:1 — the answer to "where
is it going" should not be the faintest thing on the page. */
body.studio .st-step-t small { display: block; margin-top: 3px; font-size: .88rem; font-weight: 400; }
body.studio .st-step-edit {
border: 1px solid rgba(128, 128, 128, .45);
border-radius: 999px;
padding: 6px 14px;
background: none;
color: inherit;
font-size: .8rem;
cursor: pointer;
}
body.studio .st-step-edit:hover { border-color: currentColor; }
body.studio .st-step-body { padding: 0 18px 18px; }
/* Folded: the head alone, with its one-line answer. */
body.studio .st-step.is-folded .st-step-body { display: none; }
/* DONE reads as done. A folded step is one the shopper has answered, so its
number goes light green rather than another shade of grey — the one state
on this page worth telling apart at a glance. Green is stated here rather
than taken from a design token because "completed" means the same thing on
all ten designs; only its weight against the card is left to the surface. */
body.studio .st-step.is-done .st-step-n {
border-color: rgba(47, 138, 90, .45);
background: rgba(93, 194, 133, .28);
color: #2f8a5a;
}
body.studio .st-step:not(.is-folded) .st-step-edit { display: none; }
/* Edit is offered on a folded step, the chevron on an open one — one control
in that slot at a time. */
body.studio .st-step.is-folded .st-step-close { display: none; }
/* NOT YET REACHED. See lockSteps(). Collapsed like a folded step, but quiet
and offering nothing: no Edit, no close, and no summary line — a step the
shopper has not answered must not print an answer beside its name, which is
how the shipping card came to advertise "Pick Up In Store · Free" before
anyone had chosen it. */
body.studio .st-step.is-pending { opacity: .45; }
body.studio .st-step.is-pending .st-step-body,
body.studio .st-step.is-pending .st-step-edit,
body.studio .st-step.is-pending .st-step-close,
body.studio .st-step.is-pending .st-step-t small { display: none; }
/* Not reached: an EMPTY circle. Outline only, nothing filled in — the
counterpart to the green one above, so the three states read as done,
in hand, and still to come. */
body.studio .st-step.is-pending .st-step-n {
border-color: rgba(128, 128, 128, .45);
background: none;
}
body.studio .st-step-close {
width: 30px; height: 30px;
display: grid; place-items: center;
padding: 0;
border: 1px solid rgba(128, 128, 128, .45);
border-radius: 999px;
background: none;
color: inherit;
cursor: pointer;
}
body.studio .st-step-close:hover { border-color: currentColor; }
body.studio .st-step-close::before {
content: "";
width: 14px; height: 14px;
background: currentColor;
-webkit-mask: var(--st-chev) center / contain no-repeat;
mask: var(--st-chev) center / contain no-repeat;
--st-chev: url('data:image/svg+xml;utf8,');
}
/* The platform's own heading at the TOP of a step would repeat the step's
title. Scoped to the step body's own first child: the looser version hid
any subheading that happened to be first inside its parent, which took the
"Shipping address" and "Billing address" labels off the two address cards
and left a shopper unable to tell which was which. */
body.studio .st-step > .st-step-body > .page-subheading:first-child,
body.studio .st-step > .st-step-body > h3:first-child { display: none; }
/* A billing address that differs from the shipping address is stated, not
left to be spotted by comparing two columns line by line. */
body.studio .st-addr-note {
grid-column: 1 / -1;
margin: 0 0 12px;
padding: 10px 14px;
border: 1px solid currentColor;
border-radius: var(--st-pay-radius, 12px);
font-size: .88rem;
}
/* Why the billing picker is empty, where a duplicate button used to be. */
body.studio .st-addr-hint { margin: 0; font-size: .88rem; }
/* The two address cards take the same corner as every other card in this
checkout. Some designs square this element off in their own sheet, hence
the same token and the same !important the payment cards need. */
body.studio #opc_account .address.box {
border-radius: var(--st-pay-radius, 12px) !important;
}
/* The picker and the buttons in that block follow the cards. Scoped to the
address step rather than every button on the page: the quantity stepper is
a deliberate pill and the step's own chevron is a circle, and a blanket
rule would flatten both. */
body.studio #opc_account select,
body.studio #opc_account .btn,
body.studio #opc_account input[type="text"] {
border-radius: var(--st-pay-radius, 12px) !important;
}
/* Those two labels, once visible, are the point of the block. */
body.studio #opc_account .page-subheading {
font-size: .78rem !important;
letter-spacing: .1em;
text-transform: uppercase;
margin: 0 0 8px !important;
}
@media (max-width: 1100px) {
body.studio .st-co { grid-template-columns: 1fr; }
body.studio .st-co-side { position: static; order: -1; }
}
@media (max-width: 640px) {
body.studio .st-step-head { padding: 14px; grid-template-columns: 26px 1fr auto auto; }
body.studio .st-step-body { padding: 0 14px 14px; }
}
/* The bag's own totals are repeated in the sticky panel, and they are the
tallest thing on the page — eight rows of it. One copy is enough. */
body.studio .st-co .st-step #cart_summary tfoot { display: none; }
body.studio .st-co .st-step #cart_summary { margin-bottom: 0; }
/* Checkout is a form, not a poster: the designs' display sizes are meant for
a hero. The page title comes down, and any heading the steps replaced is
hidden by 60-studio-checkout.js. */
body.studio.order-opc .page-heading,
body.studio.order-opc #cart_title,
body.studio.order-opc h1 {
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
line-height: 1.15;
margin-bottom: 18px;
}
body.studio.order-opc .cart_navigation .btn,
body.studio.order-opc #cart_summary { font-size: .92rem; }
/* ---- payment methods ----------------------------------------------------
* Each payment module supplies its own markup, so the rows arrive at three
* different sizes and weights, one of them wrapped in a panel of its own, and
* only some of them carrying a chevron. This makes one row out of all of them.
*
* Flex, not grid: the link's children are a bare text node and a span, and in
* a grid each becomes its own cell — which is what pushed the module's caveat
* onto a second line. In flex they sit on one line and the chevron is pushed
* out by margin.
*
* Icons are inline SVG masks painted with currentColor, not an icon font:
* this theme carries two different Font Awesome versions, so a glyph code
* that resolves in one can be a blank box in the other.
*/
body.studio #opc_payment_methods p.payment_module { margin: 0 0 10px; }
body.studio #opc_payment_methods p.payment_module > a,
body.studio #opc_payment_methods form > a:not(.fancybox) {
display: flex !important;
align-items: center;
gap: 0;
/* 10px against a 34px icon is the same 54px row 15px against 24px was. */
padding: 10px 18px;
/* The border is the DESIGN's — every design paints its payment rows, and
each does it in its own line colour. A neutral grey here would apply to
the two rows this file outranks and leave the card row wearing the
design's, which is how they came out mismatched. */
border-radius: var(--st-pay-radius, 12px) !important;
font-size: 1rem !important;
font-weight: 600 !important;
line-height: 1.35;
text-decoration: none;
transition: border-color .2s;
}
body.studio #opc_payment_methods p.payment_module > a:hover,
body.studio #opc_payment_methods form > a:not(.fancybox):hover { border-color: currentColor; }
/* A module may dress its own row on hover. tbpaypalcheckout's stylesheet
paints PayPal blue and adds a blue glow — `border-color: #0070ba` plus
`box-shadow: 0 2px 8px rgba(0,112,186,.2)` — which showed as a blue halo
on that one row while the others stayed in the design's own colours. The
border was already outranked here; the shadow and fill were not. The card
around the row owns hover, so the row itself draws neither. */
body.studio #opc_payment_methods p.payment_module > a,
body.studio #opc_payment_methods p.payment_module > a:hover,
body.studio #opc_payment_methods form > a:not(.fancybox),
body.studio #opc_payment_methods form > a:not(.fancybox):hover {
box-shadow: none !important;
background: none !important;
}
/* Every row is the same height. Stripe ships its row logo with a hard
height="64" attribute, which made the card row half again as tall as the
ones beside it — the row grew to fit the image rather than the text. 24px
is what the PayPal override already uses, so the two agree. */
body.studio #opc_payment_methods p.payment_module > a img,
body.studio #opc_payment_methods form > a:not(.fancybox) img {
height: 24px !important;
width: auto !important;
}
/* The card row wears Stripe's app icon in the icon slot, in place of the
generic card outline — the module's own stripebtnlogo.png is a 128x128
canvas whose wordmark fills only the middle third, so it never read at row
size whatever it was scaled to. The icon carries the name, so the wordmark
beside the text would only say it twice; the module's image is hidden
rather than removed, so its markup is untouched and the brand strip that
follows it is still there for the panel to pick up. */
body.studio #opc_payment_methods p#stripe_payment_button > a img {
display: none !important;
}
body.studio #opc_payment_methods p#stripe_payment_button > a::before {
-webkit-mask: none;
mask: none;
background: url('../../img/pay/stripe.png') center / contain no-repeat;
opacity: 1;
}
/* THE SHIPPING OPTIONS, AS CARDS RATHER THAN A TABLE.
The platform draws them as a bordered grid with an empty logo column, which
is the one block of checkout still looking like stock PrestaShop. The cells
are unwrapped to blocks and each option laid out like a payment row, so the
two steps read as the same thing. JS marks the rows: only a row carrying a
radio is an option, and the rest of the table is left alone. */
body.studio #opc_delivery_methods table,
body.studio #opc_delivery_methods tbody {
display: block;
width: 100%;
border: 0 !important;
border-collapse: separate;
}
/* The platform already wraps each option in its own .delivery_option box, so
that is the card — drawing a second one on the row would stack two frames
the way the payment rows once did. The outer .order_carrier_content box is
a frame around frames and goes. */
body.studio #opc_delivery_methods .order_carrier_content.box {
border: 0 !important;
background: none !important;
padding: 0 !important;
}
body.studio #opc_delivery_methods .delivery_option {
/* Same corner as a payment card. Two designs square this element off in
their own sheet, which left step 3 round and step 4 square. */
border-radius: var(--st-pay-radius, 12px) !important;
margin: 0 0 14px;
overflow: hidden;
}
/* The price column had no heading, so the figure on the right sat unlabelled.
One header above the list, not a label repeated on every row. */
body.studio .st-ship-head {
display: flex;
align-items: baseline;
gap: 12px;
padding: 0 18px 8px;
font-size: .78rem;
letter-spacing: .1em;
text-transform: uppercase;
}
body.studio .st-ship-head b:last-child { margin-left: auto; font-weight: inherit; }
body.studio #opc_delivery_methods tr.st-ship {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 18px;
margin: 0;
border: 0;
background: none;
}
body.studio #opc_delivery_methods tr.st-ship > td {
display: block;
border: 0 !important;
padding: 0 !important;
background: none !important;
vertical-align: middle;
}
body.studio #opc_delivery_methods tr.st-ship .delivery_option_radio { flex: 0 0 auto; }
body.studio #opc_delivery_methods tr.st-ship .delivery_option_logo { flex: 0 0 auto; }
body.studio #opc_delivery_methods tr.st-ship .delivery_option_price {
flex: 0 0 auto;
margin-left: auto;
font-weight: 600;
white-space: nowrap;
}
body.studio #opc_delivery_methods tr.st-ship > td:not(.delivery_option_radio):not(.delivery_option_logo):not(.delivery_option_price) {
flex: 1 1 auto;
min-width: 0;
}
/* The carrier's mark. A merchant who uploads a real carrier logo keeps it —
that image is their decision, and it stays in the cell. Where there is no
logo the cell was simply blank, so the theme draws one: a shop front for
the pickup carrier, a van for everything else. Which carrier is which
comes from configuration (see gwcstudio::shippingMarkers), never a carrier
id written into this stylesheet. Drawn as a mask over currentColor, so it
is the design's own ink and has no background to go wrong. */
body.studio #opc_delivery_methods tr.st-ship .delivery_option_logo label::before {
content: "";
display: block;
width: 34px;
height: 34px;
background: currentColor;
-webkit-mask: var(--st-ship-icon) center / contain no-repeat;
mask: var(--st-ship-icon) center / contain no-repeat;
--st-ship-icon: url('data:image/svg+xml;utf8,');
}
body.studio #opc_delivery_methods tr.st-ship.is-pickup .delivery_option_logo label::before {
--st-ship-icon: url('data:image/svg+xml;utf8,');
}
/* A real uploaded logo wins: no drawn icon beside it. */
body.studio #opc_delivery_methods tr.st-ship .delivery_option_logo label:has(img)::before { content: none; }
body.studio #opc_delivery_methods tr.st-ship .delivery_option_logo img { max-height: 34px; width: auto; }
/* THE BLACK BOX AFTER CLICKING A METHOD.
global.css carries Bootstrap's `a:focus { outline: 5px auto; outline-offset:
-2px }`, and the row is an anchor, so clicking one drew a heavy ring just
inside its own frame — and kept it there, open or closed, because the anchor
holds focus until something else takes it. It is not the open state: the row
measured `outline: auto 5px rgb(16,16,16)` with `:focus-visible` false.
Suppressing it for the pointer only; a keyboard still gets a ring, and a
deliberate one. */
body.studio #opc_payment_methods p.payment_module > a:focus,
body.studio #opc_payment_methods form > a:not(.fancybox):focus {
outline: none;
}
body.studio #opc_payment_methods p.payment_module > a:focus-visible,
body.studio #opc_payment_methods form > a:not(.fancybox):focus-visible {
outline: 2px solid currentColor;
outline-offset: -4px;
}
/* The caveat stays on the same line, quietly. */
body.studio #opc_payment_methods p.payment_module > a > span,
body.studio #opc_payment_methods form > a:not(.fancybox) > span {
margin-left: .5em;
font-size: .86rem;
font-weight: 400;
opacity: .82;
}
/* icon in front */
body.studio #opc_payment_methods p.payment_module > a::before,
body.studio #opc_payment_methods form > a:not(.fancybox)::before {
content: "";
flex: 0 0 auto;
width: 34px; height: 34px;
margin-right: 12px;
background: currentColor;
opacity: .9;
-webkit-mask: var(--st-pay-icon) center / contain no-repeat;
mask: var(--st-pay-icon) center / contain no-repeat;
--st-pay-icon: url('data:image/svg+xml;utf8,');
}
body.studio #opc_payment_methods p.payment_module > a.bankwire::before {
--st-pay-icon: url('data:image/svg+xml;utf8,');
}
body.studio #opc_payment_methods p.payment_module > a.cheque::before {
--st-pay-icon: url('data:image/svg+xml;utf8,');
}
/* One chevron, on every row — some modules ship one and some do not. */
body.studio #opc_payment_methods p.payment_module > a::after,
body.studio #opc_payment_methods form > a:not(.fancybox)::after {
content: "";
flex: 0 0 auto;
margin-left: auto;
padding-left: 14px;
width: 20px; height: 20px;
background: currentColor;
-webkit-mask: url('data:image/svg+xml;utf8,') center right / 20px no-repeat;
mask: url('data:image/svg+xml;utf8,') center right / 20px no-repeat;
}
/* The card module wraps its link in div.auth_wrapper — #fbfbfb with its own
border — the same unclaimed module panel the product-comments block ships.
Inside a payment row that renders as a box within a box. */
body.studio #opc_payment_methods .auth_wrapper,
body.studio #opc_payment_methods .paiement_block > div {
background: none !important;
border: 0 !important;
padding: 0 !important;
box-shadow: none !important;
}
body.studio #opc_payment_methods .paiement_block > div { margin-bottom: 10px; }
/* "Continue shopping" sits with the cart it belongs to, quietly — not
centred between two steps where it reads as an instruction for the step
below it. */
body.studio .st-step .st-continue { display: flex !important; justify-content: flex-start; margin: 14px 0 0; text-align: left; }
body.studio .st-step .st-continue .btn {
display: inline-flex;
align-items: center;
gap: 8px;
width: auto;
min-width: 0;
padding: 9px 16px;
font-size: .86rem;
}
/* Rounded corners on the cart and the continue button.
A table cannot simply take a radius — its cells paint over the corners —
so the radius goes on the wrapper with overflow hidden, and the table's
own outer border is dropped so there is only one edge. */
body.studio .st-step #order-detail-content {
border: 1px solid rgba(128, 128, 128, .28);
border-radius: var(--st-radius, 12px);
overflow: hidden;
}
body.studio .st-step #cart_summary { border: 0; margin: 0; }
body.studio .st-step #cart_summary > tbody > tr > td,
body.studio .st-step #cart_summary > thead > tr > th { border-left: 0; border-right: 0; }
body.studio .st-step #cart_summary > thead > tr > th:first-child,
body.studio .st-step #cart_summary > tbody > tr > td:first-child { border-left: 0; }
body.studio .st-step #cart_summary > tbody > tr:last-child > td { border-bottom: 0; }
body.studio .st-step .st-continue .btn { border-radius: var(--st-radius, 12px); }
/* ---- a payment module's own inline form -------------------------------
* Some modules render their fields straight into the payment step. They
* arrive as a bare table-ish layout with unstyled inputs, so this gives any
* of them the same field treatment as the rest of the checkout. Written
* against the step, not against one module's class names, so it still
* applies when the module behind it changes.
*/
body.studio #opc_payment_methods form { margin: 0; }
body.studio #opc_payment_methods form .form-group,
body.studio #opc_payment_methods form > div > div { margin-bottom: 0; }
body.studio #opc_payment_methods form table { width: 100%; border: 0; }
body.studio #opc_payment_methods form table td,
body.studio #opc_payment_methods form table th {
border: 0;
padding: 7px 0;
vertical-align: middle;
}
body.studio #opc_payment_methods form table td:first-child,
body.studio #opc_payment_methods form label {
font-size: .9rem;
font-weight: 500;
}
body.studio #opc_payment_methods form input[type="text"],
body.studio #opc_payment_methods form input[type="tel"],
body.studio #opc_payment_methods form input[type="number"],
body.studio #opc_payment_methods form input[type="email"],
body.studio #opc_payment_methods form select {
height: 44px;
max-width: 340px;
padding: 0 12px;
border: 1px solid rgba(128, 128, 128, .38);
border-radius: var(--st-radius, 12px);
background: transparent;
color: inherit;
font: inherit;
font-size: .95rem;
}
/* A select needs room for its own value plus the chevron the browser draws;
capping width by name alone clipped "01" to "0'". */
body.studio #opc_payment_methods form select { padding-right: 34px; min-width: 96px; width: auto; }
body.studio #opc_payment_methods form input:focus,
body.studio #opc_payment_methods form select:focus {
outline: none;
border-color: currentColor;
}
/* The short ones should look short: a CVV box the width of a name field
invites the wrong thing to be typed in it. */
body.studio #opc_payment_methods form input[type="text"][size="3"],
body.studio #opc_payment_methods form input[type="text"][size="4"],
body.studio #opc_payment_methods form input[type="text"][maxlength="4"] { max-width: 92px; text-align: center; }
body.studio #opc_payment_methods form select[name*="month"] { min-width: 96px; max-width: 110px; }
body.studio #opc_payment_methods form select[name*="year"] { min-width: 110px; max-width: 130px; }
body.studio #opc_payment_methods form select[name*="type"],
body.studio #opc_payment_methods form select[name*="card"] { min-width: 180px; max-width: 240px; }
body.studio #opc_payment_methods form input[type="submit"],
body.studio #opc_payment_methods form button[type="submit"] {
min-height: 46px;
padding: 0 26px;
border-radius: var(--st-radius, 12px);
font-size: .95rem;
letter-spacing: .04em;
}
/* Terms of service, moved to the payment step by 60-studio-checkout.js: it is
what unlocks the payment methods, so it belongs above them rather than
inside a delivery step that folds shut. */
body.studio .st-step .st-tos {
margin: 0 0 16px;
padding: 14px 16px;
border: 1px solid rgba(128, 128, 128, .28);
border-radius: var(--st-radius, 12px);
font-size: .92rem;
}
body.studio .st-step .st-tos label { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; cursor: pointer; }
body.studio .st-step .st-tos input[type="checkbox"] { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; }
body.studio .st-step .st-tos a { text-decoration: underline; }
/* ---- Stripe's card fields ----------------------------------------------
* The module ships Stripe's compact card element — one box that reveals
* expiry, CVC and postcode as you type. Two problems: it reads as an
* unfinished form at a glance, and its postcode field rejected Canadian
* codes. The theme overrides the module's template to use split elements,
* and these are their boxes.
*/
body.studio .st-card { display: grid; gap: 12px; }
body.studio .st-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.studio .st-card-field label {
display: block;
margin: 0 0 6px;
font-size: .82rem;
font-weight: 600;
letter-spacing: .01em;
}
/* Stripe mounts an iframe in here; it needs a box of its own to sit in. */
body.studio .st-card-field > div {
padding: 13px 14px;
border: 1px solid rgba(128, 128, 128, .38);
border-radius: var(--st-radius, 12px);
background: transparent;
}
body.studio .st-card-field > div.StripeElement--focus { border-color: currentColor; }
body.studio .st-card-field > div.StripeElement--invalid { border-color: #c0392b; }
body.studio .st-card #stripe-submit-button { margin-top: 4px; }
@media (max-width: 480px) {
body.studio .st-card-row { grid-template-columns: 1fr; }
}
/* PayPal's buttons, rendered in the payment step by the theme's override of
the module's payment.tpl rather than on a page of PayPal's own. */
body.studio .st-paypal-inline { margin: 10px 0 0; }
body.studio .st-paypal-inline #paypal-button-container { max-width: 380px; }
body.studio .st-paypal-loading { padding: 10px 0; font-size: .9rem; opacity: .8; }
/* ---- payment methods as an accordion -----------------------------------
* Every module drops its row AND its form into the step, so the page showed
* Stripe's card fields and PayPal's three buttons at once, under headers
* that looked clickable and did nothing. Each row is now a header for its
* own form, one open at a time.
*/
/* ONE card per method: the shell draws the border and the corner, and the
row and the panel inside it draw neither. Before this the row kept its own
outline and the panel added a second one in a different colour, so an open
method read as two stacked boxes rather than a header with its form. */
body.studio .st-pay {
margin: 0 0 10px;
border-radius: var(--st-radius, 12px);
overflow: hidden;
}
body.studio .st-pay .st-pay-head { margin: 0; }
body.studio .st-pay .st-pay-head > a {
border: 0 !important;
border-radius: 0 !important;
}
body.studio .st-pay-body {
display: none;
padding: 16px 18px 18px;
border: 0;
}
body.studio .st-pay.is-open .st-pay-body { display: block; }
/* The chevron points down while a method is open. */
body.studio .st-pay.is-open .st-pay-head > a::after { transform: rotate(90deg); }
body.studio .st-pay .st-pay-head > a::after { transition: transform .2s; }
/* Inside a panel the module's own framing is redundant. */
body.studio .st-pay-body .st-paypal-inline { margin: 0; }
body.studio .st-pay-body #tb-stripe-elements .tb-container { padding: 0; }
/* The Stripe module frames its own form — a tinted fieldset, a white
rounded container with a shadow, and a "Pay with card" strip above the
fields. Inside an open method that is a box within a box, and the strip
repeats the row's own title. The card is the frame now. */
body.studio .st-pay-body fieldset,
body.studio .st-pay-body .tb-container,
body.studio .st-pay-body .cell,
body.studio .st-pay-body .thirtybees {
background: none !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
}
body.studio .st-pay-body legend { display: none; }
body.studio .st-pay-body .st-card { display: grid; gap: 12px; }
/* The module labels its own form "Pay with card" — the row above it already
says so. (It is a