inside a makes the
HTML parser close the paragraph early and the list would lose the
widget's classes. The span therefore needs list styling of its own.
========================================================================== */
#policy-content ul {
margin: 0;
padding-left: 22px;
list-style: disc outside;
}
#policy-content li {
margin: 0 0 6px;
padding: 0;
list-style: inherit;
}
#policy-content li:last-child {
margin-bottom: 0;
}
/* Long policy text reads better with a slightly looser measure. */
#policy-content p,
#policy-content li {
line-height: 1.65;
}
#policy-content h2 {
scroll-margin-top: 140px;
}
/* Links inside policy copy inherit the body colour from the theme, which makes
them indistinguishable from plain text. Give them the accent colour and an
underline so an email address or cross-reference reads as clickable. */
#policy-content a {
color: #00A99D;
text-decoration: underline;
text-underline-offset: 2px;
}
#policy-content a:hover,
#policy-content a:focus-visible {
color: #111111;
}
/* Long email addresses must not push the page wider on small screens. */
#policy-content a[href^="mailto:"] {
word-break: break-word;
}
/* ==========================================================================
Shipment tracking panel on the order detail page and in order history
========================================================================== */
.tp-tracking {
margin: 32px 0 0;
}
.tp-tracking__title {
margin: 0 0 12px;
font-size: 20px;
}
.tp-tracking__table th {
width: 40%;
text-align: left;
}
.tp-tracking__table a {
color: #00A99D;
text-decoration: underline;
text-underline-offset: 2px;
word-break: break-word;
}
.tp-tracking__note {
margin: 10px 0 0;
font-size: 13px;
color: #6E6E6E;
}
/* Order history column */
.tp-tracking__courier {
font-weight: 500;
}
.tp-tracking__awb a {
color: #00A99D;
font-size: 13px;
word-break: break-word;
}
/* ==========================================================================
Sidebar filter widgets: capped height and a search box
The lists are capped rather than left to run the full length of the
sidebar, which on a phone pushed the products themselves off screen.
========================================================================== */
.tp-filter-search {
margin: 0 0 10px;
}
/* Compound selector so the theme's own input[type=search] rules, which set a
left padding for an icon it never draws, do not win. */
input[type="search"].tp-filter-search__input,
.tp-filter-search__input {
width: 100%;
box-sizing: border-box;
padding: 8px 12px 8px 34px;
text-align: left;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 11px center;
background-size: 15px 15px;
border: 1px solid #E0E0E0;
border-radius: 8px;
background-color: #FFFFFF;
font-family: inherit;
font-size: 13px;
line-height: 1.4;
color: #111111;
}
.tp-filter-search__input:focus {
outline: none;
border-color: #00A99D;
box-shadow: 0 0 0 3px rgba(0, 169, 157, .18);
}
.tp-filter-search__status {
margin: 8px 0 0;
font-size: 12px;
color: #6E6E6E;
}
/* Scrollable list. max-height is in em so it follows the font size. */
.widget .tp-filter-list {
max-height: 17em;
overflow-y: auto;
overscroll-behavior: contain;
/* The theme draws the bullet with a box-shadow that bleeds ~2px to the left
of each item. A scroll container clips anything outside its padding box,
which sliced those bullets in half - hence the left padding. */
padding-left: 4px;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: #C9CDD2 transparent;
}
.widget .tp-filter-list::-webkit-scrollbar {
width: 6px;
}
.widget .tp-filter-list::-webkit-scrollbar-thumb {
background: #C9CDD2;
border-radius: 3px;
}
.widget .tp-filter-list li[hidden] {
display: none;
}
@media (max-width: 768px) {
.widget .tp-filter-list {
max-height: 13em;
}
}
/* Safari and Chrome add their own clear button; it overlaps the padding we
reserve, so it is hidden and clearing is done by selecting the text. */
.tp-filter-search__input::-webkit-search-decoration,
.tp-filter-search__input::-webkit-search-results-button {
-webkit-appearance: none;
}
/* ==========================================================================
Checkout refinements
========================================================================== */
/* Single payment method: WooCommerce still prints the radio and its label even
when there is nothing to choose between. :only-child means this reverts on its
own the day a second gateway is switched on - no PHP, nothing to remember. */
.woocommerce-checkout #payment ul.payment_methods li:only-child > label[for^="payment_method"],
.woocommerce-checkout #payment ul.payment_methods li:only-child > input[name="payment_method"] {
display: none;
}
.woocommerce-checkout #payment ul.payment_methods li:only-child {
padding-top: 0;
}
/* The terms checkbox sat 3px below the centre of its first text line: the shared
checkbox rule uses a fixed top offset that suits a different line height. */
.woocommerce-terms-and-conditions-wrapper label {
line-height: 1.5;
}
/* The theme positions this one absolutely and sets its own offset, so the
selector has to be specific enough to win without resorting to !important. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label input#terms[type="checkbox"] {
top: 1px;
}
/* Checkout progress bar. Green marks the ground already covered and the dark
circle marks where the customer is now -- the look the client approved, only
now driven by real state instead of the theme's hard-coded classes. */
.woocommerce-checkout ul.checkout-bar li.visited:before,
.woocommerce-cart ul.checkout-bar li.visited:before {
background-color: #00b050;
}
.woocommerce-checkout ul.checkout-bar li.active:before,
.woocommerce-cart ul.checkout-bar li.active:before {
background-color: #444;
}
/* ==========================================================================
Buy now / Add to cart
Buy now is the primary action: it takes the filled blue Add to cart used to
have, and Add to cart steps back to an outline. Both need !important because
the theme paints `.button.alt` that way. Shape and height stay matched to
whichever button sits next to them - the card uses 10px corners, the product
page 4px.
========================================================================== */
.tp-buy-now {
/* Same blue the theme gives its primary button. Hover is that blue darkened;
change both together if the brand colour ever moves. */
background-color: #1E90FF !important;
color: #FFFFFF !important;
border: 1px solid #1E90FF !important;
font-weight: 600;
text-align: center;
text-decoration: none;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tp-buy-now:hover,
.tp-buy-now:focus-visible {
background-color: #1A7FE0 !important;
border-color: #1A7FE0 !important;
color: #FFFFFF !important;
text-decoration: none;
}
/* Only on the product page, where the two sit side by side. Product cards have
no Buy now next to them, so their Add to cart stays the filled primary. */
.woocommerce div.product form.cart .single_add_to_cart_button {
background-color: transparent !important;
color: #111111 !important;
border: 1px solid #111111 !important;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible {
background-color: #111111 !important;
border-color: #111111 !important;
color: #FFFFFF !important;
}
/* --- Product page -------------------------------------------------------- */
/* The add-to-cart row is a plain block, so quantity, Add to cart and Buy now
line up only by luck: at ~420px the third button dropped onto its own row.
Laying the row out with flex keeps them together and lets Add to cart give up
the width. Targeted at the row itself, not form.cart, because on a variable
product that form also holds the variations table. */
.woocommerce div.product form.cart:not(.variations_form),
.woocommerce div.product .woocommerce-variation-add-to-cart {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 10px;
}
/* The theme clearfixes this row with ::before/::after. Once the row became a
flex container those pseudo-elements turned into flex items, so the 10px gap
also landed before the quantity box and after Buy now, indenting the whole
row from the column edges. */
.woocommerce div.product form.cart:not(.variations_form)::before,
.woocommerce div.product form.cart:not(.variations_form)::after,
.woocommerce div.product .woocommerce-variation-add-to-cart::before,
.woocommerce div.product .woocommerce-variation-add-to-cart::after {
display: none;
}
/* The theme's + and - controls are absolutely positioned 33px to the right of
the quantity box. Laying the row out with flex removed the space they used to
sit in, and Add to cart covered them. */
.woocommerce div.product form.cart:not(.variations_form) .quantity,
.woocommerce div.product .woocommerce-variation-add-to-cart .quantity {
flex: 0 0 auto;
margin: 0 34px 0 0;
}
.woocommerce div.product form.cart:not(.variations_form) .single_add_to_cart_button,
.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
flex: 1 1 150px;
margin: 0;
}
.tp-buy-now--single {
flex: 0 0 auto;
margin: 0;
padding: 0 20px;
height: 52px;
line-height: 50px;
font-size: 15px;
border-radius: 4px !important;
white-space: nowrap;
}
@media (max-width: 480px) {
.tp-buy-now--single {
flex: 1 1 100%;
}
}
/* --- Product card -------------------------------------------------------- */
/* The theme pins card buttons to the bottom of the card with
`position: absolute; bottom: 0`, and reserves room for exactly one of them.
Buy now inherited that rule through its `button` class and landed on the same
coordinates as Add to cart, so Add to cart moves up by one button and the card
is given room for both.
Both overrides are scoped with :has() so they only apply to cards that
actually render Buy now. With `toypedia360_buy_now_in_loop` off the card keeps
the theme's own padding instead of reserving space for a button that is not
there, and turning the filter back on restores this layout by itself. */
.woocommerce ul.products li.product:not(.product-category):has(.tp-buy-now--loop),
.woocommerce-page ul.products li.product:not(.product-category):has(.tp-buy-now--loop) {
padding-bottom: 92px;
}
ul.products li.product:has(.tp-buy-now--loop) .button:not(.tp-buy-now),
ul.products li.product:has(.tp-buy-now--loop) .added_to_cart {
bottom: 46px;
}
ul.products li.product .tp-buy-now--loop {
position: absolute;
bottom: 0;
left: 15px;
right: 15px;
width: calc(100% - 30px);
height: 40px;
line-height: 38px;
margin: 0;
padding: 0;
font-size: 13px;
border-radius: 10px !important;
}
/* Buy now waits for a variation, the same way Add to cart does. */
.tp-buy-now--single:disabled,
.tp-buy-now--single.disabled {
opacity: .4;
cursor: not-allowed;
pointer-events: none;
}
/* --- Order history: purchased products ----------------------------------- */
/* The stock order history table states only an item count, so each order row is
followed by a full-width row listing what was actually in it. */
.tp-order-products > .tp-order-products__cell {
padding: 0 0 20px;
border-top: 0;
}
.tp-order-products__list {
margin: 0;
padding: 0;
list-style: none;
}
.tp-order-products__item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 12px 0;
border-top: 1px solid #ededed;
}
.tp-order-products__item:first-child {
border-top: 0;
}
.tp-order-products__thumb {
flex: 0 0 48px;
}
.tp-order-products__thumb a {
display: block;
}
/* WooCommerce emits the thumbnail at its registered size; the card here is a
fixed square regardless of the source aspect ratio. */
.tp-order-products__thumb img {
display: block;
width: 48px;
height: 48px;
margin: 0;
object-fit: cover;
border: 1px solid #ededed;
border-radius: 6px;
}
/* Basis 0 rather than auto: with an auto basis a long product name makes the
flex line overflow and the text wraps below the thumbnail on narrow screens.
A zero basis lets the column shrink instead. */
.tp-order-products__detail {
flex: 1 1 0;
min-width: 0;
}
.tp-order-products__name {
display: block;
font-weight: 600;
line-height: 1.35;
color: inherit;
text-decoration: none;
}
.tp-order-products__name:hover,
.tp-order-products__name:focus-visible {
color: #00A99D;
}
/* Variation attributes, rendered by wc_display_item_meta(). */
.tp-order-products__detail .wc-item-meta {
margin: 4px 0 0;
padding: 0;
list-style: none;
font-size: 13px;
line-height: 1.4;
color: #767676;
}
.tp-order-products__detail .wc-item-meta li {
margin: 0;
}
.tp-order-products__detail .wc-item-meta strong,
.tp-order-products__detail .wc-item-meta p {
display: inline;
margin: 0;
font-weight: 400;
font-size: inherit;
}
.tp-order-products__qty {
display: block;
margin-top: 4px;
font-size: 13px;
color: #767676;
}
.tp-order-products__price {
flex: 0 0 auto;
text-align: right;
white-space: nowrap;
}
.tp-order-products__unit {
display: block;
font-size: 12px;
color: #767676;
}
.tp-order-products__total {
display: block;
font-weight: 600;
}
/* `shop_table_responsive` turns every cell into a right-aligned block and
prefixes it with its `data-title`. This cell spans the whole table and has no
title, so both behaviours have to be undone. */
@media screen and (max-width: 768px) {
.tp-order-products,
.woocommerce table.shop_table_responsive tr.tp-order-products,
.woocommerce table.shop_table_responsive tr td.tp-order-products__cell {
display: block;
width: 100%;
text-align: left;
}
.woocommerce table.shop_table_responsive tr td.tp-order-products__cell::before {
content: none;
}
.tp-order-products__item {
flex-wrap: wrap;
}
/* Price drops below the name, aligned with it rather than with the image. */
.tp-order-products__price {
flex: 1 0 100%;
margin-left: 62px;
text-align: left;
}
.tp-order-products__unit {
display: inline;
margin-right: 6px;
}
.tp-order-products__total {
display: inline;
}
}
/* --- Header cart count ---------------------------------------------------- */
/* The badge lives inside .icon-wrapper, which Shoptimizer already positions
absolutely, so it anchors to the cart icon without giving any other element a
new positioning context. The wrapper's overflow is visible, so the badge may
sit slightly outside it. */
.header-cart .icon-wrapper .tp-cart-count {
position: absolute;
top: -4px;
right: -7px;
display: flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 9px;
background-color: #00A99D;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
/* Clicks belong to the cart link underneath. */
pointer-events: none;
}
/* An empty cart still renders the element so cart fragments have a target to
replace; it is only hidden from view. */
.header-cart .icon-wrapper .tp-cart-count--empty {
display: none;
}
/* --- Checkout: shipping address first -------------------------------------- */
/* The billing address is collapsed until "Billing to a different address?"
is ticked. A plain [hidden] attribute is not enough on its own here: the
wrapper carries WooCommerce classes that set a display value, which would
win on specificity. */
.woocommerce-billing-fields .billing_address[hidden] {
display: none;
}
/* Heading of the primary form. It is no longer a checkbox label, so the
theme's checkbox spacing no longer applies to it. */
#ship-to-different-address > span {
font-weight: inherit;
}
/* --- Checkout: delivery row ------------------------------------------------ */
/* The shipping form is the primary one now, so its heading no longer needs
the separating rule the theme puts above an optional section. */
#ship-to-different-address {
padding-top: 0;
border-top: 0;
}
/* The theme draws a radio marker on the shipping method label with a
pseudo-element. WooCommerce itself renders a hidden input when only one
method is available, so the marker offers a choice that does not exist.
Scoped with :only-child, so real markers return if a second method is
ever offered. */
#shipping_method li:only-child label::before {
display: none;
}
/* --- Order totals table ---------------------------------------------------- */
/* Tighter rows than the theme's defaults, which were sized for a wider column. */
.woocommerce-checkout-review-order-table tfoot th,
.woocommerce-checkout-review-order-table tfoot td {
padding: 11px 16px;
font-size: 14px;
line-height: 1.4;
}
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
padding: 14px 16px;
font-size: 17px;
font-weight: 700;
border-top: 2px solid #1a1a2e !important;
}
/* The theme stacks the delivery label and its cell as two full width blocks,
which left the price out of line with every other row. Restored to a normal
two column row now that the free shipping note has a row of its own. */
/* The theme leaves this cell with no bottom padding, a leftover from stacking
it above its value. That made its content box 32px tall against the value
cell's 21px, so the centred label sat 6px lower. Measured, not guessed --
and !important because the theme declares it that way. */
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals th {
display: table-cell;
width: 50%;
padding: 11px 16px !important;
text-align: left;
}
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals td {
display: table-cell;
width: 50%;
text-align: right;
}
/* Browsers centre a
but baseline-align a | , and this row's cell holds a
list rather than plain text -- so the amount sat 6px above its label while
every other row lined up. Both cells are centred instead. */
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals th,
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals td {
vertical-align: middle;
}
/* Stacked, these two cells each needed a border on the side that now faces the
other, which drew a line down the middle of the row that no other row has.
Matched to the Subtotal row: the label carries the left edge, the value the
right, and nothing between them. */
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals th {
/* The theme declares this side !important; the matching rule on the value
cell won without it, so only this one needs the flag. */
border-right: 0 !important;
}
.woocommerce-checkout-review-order-table tfoot .woocommerce-shipping-totals td {
border-left: 0;
/* Only this cell carried a bottom border, which drew a rule across half the
width between the delivery line and the note that belongs to it. */
border-bottom: 0;
}
/* With the note gone from this cell the price no longer needs to float. */
.woocommerce-shipping-totals #shipping_method {
margin: 0;
padding: 0;
}
.woocommerce-shipping-totals #shipping_method li {
margin: 0;
padding: 0;
}
/* The list, its item and the label each carry their own type sizing, which
left the amount sitting 6px above the row label. Everything inherits the
cell's instead, so the two line up the way Subtotal and Total do. */
.woocommerce-shipping-totals #shipping_method,
.woocommerce-shipping-totals #shipping_method li,
.woocommerce-shipping-totals #shipping_method label,
.woocommerce-shipping-totals #shipping_method .woocommerce-Price-amount {
font-size: inherit;
line-height: inherit;
}
.woocommerce-shipping-totals #shipping_method .woocommerce-Price-amount {
float: none;
display: inline;
}
/* --- Free shipping nudge --------------------------------------------------- */
/* Its own row spanning both columns, directly under the delivery line. */
/* Spans both columns, so it has to carry the card's left edge itself: the row
above draws that edge on its label cell, which this row does not have. */
.tp-free-shipping-row > td {
padding: 0 16px 12px;
text-align: left;
border-top: 0;
border-left: 1px solid #E2E2E2;
}
.tp-free-shipping-note {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 12px;
}
/* The totals cells are right aligned, which the note inherited. Declared here
rather than on the cell, where the theme's own alignment wins. */
.tp-free-shipping-note__text {
flex: 1 1 200px;
margin: 0;
font-size: 13px;
line-height: 1.4;
color: #767676;
font-weight: 400;
text-align: left;
}
.woocommerce .tp-free-shipping-note__button,
.woocommerce-page .tp-free-shipping-note__button {
flex: 0 0 auto;
display: inline-block;
margin: 0;
padding: 0 12px;
height: 30px;
line-height: 28px;
font-size: 12px;
font-weight: 600;
border: 1px solid #d5d5d5;
border-radius: 6px;
background-color: transparent;
color: inherit;
white-space: nowrap;
}
.woocommerce .tp-free-shipping-note__button:hover,
.woocommerce .tp-free-shipping-note__button:focus-visible {
background-color: #00A99D;
border-color: #00A99D;
color: #fff;
}
/* --- Checkout: label-less fields ------------------------------------------- */
/* Labels are moved out of sight rather than removed, so the field keeps its
accessible name. Stated again here because the theme styles .form-row
labels with enough specificity to win otherwise. */
.woocommerce-checkout form .form-row label.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
/* --- Checkout: payment heading --------------------------------------------- */
.tp-payment-heading {
margin: 28px 0 12px;
}
/* --- Checkout: four steps -------------------------------------------------- */
/* The theme sizes the bar for three steps. */
.tp-checkout-steps ul.checkout-bar li {
width: 25%;
}
/* The leading segment is half a step wide. */
.tp-checkout-steps ul.checkout-bar:before {
width: 12.5%;
}
/* The theme only numbers three circles. */
.tp-checkout-steps ul.checkout-bar li:nth-child(4):before {
content: "4";
}
/* The theme only draws a connector for `active` and `next`, and the customizer
paints the active one green -- which, with real step state, puts the green
line ahead of the customer instead of behind them. The connector is drawn
for completed steps instead, and the one leaving the current step is put
back to grey. */
.tp-checkout-steps ul.checkout-bar li.visited:after {
position: absolute;
z-index: 0;
top: -22px;
left: 50%;
width: 100%;
height: 2px;
background-color: #00b050;
content: "";
}
.tp-checkout-steps ul.checkout-bar li.active:after {
background-color: #ccc;
}
/* One step on screen at a time. Both columns are siblings of the checkout
form, so a single class on the form is enough -- nothing is moved, and
with JavaScript off neither class is ever set and both stay visible. */
form.checkout.tp-step-shipping .tp-step-nav--back,
form.checkout.tp-step-payment #customer_details,
form.checkout.tp-step-payment .tp-step-nav--forward {
display: none;
}
/* The payment step is moved out of sight rather than hidden. Stripe's Payment
Element is an iframe, and one mounted inside a `display: none` container
measures zero and never recovers -- verified here: even a full order review
refresh left it collapsed. Off screen it keeps real dimensions and mounts at
the width it will actually be shown at. Kept out of the tab order and away
from screen readers with `inert`, which the step script sets. */
form.checkout.tp-step-shipping #order_review_heading,
form.checkout.tp-step-shipping #order_review {
position: absolute;
left: -9999px;
top: 0;
width: 640px;
}
/* With one column on screen the two column grid has nothing to align to. */
form.checkout.tp-step-shipping,
form.checkout.tp-step-payment {
display: block;
}
form.checkout.tp-step-shipping #customer_details,
form.checkout.tp-step-shipping .tp-step-nav--forward,
form.checkout.tp-step-payment #order_review,
form.checkout.tp-step-payment #order_review_heading,
form.checkout.tp-step-payment .tp-step-nav--back {
width: 100%;
max-width: 640px;
float: none;
margin-left: auto;
margin-right: auto;
}
/* --- Step navigation ------------------------------------------------------- */
.tp-step-nav {
margin: 8px 0 0;
}
.tp-step-nav--back {
margin: 0 0 16px;
}
/* Matches Place order on step 3. The theme styles that button by id, so none
of its shape reaches this one: measured differences were the radius (4 vs
6px), the font size (15 vs 17px) and the height (47.5 vs 52px). */
.woocommerce-checkout .tp-step-continue {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 52px;
padding: 0 17px;
border-radius: 6px;
font-size: 17px;
line-height: 52px;
}
/* A quiet link rather than a second call to action competing with Place order. */
.woocommerce-checkout .tp-step-back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
background: none;
color: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.woocommerce-checkout .tp-step-back::before {
content: "\2190";
}
.woocommerce-checkout .tp-step-back:hover,
.woocommerce-checkout .tp-step-back:focus-visible {
color: #00A99D;
}
/* The acceptance line runs to two lines at this width, so the box needs to sit
against the first one rather than centred on the block. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .form-row label.checkbox {
display: flex;
align-items: flex-start;
gap: 0;
}
/* --- Checkout: payment methods card ---------------------------------------- */
/* Two gateways now, so the :only-child rules above stop applying by
themselves and the radios come back. The list is presented as one bordered
card with a hairline between choices, matching the reference design. */
.tp-payment-intro {
margin: 0 0 14px;
font-size: 14px;
color: #767676;
}
.woocommerce-checkout #payment ul.payment_methods {
margin: 0;
padding: 0;
border: 1px solid #E3E5E8;
border-radius: 10px;
background: #FFFFFF;
overflow: hidden;
list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods > li {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 18px 20px;
border-top: 1px solid #E3E5E8;
list-style: none;
background: none;
}
.woocommerce-checkout #payment ul.payment_methods > li:first-child {
border-top: 0;
}
/* Radio and title sit together on the left, gateway icons on the right. */
/* Stripe's stylesheet gives its own label a left padding that the other
gateways do not have, which left the two titles 21px out of line. Only the
padding needs !important -- everything else in this rule already applies. */
.woocommerce-checkout #payment ul.payment_methods > li > label {
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 12px;
margin: 0;
padding-left: 0 !important;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
font-size: 15px;
font-weight: 600;
line-height: 1.35;
cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"] {
-webkit-appearance: none;
appearance: none;
flex: 0 0 20px;
width: 20px;
height: 20px;
margin: 0;
border: 2px solid #C9CDD2;
border-radius: 50%;
background: #FFFFFF;
position: relative;
cursor: pointer;
transition: border-color .2s ease;
}
.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"]:hover {
border-color: #00A99D;
}
.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"]:checked {
border-color: #00A99D;
}
.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"]:checked::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #00A99D;
}
.woocommerce-checkout #payment ul.payment_methods > li > input[type="radio"]:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 169, 157, .22);
}
/* Gateway icons, where a gateway supplies them. */
.woocommerce-checkout #payment ul.payment_methods > li > label img {
max-height: 24px;
width: auto;
margin: 0 0 0 4px;
float: none;
display: inline-block;
vertical-align: middle;
}
/* The gateway's own panel drops below the row it belongs to. */
.woocommerce-checkout #payment ul.payment_methods > li > .payment_box {
flex: 1 0 100%;
margin: 14px 0 0;
padding: 14px 16px;
border-radius: 8px;
background: #F7F8F9;
font-size: 14px;
line-height: 1.55;
}
.woocommerce-checkout #payment ul.payment_methods > li > .payment_box::before {
display: none;
}
/* Bank transfer instructions are entered as plain text with blank lines. */
.woocommerce-checkout #payment ul.payment_methods > li.payment_method_bacs .payment_box p {
margin: 0 0 10px;
}
.woocommerce-checkout #payment ul.payment_methods > li.payment_method_bacs .payment_box p:last-child {
margin-bottom: 0;
}
/* --- Checkout: no flicker before the step script runs ----------------------- */
/* The step script only runs once the document has been parsed, so for a
moment both columns are on screen and then one disappears. The form is
held behind a spinner until the script has chosen a step.
Gated on a class an inline script adds to : with JavaScript off the
class never appears, nothing is ever hidden, and the checkout still works
as one long form. `visibility` rather than `display` so the payment iframe
keeps real dimensions while it waits. */
html.tp-checkout-js form.checkout:not(.tp-step-shipping):not(.tp-step-payment) {
position: relative;
min-height: 260px;
}
html.tp-checkout-js form.checkout:not(.tp-step-shipping):not(.tp-step-payment) > * {
visibility: hidden;
}
html.tp-checkout-js form.checkout:not(.tp-step-shipping):not(.tp-step-payment)::after {
content: "";
position: absolute;
top: 80px;
left: 50%;
margin-left: -17px;
width: 34px;
height: 34px;
box-sizing: border-box;
border: 3px solid #E6E6E6;
border-top-color: #00A99D;
border-radius: 50%;
animation: tp-checkout-spin .7s linear infinite;
}
@keyframes tp-checkout-spin {
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: reduce) {
html.tp-checkout-js form.checkout:not(.tp-step-shipping):not(.tp-step-payment)::after {
animation: none;
}
}
/* The coupon form is printed above the checkout form and only moved under the
order summary once its script runs, so it sat outside the spinner and was
visible in the wrong place for a moment. Keyed on the marker that script
sets after the move, so the two are never out of step. `visibility` keeps
its space reserved, which means the shift happens behind the spinner. */
html.tp-checkout-js .coupon-wrapper:not([data-tp-moved]) {
visibility: hidden;
}
/* The guest login prompt and its form are printed before the checkout form, so
the centring applied to the step columns never reached them and they ran the
full width of the page while everything below sat in a 640px column. */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout form.woocommerce-form-login {
width: 100%;
max-width: 640px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
/* The notice carries its own bottom margin; the form should sit under it
rather than against it. */
.woocommerce-checkout form.woocommerce-form-login {
margin-top: 16px;
}
/* --- Pay for order page ----------------------------------------------------- */
/* This page renders a form of its own -- `#order_review`, with no `checkout`
class -- so none of the column rules used elsewhere reach it and it ran the
full content width while every other checkout screen sits in a 640px
column. */
body.woocommerce-order-pay form#order_review {
/* It reuses the `order_review` id of the checkout's right hand column, so
it inherits that column's float -- and a floated box ignores auto side
margins, which is why it sat hard against the right edge. */
float: none;
width: 100%;
max-width: 640px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
/* The login prompt shown before payment gets the same column, and needs its
side margins reset because the theme sets a fixed pair. */
body.woocommerce-order-pay form.woocommerce-form-login,
body.woocommerce-order-pay .woocommerce-notices-wrapper {
width: 100%;
max-width: 640px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
/* ------------------------------------------------------------------ */
/* EasyParcel tracking timeline */
/* ------------------------------------------------------------------ */
.tp-tracking {
margin-top: 2rem;
margin-bottom: 2rem;
}
.tp-tracking__heading {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: .75rem;
}
.tp-tracking__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .5rem 1rem;
margin-bottom: 1.25rem;
font-size: .875rem;
color: #666;
}
.tp-tracking__courier {
font-weight: 600;
color: #333;
}
.tp-tracking__ext-link {
margin-left: auto;
}
.tp-tracking__empty {
font-size: .875rem;
color: #999;
padding: 1rem;
border: 1px dashed #ddd;
border-radius: 4px;
}
.tp-tracking__timeline {
list-style: none;
margin: 0;
padding: 0;
}
.tp-tracking__item {
display: flex;
gap: .75rem;
padding-bottom: 1.25rem;
position: relative;
}
.tp-tracking__item:last-child {
padding-bottom: 0;
}
/* Vertical connector line */
.tp-tracking__item::before {
content: '';
position: absolute;
left: 10px;
top: 24px;
bottom: 0;
width: 2px;
background: #e5e5e5;
}
.tp-tracking__item:last-child::before {
display: none;
}
/* Dot */
.tp-tracking__dot {
min-width: 22px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #ddd;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #ddd;
margin-top: 1px;
margin-left: -1px;
}
.tp-tracking__dot--active {
background: #007cba;
box-shadow: 0 0 0 2px #007cba;
}
.tp-tracking__dot--transit {
background: #ffa500;
box-shadow: 0 0 0 2px #ffa500;
}
.tp-tracking__dot--delivered {
background: #46b450;
box-shadow: 0 0 0 2px #46b450;
}
.tp-tracking__dot--returned {
background: #dc3232;
box-shadow: 0 0 0 2px #dc3232;
}
/* Content */
.tp-tracking__body {
padding-top: 2px;
}
.tp-tracking__status {
font-size: .9375rem;
font-weight: 500;
margin: 0 0 .1rem;
}
.tp-tracking__item--latest .tp-tracking__status {
font-weight: 600;
}
.tp-tracking__detail {
font-size: .8125rem;
color: #777;
margin: 0;
}
/* My Account → Orders: status label links to tracking history */
.woocommerce-orders-table__cell-order-status > a {
font-weight: 600;
color: #000;
text-decoration: underline;
text-underline-offset: 2px;
}
.woocommerce-orders-table__cell-order-status > a:hover,
.woocommerce-orders-table__cell-order-status > a:focus {
color: #e91e8c;
text-decoration: underline;
}
@media (max-width: 767px) {
#content {
overflow-x: hidden;
}
}
/* Mobile header: My Account icon next to cart */
@media (max-width: 992px) {
.main-header .secondary-navigation {
display: block;
position: absolute;
right: 56px;
top: 0;
bottom: 0;
z-index: 3;
padding: 0;
float: none;
margin: 0;
display: flex;
align-items: center;
}
.main-header .secondary-navigation > div,
.main-header .secondary-navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
/* Only My Account icon; hide Cart and Checkout items */
.main-header .secondary-navigation ul li:nth-child(n+2) {
display: none !important;
}
.main-header .secondary-navigation ul li {
list-style: none;
border: 0 !important;
padding: 0 !important;
margin: 0;
}
.main-header .secondary-navigation ul li a {
display: flex;
align-items: center;
padding: 0 !important;
font-size: 0;
color: transparent;
line-height: 0;
}
.main-header .secondary-navigation .icon-wrapper {
display: flex;
align-items: center;
}
.main-header .secondary-navigation .icon-wrapper svg {
width: 26px;
height: 26px;
stroke: #111;
}
}
/* Stripe card authorization notice on checkout */
.tp-stripe-card-notice {
font-size: 13px;
color: #6d6d6d;
margin-top: 10px;
line-height: 1.5;
}
/* ==========================================================================
[delivery_estimate] - delivery window notice in the checkout order table
========================================================================== */
tr.tp-delivery-estimate th {
padding-top: 10px;
padding-bottom: 14px;
font-weight: normal;
border-bottom: 2px solid #1a1a2e !important;
}
tr.tp-delivery-estimate p {
display: flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 8px 10px;
font-size: 13px;
line-height: 1.4;
color: #555d6b;
background: #f4f6fa;
border-radius: 6px;
}
.tp-delivery-icon {
flex-shrink: 0;
color: #555d6b;
}
/* ==========================================================================
[price_filter_inputs] - manual min/max number fields in the price filter widget
.price_slider_amount is a flex row (Shoptimizer theme); wrap it so our
inputs row sits on its own line above the Filter button + price label.
========================================================================== */
.widget_price_filter .price_slider_amount {
flex-wrap: wrap;
align-items: center;
gap: 0;
}
.tp-price-inputs {
display: flex;
align-items: center;
gap: 6px;
flex: 0 0 100%;
width: 100%;
margin-bottom: 10px;
}
.tp-price-input {
flex: 1 1 0;
min-width: 0;
padding: 2px 6px;
border: 1px solid #d0d0d0;
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
height: 28px;
color: #444;
text-align: center;
background: #fff;
box-sizing: border-box;
-moz-appearance: textfield;
}
.tp-price-input::-webkit-outer-spin-button,
.tp-price-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.tp-price-input:focus {
outline: none;
border-color: #888;
box-shadow: 0 0 0 2px rgba(0, 0, 0, .06);
}
.tp-price-sep {
color: #aaa;
font-size: 13px;
flex-shrink: 0;
line-height: 1;
}
|