, but collapse the three right-hand areas into
one column so the stacking order can't break even if a | renders
unexpectedly (e.g. theme injects extra markup).
========================================================================= */
@media (max-width: 760px) {
body.woocommerce-cart .common-content-block .container {
padding: 0 var(--pics-s-2) !important;
}
body.woocommerce-cart form.woocommerce-cart-form,
body.woocommerce-cart .woocommerce-cart-form {
border-radius: var(--pics-radius) !important;
}
body.woocommerce-cart table.shop_table.cart,
body.woocommerce-cart .woocommerce table.shop_table.cart {
display: block !important;
width: 100% !important;
font-size: var(--pics-fs-base) !important;
border-collapse: collapse !important;
table-layout: auto !important;
}
body.woocommerce-cart table.shop_table.cart thead { display: none !important; }
body.woocommerce-cart table.shop_table.cart colgroup { display: none !important; }
body.woocommerce-cart table.shop_table.cart tbody {
display: block !important;
width: 100% !important;
}
body.woocommerce-cart table.shop_table.cart tbody tr.cart_item,
body.woocommerce-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
display: grid !important;
grid-template-columns: 80px minmax(0, 1fr) !important;
grid-template-rows: auto auto auto !important;
grid-template-areas:
"thumb name"
"thumb price"
"thumb foot" !important;
column-gap: var(--pics-s-3) !important;
row-gap: 8px !important;
align-items: start !important;
padding: var(--pics-s-4) var(--pics-s-3) !important;
border-bottom: 1px solid var(--pics-border-soft) !important;
position: relative !important;
}
body.woocommerce-cart table.shop_table.cart tbody tr.cart_item:last-child,
body.woocommerce-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item:last-child {
border-bottom: 0 !important;
}
body.woocommerce-cart table.shop_table.cart tbody td {
display: block !important;
padding: 0 !important;
border: 0 !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
vertical-align: baseline !important;
background: transparent !important;
}
/* Thumbnail — pinned left, spans all three rows of the card */
body.woocommerce-cart table.shop_table.cart td.product-thumbnail {
grid-area: thumb !important;
grid-row: 1 / span 3 !important;
width: 80px !important;
padding: 0 !important;
align-self: start !important;
}
body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
width: 80px !important;
height: 80px !important;
max-width: 80px !important;
border-radius: var(--pics-radius) !important;
border: 1px solid var(--pics-border-soft) !important;
object-fit: cover !important;
display: block !important;
}
/* Product name — fills the top row, leaves room for the × absolute pip */
body.woocommerce-cart table.shop_table.cart td.product-name {
grid-area: name !important;
align-self: start !important;
font-size: var(--pics-fs-md) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--pics-dark) !important;
padding: 0 32px 0 0 !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
body.woocommerce-cart table.shop_table.cart td.product-name a {
font-size: var(--pics-fs-md) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: var(--pics-dark) !important;
text-decoration: none !important;
}
/* Unit-price row — muted line with inline label, followed by a hairline */
body.woocommerce-cart table.shop_table.cart td.product-price {
grid-area: price !important;
display: flex !important;
align-items: baseline !important;
gap: var(--pics-s-2) !important;
text-align: left !important;
font-size: var(--pics-fs-sm) !important;
color: var(--pics-muted) !important;
font-weight: 600 !important;
padding-bottom: var(--pics-s-3) !important;
border-bottom: 1px dashed var(--pics-border-soft) !important;
}
body.woocommerce-cart table.shop_table.cart td.product-price::before {
content: "Unit price";
text-transform: uppercase;
letter-spacing: 0.09em;
font-size: var(--pics-fs-micro);
font-weight: 800;
color: var(--pics-muted-2);
flex: 0 0 auto;
}
/* Footer row — qty on the left, subtotal on the right, sharing a grid. */
body.woocommerce-cart table.shop_table.cart td.product-quantity {
grid-area: foot !important;
grid-column: 2 / 3 !important;
justify-self: start !important;
align-self: center !important;
text-align: left !important;
}
body.woocommerce-cart table.shop_table.cart td.product-subtotal {
grid-area: foot !important;
grid-column: 2 / 3 !important;
justify-self: end !important;
align-self: center !important;
text-align: right !important;
font-size: var(--pics-fs-lg) !important;
font-weight: 800 !important;
color: var(--pics-dark) !important;
white-space: nowrap !important;
letter-spacing: -0.01em !important;
}
body.woocommerce-cart table.shop_table.cart td.product-quantity::before {
content: "Quantity";
display: block;
font-size: var(--pics-fs-micro);
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--pics-muted-2);
margin-bottom: 4px;
}
body.woocommerce-cart table.shop_table.cart td.product-subtotal::before {
content: "Total";
display: block;
font-size: var(--pics-fs-micro);
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--pics-muted-2);
margin-bottom: 4px;
text-align: right;
}
body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity {
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
}
body.woocommerce-cart table.shop_table.cart td.product-quantity .quantity input,
body.woocommerce-cart table.cart .quantity input {
width: 64px !important;
max-width: 64px !important;
height: 40px !important;
padding: 0 var(--pics-s-2) !important;
font-size: var(--pics-fs-base) !important;
font-weight: 700 !important;
}
/* Remove — floats to the top-right corner of the whole card, out of flow. */
body.woocommerce-cart table.shop_table.cart td.product-remove {
position: absolute !important;
top: 10px !important;
right: 10px !important;
width: auto !important;
padding: 0 !important;
margin: 0 !important;
}
body.woocommerce-cart table.shop_table.cart td.product-remove a.remove {
width: 26px !important;
height: 26px !important;
font-size: 16px !important;
}
/* Actions row — coupon on top (input + apply), update-cart below full-width */
body.woocommerce-cart table.shop_table.cart tr:has(td.actions) { display: block !important; }
html body.woocommerce-cart table.shop_table.cart td.actions,
html body.woocommerce-cart table.shop_table td.actions,
html body.woocommerce-cart table.cart td.actions {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
flex-wrap: nowrap !important;
gap: var(--pics-s-3) !important;
padding: var(--pics-s-4) !important;
width: 100% !important;
background: var(--pics-bg) !important;
border-top: 1px solid var(--pics-border) !important;
border-radius: 0 0 var(--pics-radius) var(--pics-radius) !important;
}
html body.woocommerce-cart table.shop_table.cart td.actions .coupon,
html body.woocommerce-cart table.shop_table td.actions .coupon,
html body.woocommerce-cart table.cart td.actions .coupon {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
flex-wrap: nowrap !important;
gap: var(--pics-s-2) !important;
width: 100% !important;
max-width: none !important;
flex: 0 0 auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-cart table.shop_table.cart td.actions .coupon label,
body.woocommerce-cart table.cart td.actions .coupon label {
display: none !important;
}
html body.woocommerce-cart table.shop_table.cart td.actions .coupon input[type="text"],
html body.woocommerce-cart table.shop_table td.actions .coupon input[type="text"],
html body.woocommerce-cart table.cart td.actions .coupon input[type="text"],
html body.woocommerce-cart table.shop_table.cart td.actions .coupon input.input-text,
html body.woocommerce-cart table.shop_table td.actions .coupon input.input-text,
html body.woocommerce-cart table.cart td.actions .coupon input.input-text,
html body.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text,
html body.woocommerce-cart table.shop_table td.actions .coupon .input-text,
html body.woocommerce-cart table.cart td.actions .coupon .input-text {
flex: 1 1 0% !important;
min-width: 0 !important;
width: 100% !important;
max-width: none !important;
padding: 0 var(--pics-s-3) !important;
font-size: var(--pics-fs-base) !important;
height: 44px !important;
margin: 0 !important;
display: block !important;
visibility: visible !important;
box-sizing: border-box !important;
}
html body.woocommerce-cart table.shop_table.cart td.actions .coupon button[name="apply_coupon"],
html body.woocommerce-cart table.shop_table td.actions .coupon button[name="apply_coupon"],
html body.woocommerce-cart table.cart td.actions .coupon button[name="apply_coupon"] {
flex: 0 0 auto !important;
padding: 0 var(--pics-s-4) !important;
height: 44px !important;
width: auto !important;
min-width: 0 !important;
font-size: var(--pics-fs-sm) !important;
white-space: nowrap !important;
margin: 0 !important;
}
html body.woocommerce-cart table.shop_table.cart td.actions button[name="update_cart"],
html body.woocommerce-cart table.shop_table td.actions button[name="update_cart"],
html body.woocommerce-cart table.cart td.actions button[name="update_cart"] {
align-self: stretch !important;
float: none !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 var(--pics-s-5) !important;
height: 44px !important;
font-size: var(--pics-fs-sm) !important;
}
body.woocommerce-cart .cart-collaterals,
body.woocommerce-cart .woocommerce .cart-collaterals {
display: block !important;
margin-top: var(--pics-s-5) !important;
padding-left: 0 !important;
}
body.woocommerce-cart .cart-collaterals .cart_totals,
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
width: 100% !important;
max-width: 100% !important;
padding: var(--pics-s-5) !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .cart-collaterals .cart_totals h2 { font-size: var(--pics-fs-md) !important; }
body.woocommerce-cart .cart-collaterals .cart_totals tr.order-total td { font-size: 19px !important; }
body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
padding: var(--pics-s-3) var(--pics-s-4) !important;
font-size: var(--pics-fs-base) !important;
}
}
@media (max-width: 400px) {
body.woocommerce-cart table.shop_table.cart tbody tr.cart_item,
body.woocommerce-cart table.shop_table.cart tbody tr.woocommerce-cart-form__cart-item {
grid-template-columns: 64px minmax(0, 1fr) !important;
column-gap: var(--pics-s-2) !important;
padding: var(--pics-s-3) !important;
}
body.woocommerce-cart table.shop_table.cart td.product-thumbnail,
body.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
width: 64px !important;
height: 64px !important;
max-width: 64px !important;
}
body.woocommerce-cart table.shop_table.cart td.product-name,
body.woocommerce-cart table.shop_table.cart td.product-name a {
font-size: var(--pics-fs-base) !important;
}
body.woocommerce-cart table.shop_table.cart td.product-subtotal {
font-size: var(--pics-fs-md) !important;
}
}
/* =========================================================================
CHECKOUT — PAGE LAYOUT (CSS Grid two columns, sticky review)
========================================================================= */
body.woocommerce-checkout form.checkout.woocommerce-checkout {
display: grid !important;
grid-template-columns: 30fr 30fr 40fr !important;
grid-template-areas:
"notices notices notices"
"coupon coupon coupon"
"login login login"
"billing shipping review"
"extra extra review" !important;
gap: var(--pics-s-5) var(--pics-s-5) !important;
align-items: start !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Promote #customer_details children into the outer grid so billing / shipping
sit side-by-side as independent columns. */
body.woocommerce-checkout form.checkout.woocommerce-checkout > #customer_details,
body.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details {
display: contents !important;
width: auto !important;
max-width: none !important;
float: none !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details .col-2 {
display: block !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details .col-1 { grid-area: billing !important; }
body.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details .col-2 { grid-area: shipping !important; }
body.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details .col-2:empty { display: none !important; }
/* Fulfilment now sits inside #order_review — strip the card chrome so it reads as a
subsection, not a nested card. Keep the title + red bar; drop its internal divider
so only one line sits between "Your Order" and the items. */
body.woocommerce-checkout #order_review .pics-fulfilment-section {
margin: 0 0 var(--pics-s-6) 0 !important;
padding: 0 0 var(--pics-s-6) 0 !important;
border: 0 !important;
border-bottom: 1px solid var(--pics-border-soft) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
body.woocommerce-checkout #order_review .pics-fulfilment-section__header {
padding: 0 !important;
margin: 0 0 var(--pics-s-3) 0 !important;
border: 0 !important;
}
body.woocommerce-checkout #order_review .pics-fulfilment-section__title {
font-size: var(--pics-fs-base) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--pics-muted) !important;
font-weight: 700 !important;
}
body.woocommerce-checkout #order_review .pics-fulfilment-section__title::before {
display: none !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-additional-fields { grid-area: extra !important; min-width: 0 !important; }
/* The theme's standalone h3#order_review_heading becomes the card header inside #order_review */
body.woocommerce-checkout form.checkout.woocommerce-checkout h3#order_review_heading { display: none !important; }
body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review { grid-area: review !important; min-width: 0 !important; }
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-NoticeGroup,
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-notices-wrapper { grid-area: notices !important; }
body.woocommerce-checkout form.checkout.woocommerce-checkout form.checkout_coupon,
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-form-coupon-toggle,
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { grid-area: coupon !important; }
body.woocommerce-checkout form.checkout.woocommerce-checkout form.login { grid-area: login !important; }
/* Top-of-page coupon/login notices sit above grid */
body.woocommerce-checkout .woocommerce > .woocommerce-notices-wrapper,
body.woocommerce-checkout .woocommerce > form.checkout_coupon,
body.woocommerce-checkout .woocommerce > form.login {
margin-bottom: var(--pics-s-5) !important;
}
/* Tablet — collapse to 2 columns (billing+shipping stack, review beside) */
@media (max-width: 1180px) {
body.woocommerce-checkout form.checkout.woocommerce-checkout {
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
grid-template-areas:
"notices notices"
"coupon coupon"
"login login"
"billing review"
"shipping review"
"extra review" !important;
gap: var(--pics-s-5) !important;
}
}
/* Mobile — collapse all to single column */
@media (max-width: 900px) {
body.woocommerce-checkout form.checkout.woocommerce-checkout {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas:
"notices"
"coupon"
"login"
"billing"
"shipping"
"review"
"extra" !important;
gap: var(--pics-s-5) !important;
}
}
/* =========================================================================
CHECKOUT — CARD SECTIONS
========================================================================= */
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields {
background: var(--pics-card) !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius-lg) !important;
padding: var(--pics-s-6) !important;
box-shadow: var(--pics-shadow-sm) !important;
margin-bottom: 0 !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-billing-fields h3,
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-shipping-fields h3,
body.woocommerce-checkout form.checkout.woocommerce-checkout .woocommerce-additional-fields h3 {
font-size: var(--pics-fs-lg) !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
margin: 0 0 var(--pics-s-4) 0 !important;
padding-bottom: var(--pics-s-3) !important;
border-bottom: 1px solid var(--pics-border-soft) !important;
display: flex !important;
align-items: center !important;
gap: var(--pics-s-2) !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
line-height: 1.3 !important;
}
body.woocommerce-checkout .woocommerce-billing-fields h3::before,
body.woocommerce-checkout .woocommerce-shipping-fields h3::before,
body.woocommerce-checkout .woocommerce-additional-fields h3::before {
content: "" !important;
display: inline-block !important;
width: 3px !important;
height: 18px !important;
border-radius: 2px !important;
background: var(--pics-red) !important;
}
/* =========================================================================
CHECKOUT — FORM FIELDS
========================================================================= */
body.woocommerce-checkout .form-row,
body.woocommerce-checkout form.checkout .form-row {
margin: 0 0 var(--pics-s-4) 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout .form-row label,
body.woocommerce-checkout form.checkout .form-row label {
display: block !important;
font-size: var(--pics-fs-sm) !important;
font-weight: 600 !important;
color: var(--pics-dark) !important;
margin: 0 0 var(--pics-s-1) 0 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
line-height: 1.4 !important;
}
body.woocommerce-checkout .form-row label .required,
body.woocommerce-checkout .form-row abbr.required {
color: var(--pics-red) !important;
border: none !important;
text-decoration: none !important;
}
body.woocommerce-checkout .form-row .optional {
color: var(--pics-muted) !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout form.checkout .form-row input.input-text,
body.woocommerce-checkout form.checkout .form-row textarea,
body.woocommerce-checkout form.checkout .form-row select,
body.woocommerce-checkout .select2-container .select2-selection--single {
width: 100% !important;
padding: var(--pics-s-3) !important;
font-size: var(--pics-fs-md) !important;
font-family: var(--pics-font) !important;
color: var(--pics-dark) !important;
background: #fff !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius) !important;
line-height: 1.4 !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
box-sizing: border-box !important;
height: auto !important;
box-shadow: none !important;
}
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout form.checkout .form-row textarea {
min-height: 96px !important;
resize: vertical !important;
}
body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus,
body.woocommerce-checkout .select2-container--focus .select2-selection--single,
body.woocommerce-checkout .select2-container--open .select2-selection--single {
border-color: var(--pics-red) !important;
outline: none !important;
box-shadow: var(--pics-focus) !important;
}
body.woocommerce-checkout .select2-container .select2-selection--single {
display: flex !important;
align-items: center !important;
height: 46px !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0 !important;
color: var(--pics-dark) !important;
line-height: 1.4 !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 44px !important;
right: 8px !important;
}
body.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
body.woocommerce-checkout .form-row.woocommerce-invalid textarea,
body.woocommerce-checkout .form-row.woocommerce-invalid select {
border-color: var(--pics-red) !important;
box-shadow: 0 0 0 3px rgba(255, 41, 58, 0.12) !important;
}
body.woocommerce-checkout .form-row.woocommerce-validated input.input-text,
body.woocommerce-checkout .form-row.woocommerce-validated textarea {
border-color: var(--pics-green) !important;
}
body.woocommerce-checkout #ship-to-different-address {
display: flex !important;
align-items: center !important;
gap: var(--pics-s-2) !important;
margin: 0 0 var(--pics-s-3) 0 !important;
}
body.woocommerce-checkout #ship-to-different-address label {
font-size: var(--pics-fs-md) !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
margin: 0 !important;
cursor: pointer !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
body.woocommerce-checkout #ship-to-different-address input[type="checkbox"] {
width: 18px !important;
height: 18px !important;
accent-color: var(--pics-red) !important;
cursor: pointer !important;
}
/* =========================================================================
FULFILMENT — left-aligned delivery method selector
========================================================================= */
body.woocommerce-checkout .pics-fulfilment-section {
background: var(--pics-card) !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius-lg) !important;
padding: var(--pics-s-6) !important;
box-shadow: var(--pics-shadow-sm) !important;
margin-bottom: 0 !important;
font-family: var(--pics-font) !important;
}
body.woocommerce-checkout .pics-fulfilment-section__header {
padding-bottom: var(--pics-s-3) !important;
margin-bottom: var(--pics-s-4) !important;
border-bottom: 1px solid var(--pics-border-soft) !important;
}
body.woocommerce-checkout .pics-fulfilment-section__title,
body.woocommerce-checkout form.checkout .pics-fulfilment-section__title {
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-lg) !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
line-height: 1.3 !important;
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: var(--pics-s-2) !important;
}
body.woocommerce-checkout .pics-fulfilment-section__title::before {
content: "" !important;
display: inline-block !important;
width: 3px !important;
height: 18px !important;
border-radius: 2px !important;
background: var(--pics-red) !important;
}
/* Stack options vertically, left-aligned */
body.woocommerce-checkout .pics-fulfilment-options {
display: flex !important;
flex-direction: column !important;
gap: var(--pics-s-2) !important;
}
body.woocommerce-checkout .pics-fulfilment-option {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: var(--pics-s-3) !important;
padding: var(--pics-s-3) var(--pics-s-4) !important;
background: #fff !important;
border: 1.5px solid var(--pics-border) !important;
border-radius: var(--pics-radius) !important;
cursor: pointer !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout .pics-fulfilment-option:hover {
border-color: var(--pics-dark-soft) !important;
box-shadow: var(--pics-shadow-sm) !important;
}
body.woocommerce-checkout .pics-fulfilment-option input[type="radio"] {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.woocommerce-checkout .pics-fulfilment-option.is-selected {
border-color: var(--pics-red) !important;
background: #fffafb !important;
}
body.woocommerce-checkout .pics-fulfilment-option__icon {
flex-shrink: 0 !important;
width: 36px !important;
height: 36px !important;
border-radius: var(--pics-radius) !important;
background: var(--pics-bg) !important;
color: var(--pics-dark) !important;
display: grid !important;
place-items: center !important;
transition: background 0.18s ease, color 0.18s ease !important;
}
body.woocommerce-checkout .pics-fulfilment-option__icon svg { width: 20px !important; height: 20px !important; }
body.woocommerce-checkout .pics-fulfilment-option.is-selected .pics-fulfilment-option__icon {
background: var(--pics-red) !important;
color: #fff !important;
}
body.woocommerce-checkout .pics-fulfilment-option__body {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: left !important;
}
body.woocommerce-checkout .pics-fulfilment-option__label {
font-size: var(--pics-fs-md) !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
letter-spacing: -0.005em !important;
display: inline-flex !important;
align-items: center !important;
gap: var(--pics-s-2) !important;
flex-wrap: wrap !important;
}
body.woocommerce-checkout .pics-fulfilment-option__cost {
font-size: var(--pics-fs-sm) !important;
font-weight: 600 !important;
color: var(--pics-muted) !important;
background: var(--pics-bg) !important;
padding: 2px var(--pics-s-2) !important;
border-radius: 3px !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
body.woocommerce-checkout .pics-fulfilment-option__cost--free {
color: var(--pics-green) !important;
background: var(--pics-green-soft) !important;
}
body.woocommerce-checkout .pics-fulfilment-option__desc {
font-size: var(--pics-fs-sm) !important;
color: var(--pics-muted) !important;
line-height: 1.5 !important;
font-weight: 400 !important;
}
body.woocommerce-checkout .pics-fulfilment-option__check {
flex-shrink: 0 !important;
width: 20px !important;
height: 20px !important;
border: 1.5px solid var(--pics-border) !important;
border-radius: 50% !important;
background: #fff !important;
transition: border-color 0.18s ease, background 0.18s ease !important;
position: relative !important;
}
body.woocommerce-checkout .pics-fulfilment-option.is-selected .pics-fulfilment-option__check {
border-color: var(--pics-red) !important;
background: var(--pics-red) !important;
}
body.woocommerce-checkout .pics-fulfilment-option.is-selected .pics-fulfilment-option__check::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 6px !important;
height: 10px !important;
border: solid #fff !important;
border-width: 0 2px 2px 0 !important;
transform: translate(-50%, -60%) rotate(45deg) !important;
}
body.woocommerce-checkout .pics-fulfilment-option input[type="radio"]:focus-visible ~ .pics-fulfilment-option__check {
box-shadow: var(--pics-focus) !important;
outline: none !important;
}
body.woocommerce-checkout .pics-collection-depot-info {
margin: var(--pics-s-4) 0 0 0 !important;
border-radius: var(--pics-radius) !important;
font-size: var(--pics-fs-base) !important;
line-height: 1.55 !important;
}
/* =========================================================================
CART — FULFILMENT INSIDE TOTALS CARD
Replaces the default WooCommerce shipping row. The |
sits inside
.shop_table.cart_totals, so the toggle inherits the card's chrome.
========================================================================= */
body.woocommerce-cart .shop_table tr.pics-cart-fulfilment-row,
body.woocommerce-cart .shop_table tr.pics-cart-fulfilment-row:hover {
background: transparent !important;
border: 0 !important;
}
body.woocommerce-cart .shop_table td.pics-cart-fulfilment-cell {
padding: 0 0 var(--pics-s-4) 0 !important;
border: 0 !important;
background: transparent !important;
}
/* Hide the default WooCommerce shipping row — our fulfilment toggle is the
single source of truth for delivery method selection on the cart. */
body.woocommerce-cart .cart_totals .shop_table tr.cart-shipping,
body.woocommerce-cart .cart_totals .shop_table tr.woocommerce-shipping-totals,
body.woocommerce-cart .cart_totals .shop_table tr.shipping {
display: none !important;
}
/* Strip the section's own card chrome (it's already inside the totals card). */
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-section {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
margin: 0 !important;
font-family: var(--pics-font) !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-section__header {
padding: 0 0 var(--pics-s-2) 0 !important;
margin: 0 0 var(--pics-s-3) 0 !important;
border-bottom: 1px dashed var(--pics-border-soft) !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-section__title {
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-sm) !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
margin: 0 !important;
padding: 0 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
text-align: left !important;
display: flex !important;
align-items: center !important;
gap: var(--pics-s-2) !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-section__title::before {
content: "" !important;
display: inline-block !important;
width: 3px !important;
height: 12px !important;
border-radius: 2px !important;
background: var(--pics-red) !important;
}
/* Stack options vertically — compact variant of the checkout toggle. */
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-options {
display: flex !important;
flex-direction: column !important;
gap: var(--pics-s-2) !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: var(--pics-s-3) !important;
padding: var(--pics-s-3) !important;
background: #fff !important;
border: 1.5px solid var(--pics-border) !important;
border-radius: var(--pics-radius) !important;
cursor: pointer !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
margin: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option:hover {
border-color: var(--pics-dark-soft) !important;
box-shadow: var(--pics-shadow-sm) !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option input[type="radio"] {
position: absolute !important;
opacity: 0 !important;
pointer-events: none !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option.is-selected {
border-color: var(--pics-red) !important;
background: #fffafb !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__icon {
flex-shrink: 0 !important;
width: 32px !important;
height: 32px !important;
border-radius: var(--pics-radius) !important;
background: var(--pics-bg) !important;
color: var(--pics-dark) !important;
display: grid !important;
place-items: center !important;
transition: background 0.18s ease, color 0.18s ease !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__icon svg {
width: 18px !important;
height: 18px !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option.is-selected .pics-fulfilment-option__icon {
background: var(--pics-red) !important;
color: #fff !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__body {
flex: 1 1 auto !important;
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
text-align: left !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__label {
font-size: var(--pics-fs-base) !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
letter-spacing: -0.005em !important;
display: inline-flex !important;
align-items: center !important;
gap: var(--pics-s-2) !important;
flex-wrap: wrap !important;
line-height: 1.25 !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__cost {
font-size: 11px !important;
font-weight: 600 !important;
color: var(--pics-muted) !important;
background: var(--pics-bg) !important;
padding: 2px var(--pics-s-2) !important;
border-radius: 3px !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__cost--free {
color: var(--pics-green) !important;
background: var(--pics-green-soft) !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__desc {
font-size: var(--pics-fs-sm) !important;
color: var(--pics-muted) !important;
line-height: 1.45 !important;
font-weight: 400 !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__check {
flex-shrink: 0 !important;
width: 18px !important;
height: 18px !important;
border: 1.5px solid var(--pics-border) !important;
border-radius: 50% !important;
background: #fff !important;
transition: border-color 0.18s ease, background 0.18s ease !important;
position: relative !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option.is-selected .pics-fulfilment-option__check {
border-color: var(--pics-red) !important;
background: var(--pics-red) !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option.is-selected .pics-fulfilment-option__check::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 5px !important;
height: 9px !important;
border: solid #fff !important;
border-width: 0 2px 2px 0 !important;
transform: translate(-50%, -60%) rotate(45deg) !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option input[type="radio"]:focus-visible ~ .pics-fulfilment-option__check {
box-shadow: var(--pics-focus) !important;
outline: none !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-collection-depot-info {
margin: var(--pics-s-3) 0 0 0 !important;
border-radius: var(--pics-radius) !important;
font-size: var(--pics-fs-sm) !important;
line-height: 1.5 !important;
}
/* Mobile: keep the delivery toggle compact so it doesn't dominate the cart. */
@media (max-width: 600px) {
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option {
padding: var(--pics-s-2) var(--pics-s-3) !important;
gap: var(--pics-s-2) !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__icon {
width: 28px !important;
height: 28px !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__icon svg {
width: 16px !important;
height: 16px !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__label {
font-size: var(--pics-fs-sm) !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__desc {
font-size: 12px !important;
line-height: 1.4 !important;
}
body.woocommerce-cart .pics-cart-fulfilment-wrap .pics-fulfilment-option__check {
width: 16px !important;
height: 16px !important;
}
}
/* =========================================================================
CHECKOUT — ORDER REVIEW (sticky right column)
========================================================================= */
body.woocommerce-checkout h3#order_review_heading,
body.woocommerce-checkout form.checkout h3#order_review_heading {
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-lg) !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
margin: 0 !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
line-height: 1.3 !important;
}
body.woocommerce-checkout #order_review {
position: sticky !important;
top: var(--pics-s-6) !important;
background: var(--pics-card) !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius-lg) !important;
padding: var(--pics-s-6) !important;
box-shadow: var(--pics-shadow-sm) !important;
align-self: start !important;
width: 100% !important;
max-width: 100% !important;
}
@media (max-width: 1024px) {
body.woocommerce-checkout #order_review { position: static !important; }
}
/* Synthesized "Your Order" card header — matches billing/shipping treatment. */
body.woocommerce-checkout #order_review::before {
content: "Your Order" !important;
display: block !important;
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-lg) !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
letter-spacing: -0.01em !important;
line-height: 1.3 !important;
padding: 0 0 var(--pics-s-3) calc(3px + var(--pics-s-2)) !important;
margin: 0 0 var(--pics-s-4) 0 !important;
border-bottom: 1px solid var(--pics-border-soft) !important;
background: linear-gradient(var(--pics-red), var(--pics-red)) 0 4px / 3px 18px no-repeat !important;
}
/* Hide the duplicate WooCommerce shipping row — our pics-fulfilment-section is the
single source of truth for delivery method selection. */
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tr.cart-shipping,
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals,
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tr.shipping {
display: none !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table {
width: 100% !important;
border-collapse: collapse !important;
font-size: var(--pics-fs-base) !important;
margin: 0 !important;
background: transparent !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table thead { display: none !important; }
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tbody tr {
border-bottom: 1px dashed var(--pics-border-soft) !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tbody tr:last-child { border-bottom: 0 !important; }
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table .cart_item td {
padding: var(--pics-s-3) var(--pics-s-3) !important;
border: 0 !important;
vertical-align: top !important;
background: transparent !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table .cart_item .product-name {
color: var(--pics-dark) !important;
font-weight: 600 !important;
padding-right: var(--pics-s-3) !important;
font-size: var(--pics-fs-base) !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table .cart_item .product-quantity {
color: var(--pics-muted) !important;
font-weight: 400 !important;
margin-left: var(--pics-s-1) !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table .cart_item .product-total {
color: var(--pics-dark) !important;
font-weight: 700 !important;
text-align: right !important;
white-space: nowrap !important;
font-size: var(--pics-fs-base) !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot th {
padding: var(--pics-s-3) var(--pics-s-3) !important;
text-align: left !important;
font-weight: 600 !important;
color: var(--pics-muted) !important;
border: 0 !important;
text-transform: uppercase !important;
font-size: var(--pics-fs-micro) !important;
letter-spacing: 0.08em !important;
background: transparent !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot td {
padding: var(--pics-s-3) var(--pics-s-3) !important;
text-align: right !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
border: 0 !important;
background: transparent !important;
font-size: var(--pics-fs-base) !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total th {
font-size: var(--pics-fs-base) !important;
padding: var(--pics-s-4) var(--pics-s-3) !important;
border-top: 2px solid var(--pics-dark) !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--pics-dark) !important;
font-weight: 700 !important;
}
body.woocommerce-checkout .shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
padding: var(--pics-s-4) var(--pics-s-3) !important;
border-top: 2px solid var(--pics-dark) !important;
font-size: var(--pics-fs-xl) !important;
font-weight: 700 !important;
}
/* =========================================================================
CHECKOUT — PAYMENT (beat blue #F0F9FF bg)
========================================================================= */
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout #payment,
body.woocommerce #payment,
body.woocommerce-page #payment {
background: var(--pics-bg) !important;
border-radius: var(--pics-radius) !important;
margin-top: var(--pics-s-4) !important;
padding: var(--pics-s-1) !important;
}
body.woocommerce-checkout #payment ul.payment_methods {
padding: var(--pics-s-2) var(--pics-s-3) var(--pics-s-1) !important;
margin: 0 !important;
list-style: none !important;
background: transparent !important;
border-bottom: 1px solid var(--pics-border-soft) !important;
}
body.woocommerce-checkout #payment ul.payment_methods li {
padding: var(--pics-s-2) var(--pics-s-1) !important;
background: transparent !important;
list-style: none !important;
border: 0 !important;
}
body.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
accent-color: var(--pics-red) !important;
margin-right: var(--pics-s-2) !important;
}
body.woocommerce-checkout #payment ul.payment_methods li label {
font-size: var(--pics-fs-base) !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
cursor: pointer !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-cart #payment div.payment_box,
body.woocommerce-page #payment div.payment_box {
background: #fff !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius) !important;
padding: var(--pics-s-3) var(--pics-s-4) !important;
font-size: var(--pics-fs-sm) !important;
color: var(--pics-muted) !important;
line-height: 1.55 !important;
margin: var(--pics-s-2) 0 var(--pics-s-1) !important;
}
body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-cart #payment div.payment_box::before,
body.woocommerce-page #payment div.payment_box::before { display: none !important; }
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
padding: var(--pics-s-3) !important;
font-size: var(--pics-fs-sm) !important;
color: var(--pics-muted) !important;
}
body.woocommerce-checkout .form-row.place-order {
padding: var(--pics-s-3) !important;
margin: 0 !important;
}
/* Place order CTA — beat theme ghost */
body.woocommerce-checkout #place_order,
body.woocommerce #payment #place_order,
body.woocommerce-page #payment #place_order,
body.woocommerce-checkout .form-row.place-order #place_order {
width: 100% !important;
min-width: 0 !important;
padding: var(--pics-s-4) var(--pics-s-6) !important;
background: var(--pics-red) !important;
color: #fff !important;
border: none !important;
border-radius: var(--pics-radius) !important;
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-md) !important;
line-height: 1.2 !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
cursor: pointer !important;
transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
box-shadow: none !important;
height: auto !important;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce #payment #place_order:hover,
body.woocommerce-page #payment #place_order:hover {
background: var(--pics-red-hover) !important;
color: #fff !important;
transform: translateY(-1px) !important;
box-shadow: var(--pics-shadow-cta) !important;
border-color: transparent !important;
}
body.woocommerce-checkout #place_order:active { transform: translateY(0) !important; }
body.woocommerce-checkout #place_order:disabled {
background: var(--pics-dark-soft) !important;
cursor: not-allowed !important;
transform: none !important;
box-shadow: none !important;
}
body.woocommerce-checkout .form-row .button,
body.woocommerce-checkout form.checkout .form-row .button {
background: var(--pics-dark) !important;
color: #fff !important;
border: none !important;
border-radius: var(--pics-radius) !important;
padding: var(--pics-s-3) var(--pics-s-5) !important;
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-base) !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
min-width: 0 !important;
cursor: pointer !important;
transition: background 0.18s ease !important;
}
body.woocommerce-checkout .form-row .button:hover,
body.woocommerce-checkout form.checkout .form-row .button:hover {
background: var(--pics-dark-mid) !important;
color: #fff !important;
border-color: transparent !important;
}
/* =========================================================================
ALERTS / NOTICES — fix icon overlap
WooCommerce's default CSS paints an ::before icon at `left: 1.5em`. The
theme omits the padding that reserves room for it, so text sits on top.
Fix: explicit padding-left 52px + reposition the pseudo to match.
========================================================================= */
body.woocommerce-checkout .woocommerce-notices-wrapper,
body.woocommerce-cart .woocommerce-notices-wrapper {
margin-bottom: var(--pics-s-4) !important;
}
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-error {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: var(--pics-s-3) !important;
border-radius: var(--pics-radius) !important;
padding: var(--pics-s-3) var(--pics-s-4) var(--pics-s-3) 52px !important;
font-size: var(--pics-fs-base) !important;
line-height: 1.5 !important;
border-left: 4px solid var(--pics-dark) !important;
background: #fff !important;
box-shadow: var(--pics-shadow-sm) !important;
color: var(--pics-dark) !important;
list-style: none !important;
margin: 0 0 var(--pics-s-3) 0 !important;
min-height: 48px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Reposition the native ::before icon so it doesn't overlap text */
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before,
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-cart .woocommerce-info::before,
body.woocommerce-cart .woocommerce-message::before,
body.woocommerce-cart .woocommerce-error::before {
position: absolute !important;
top: 50% !important;
left: var(--pics-s-4) !important;
transform: translateY(-50%) !important;
margin: 0 !important;
padding: 0 !important;
width: 20px !important;
height: 20px !important;
font-size: 16px !important;
line-height: 20px !important;
text-align: center !important;
color: inherit !important;
background: transparent !important;
}
body.woocommerce-checkout .woocommerce-message,
body.woocommerce-cart .woocommerce-message {
border-left-color: var(--pics-green) !important;
background: var(--pics-green-soft) !important;
color: #05562f !important;
}
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-cart .woocommerce-error {
border-left-color: var(--pics-red) !important;
background: var(--pics-red-soft) !important;
color: var(--pics-red-ink) !important;
}
body.woocommerce-checkout .woocommerce-error li,
body.woocommerce-cart .woocommerce-error li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.woocommerce-checkout .woocommerce-info .showcoupon,
body.woocommerce-checkout .woocommerce-info .showlogin,
body.woocommerce-cart .woocommerce-info .showcoupon {
color: var(--pics-red) !important;
font-weight: 700 !important;
text-decoration: underline !important;
margin-left: var(--pics-s-1) !important;
}
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-cart form.checkout_coupon {
background: #fff !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius-lg) !important;
padding: var(--pics-s-5) !important;
padding-right: calc(var(--pics-s-5) + 36px) !important;
margin: 0 !important;
box-shadow: var(--pics-shadow-sm) !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: minmax(220px, 1fr) auto !important;
grid-template-areas:
"intro intro"
"field button" !important;
column-gap: var(--pics-s-3) !important;
row-gap: var(--pics-s-3) !important;
align-items: center !important;
position: relative !important;
}
/* Reset any float/clear rules WC applies to internal rows — those are what
caused the desktop "overlap" between the input row and the button row. */
body.woocommerce-checkout form.checkout_coupon > *,
body.woocommerce-cart form.checkout_coupon > * {
float: none !important;
clear: none !important;
min-width: 0 !important;
}
/* ---------- form.login — separate from coupon: two fields + remember + submit ---------- */
body.woocommerce-checkout form.login,
body.woocommerce-cart form.login {
background: #fff !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius-lg) !important;
padding: var(--pics-s-6) var(--pics-s-5) !important;
padding-right: calc(var(--pics-s-5) + 36px) !important;
margin: 0 !important;
box-shadow: var(--pics-shadow-sm) !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: var(--pics-s-4) !important;
position: relative !important;
}
body.woocommerce-checkout form.login > *,
body.woocommerce-cart form.login > * {
float: none !important;
clear: none !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
}
body.woocommerce-checkout form.login .clear,
body.woocommerce-cart form.login .clear {
display: none !important;
}
body.woocommerce-checkout form.login p.form-row,
body.woocommerce-cart form.login p.form-row,
body.woocommerce-checkout form.login p.form-row-first,
body.woocommerce-cart form.login p.form-row-first,
body.woocommerce-checkout form.login p.form-row-last,
body.woocommerce-cart form.login p.form-row-last,
body.woocommerce-checkout form.login p.form-row-wide,
body.woocommerce-cart form.login p.form-row-wide {
grid-area: auto !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: none !important;
display: block !important;
}
body.woocommerce-checkout form.login label,
body.woocommerce-cart form.login label {
display: block !important;
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-sm) !important;
font-weight: 700 !important;
color: var(--pics-dark) !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
margin: 0 0 var(--pics-s-2) 0 !important;
line-height: 1.4 !important;
}
body.woocommerce-checkout form.login input[type="text"],
body.woocommerce-cart form.login input[type="text"],
body.woocommerce-checkout form.login input[type="email"],
body.woocommerce-cart form.login input[type="email"],
body.woocommerce-checkout form.login input[type="password"],
body.woocommerce-cart form.login input[type="password"],
body.woocommerce-checkout form.login .input-text,
body.woocommerce-cart form.login .input-text {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
height: 46px !important;
padding: 0 var(--pics-s-3) !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius) !important;
background: #fff !important;
color: var(--pics-dark) !important;
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-md) !important;
line-height: 1.4 !important;
box-sizing: border-box !important;
margin: 0 !important;
float: none !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
body.woocommerce-checkout form.login input:focus,
body.woocommerce-cart form.login input:focus {
outline: none !important;
border-color: var(--pics-red) !important;
box-shadow: var(--pics-focus) !important;
}
/* Password wrapper — native WC structure is span.password-input > input + span.show-password-input */
body.woocommerce-checkout form.login .password-input,
body.woocommerce-cart form.login .password-input {
position: relative !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
gap: var(--pics-s-2) !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
body.woocommerce-checkout form.login .password-input > input,
body.woocommerce-cart form.login .password-input > input {
flex: 1 1 auto !important;
min-width: 0 !important;
width: auto !important;
max-width: none !important;
}
body.woocommerce-checkout form.login .show-password-input,
body.woocommerce-cart form.login .show-password-input {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
bottom: auto !important;
transform: none !important;
flex: 0 0 auto !important;
align-self: stretch !important;
width: 46px !important;
min-width: 46px !important;
height: 46px !important;
padding: 0 !important;
margin: 0 !important;
background: var(--pics-bg) !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius) !important;
color: var(--pics-muted) !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
z-index: auto !important;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
}
body.woocommerce-checkout form.login .show-password-input:hover,
body.woocommerce-cart form.login .show-password-input:hover {
color: var(--pics-dark) !important;
background: #fff !important;
border-color: var(--pics-dark-soft) !important;
}
body.woocommerce-checkout form.login .show-password-input.display-password,
body.woocommerce-cart form.login .show-password-input.display-password {
color: var(--pics-dark) !important;
background: #fff !important;
border-color: var(--pics-dark) !important;
}
/* Remember-me + submit row: WooCommerce puts both inside the same .
Swap it into a flex row so the checkbox label sits beside (not above) the button. */
body.woocommerce-checkout form.login p.form-row:has(button[name="login"]),
body.woocommerce-cart form.login p.form-row:has(button[name="login"]) {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: var(--pics-s-3) !important;
margin-top: var(--pics-s-1) !important;
}
body.woocommerce-checkout form.login label.woocommerce-form-login__rememberme,
body.woocommerce-cart form.login label.woocommerce-form-login__rememberme,
body.woocommerce-checkout form.login label.woocommerce-form__label-for-checkbox,
body.woocommerce-cart form.login label.woocommerce-form__label-for-checkbox {
display: inline-flex !important;
align-items: center !important;
gap: var(--pics-s-2) !important;
margin: 0 !important;
padding: 0 !important;
font-size: var(--pics-fs-sm) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--pics-muted) !important;
cursor: pointer !important;
flex: 0 1 auto !important;
width: auto !important;
line-height: 1.4 !important;
}
body.woocommerce-checkout form.login label.woocommerce-form__label-for-checkbox input[type="checkbox"],
body.woocommerce-cart form.login label.woocommerce-form__label-for-checkbox input[type="checkbox"],
body.woocommerce-checkout form.login input[type="checkbox"][name="rememberme"],
body.woocommerce-cart form.login input[type="checkbox"][name="rememberme"] {
width: 16px !important;
height: 16px !important;
margin: 0 !important;
accent-color: var(--pics-red) !important;
cursor: pointer !important;
}
/* Lost-password link sits in its own row below the submit */
body.woocommerce-checkout form.login .lost_password,
body.woocommerce-cart form.login .lost_password {
margin: 0 !important;
padding: 0 !important;
font-size: var(--pics-fs-sm) !important;
color: var(--pics-muted) !important;
text-align: right !important;
}
body.woocommerce-checkout form.login .lost_password a,
body.woocommerce-cart form.login .lost_password a {
color: var(--pics-red) !important;
text-decoration: none !important;
font-weight: 700 !important;
}
body.woocommerce-checkout form.login .lost_password a:hover,
body.woocommerce-cart form.login .lost_password a:hover {
color: var(--pics-red-hover) !important;
text-decoration: underline !important;
}
/* X close button injected by checkout-ui.js — dismiss coupon / login forms */
body.woocommerce-checkout form.checkout_coupon .pics-coupon-close,
body.woocommerce-checkout form.login .pics-coupon-close,
body.woocommerce-cart form.checkout_coupon .pics-coupon-close,
body.woocommerce-cart form.login .pics-coupon-close {
position: absolute !important;
top: var(--pics-s-2) !important;
right: var(--pics-s-2) !important;
width: 32px !important;
height: 32px !important;
padding: 0 !important;
margin: 0 !important;
border: 1px solid var(--pics-border) !important;
border-radius: 50% !important;
background: #fff !important;
color: var(--pics-muted) !important;
font-family: var(--pics-font) !important;
font-size: 22px !important;
line-height: 1 !important;
font-weight: 400 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 0 !important;
box-shadow: none !important;
letter-spacing: 0 !important;
text-transform: none !important;
transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease !important;
z-index: 2 !important;
}
body.woocommerce-checkout form.checkout_coupon .pics-coupon-close:hover,
body.woocommerce-checkout form.login .pics-coupon-close:hover,
body.woocommerce-cart form.checkout_coupon .pics-coupon-close:hover,
body.woocommerce-cart form.login .pics-coupon-close:hover {
color: var(--pics-dark) !important;
border-color: var(--pics-dark) !important;
background: #fff !important;
}
body.woocommerce-checkout form.checkout_coupon .pics-coupon-close span,
body.woocommerce-checkout form.login .pics-coupon-close span,
body.woocommerce-cart form.checkout_coupon .pics-coupon-close span,
body.woocommerce-cart form.login .pics-coupon-close span {
display: block !important;
line-height: 1 !important;
margin-top: -2px !important;
}
body.woocommerce-checkout form.checkout_coupon > p:first-of-type,
body.woocommerce-cart form.checkout_coupon > p:first-of-type,
body.woocommerce-checkout form.login > p:first-of-type,
body.woocommerce-cart form.login > p:first-of-type {
grid-area: intro !important;
margin: 0 !important;
padding: 0 !important;
color: var(--pics-muted) !important;
font-size: var(--pics-fs-sm) !important;
line-height: 1.5 !important;
}
body.woocommerce-checkout form.checkout_coupon .form-row-first,
body.woocommerce-cart form.checkout_coupon .form-row-first,
body.woocommerce-checkout form.checkout_coupon .form-row.form-row-first {
grid-area: field !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: none !important;
float: none !important;
}
body.woocommerce-checkout form.checkout_coupon .form-row-last,
body.woocommerce-cart form.checkout_coupon .form-row-last,
body.woocommerce-checkout form.checkout_coupon .form-row.form-row-last {
grid-area: button !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: none !important;
float: none !important;
}
body.woocommerce-checkout form.checkout_coupon .clear,
body.woocommerce-cart form.checkout_coupon .clear {
display: none !important;
}
body.woocommerce-checkout form.checkout_coupon .input-text,
body.woocommerce-cart form.checkout_coupon .input-text,
body.woocommerce-checkout form.checkout_coupon input[type="text"] {
width: 100% !important;
min-width: 0 !important;
height: 46px !important;
padding: 0 var(--pics-s-3) !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius) !important;
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-md) !important;
color: var(--pics-dark) !important;
background: #fff !important;
box-sizing: border-box !important;
line-height: 1.4 !important;
transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}
body.woocommerce-checkout form.checkout_coupon .input-text:focus,
body.woocommerce-cart form.checkout_coupon .input-text:focus {
border-color: var(--pics-red) !important;
outline: none !important;
box-shadow: var(--pics-focus) !important;
}
body.woocommerce-checkout form.checkout_coupon button,
body.woocommerce-checkout form.login button,
body.woocommerce-cart form.checkout_coupon button,
body.woocommerce-cart form.login button {
background: var(--pics-dark) !important;
color: #fff !important;
border: none !important;
border-radius: var(--pics-radius) !important;
padding: 0 var(--pics-s-6) !important;
font-weight: 700 !important;
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-base) !important;
text-transform: none !important;
letter-spacing: 0 !important;
min-width: 0 !important;
height: 46px !important;
cursor: pointer !important;
transition: background 0.18s ease !important;
white-space: nowrap !important;
}
/* Login submit sits inline with remember-me on desktop — fit content, not 100%. */
body.woocommerce-checkout form.login button[name="login"],
body.woocommerce-cart form.login button[name="login"] {
flex: 0 0 auto !important;
width: auto !important;
min-width: 140px !important;
margin: 0 !important;
}
body.woocommerce-checkout form.checkout_coupon button:hover,
body.woocommerce-checkout form.login button:hover,
body.woocommerce-cart form.checkout_coupon button:hover,
body.woocommerce-cart form.login button:hover {
background: var(--pics-dark-mid) !important;
color: #fff !important;
border-color: transparent !important;
}
@media (max-width: 600px) {
body.woocommerce-checkout form.checkout_coupon,
body.woocommerce-cart form.checkout_coupon {
grid-template-columns: 1fr !important;
grid-template-areas:
"intro"
"field"
"button" !important;
padding: var(--pics-s-4) !important;
padding-right: calc(var(--pics-s-4) + 36px) !important;
row-gap: var(--pics-s-2) !important;
}
body.woocommerce-checkout form.login,
body.woocommerce-cart form.login {
padding: var(--pics-s-5) var(--pics-s-4) !important;
padding-right: calc(var(--pics-s-4) + 36px) !important;
gap: var(--pics-s-3) !important;
}
body.woocommerce-checkout form.checkout_coupon .input-text,
body.woocommerce-cart form.checkout_coupon .input-text,
body.woocommerce-checkout form.checkout_coupon input[type="text"],
body.woocommerce-checkout form.login input[type="text"],
body.woocommerce-cart form.login input[type="text"],
body.woocommerce-checkout form.login input[type="email"],
body.woocommerce-cart form.login input[type="email"],
body.woocommerce-checkout form.login input[type="password"],
body.woocommerce-cart form.login input[type="password"] {
height: 44px !important;
font-size: 16px !important;
}
body.woocommerce-checkout form.login .password-input > input,
body.woocommerce-cart form.login .password-input > input {
height: 44px !important;
font-size: 16px !important;
}
body.woocommerce-checkout form.login .show-password-input,
body.woocommerce-cart form.login .show-password-input {
width: 44px !important;
min-width: 44px !important;
height: 44px !important;
}
body.woocommerce-checkout form.checkout_coupon button,
body.woocommerce-cart form.checkout_coupon button {
width: 100% !important;
height: 44px !important;
padding: 0 var(--pics-s-4) !important;
font-size: var(--pics-fs-sm) !important;
}
/* Login row: stack remember-me label above the full-width submit */
body.woocommerce-checkout form.login p.form-row:has(button[name="login"]),
body.woocommerce-cart form.login p.form-row:has(button[name="login"]) {
flex-direction: column !important;
align-items: stretch !important;
gap: var(--pics-s-3) !important;
}
body.woocommerce-checkout form.login button[name="login"],
body.woocommerce-cart form.login button[name="login"] {
width: 100% !important;
height: 44px !important;
padding: 0 var(--pics-s-4) !important;
font-size: var(--pics-fs-sm) !important;
}
body.woocommerce-checkout form.login .lost_password,
body.woocommerce-cart form.login .lost_password {
text-align: left !important;
}
}
/* =========================================================================
WOOCOMMERCE BLOCKS — fallback
========================================================================= */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-checkout .wp-block-woocommerce-checkout,
.wc-block-cart,
.wc-block-checkout {
font-family: var(--pics-font) !important;
color: var(--pics-dark) !important;
font-size: var(--pics-fs-base) !important;
line-height: 1.5 !important;
}
.wc-block-cart__sidebar .wc-block-components-sidebar,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
background: var(--pics-card) !important;
border: 1px solid var(--pics-border) !important;
border-radius: var(--pics-radius-lg) !important;
padding: var(--pics-s-5) var(--pics-s-6) !important;
box-shadow: var(--pics-shadow-md) !important;
}
.wc-block-components-button.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
button.wc-block-components-button.contained {
background: var(--pics-red) !important;
color: #fff !important;
border-radius: var(--pics-radius) !important;
border: none !important;
font-family: var(--pics-font) !important;
font-size: var(--pics-fs-md) !important;
font-weight: 700 !important;
letter-spacing: 0.01em !important;
text-transform: none !important;
padding: var(--pics-s-4) var(--pics-s-6) !important;
min-width: 0 !important;
cursor: pointer !important;
transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
}
.wc-block-components-button.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
button.wc-block-components-button.contained:hover {
background: var(--pics-red-hover) !important;
color: #fff !important;
transform: translateY(-1px) !important;
box-shadow: var(--pics-shadow-cta) !important;
border-color: transparent !important;
}
/* =========================================================================
CARRIAGE NOTICES (thank-you + account pages)
========================================================================= */
.pics-carriage-notice {
border-radius: var(--pics-radius-lg);
padding: var(--pics-s-5) var(--pics-s-6);
margin-bottom: var(--pics-s-6);
line-height: 1.6;
font-family: var(--pics-font);
box-shadow: var(--pics-shadow-sm);
}
.pics-carriage-notice h3 { margin: 0 0 var(--pics-s-2) 0; font-size: var(--pics-fs-lg); font-weight: 700; }
.pics-carriage-notice p { margin: 0 0 var(--pics-s-2) 0; font-size: var(--pics-fs-base); }
.pics-carriage-notice p:last-child { margin-bottom: 0; }
.pics-carriage-notice--info { background: var(--pics-amber-soft); border-left: 4px solid var(--pics-amber); color: #6d4c00; }
.pics-carriage-notice--info h3 { color: #5d4037; }
.pics-carriage-notice--pending { background: #f0f6fc; border-left: 4px solid #3d9cd2; color: #1a5276; }
.pics-carriage-notice--pending h3 { color: #0d47a1; }
.pics-carriage-notice--action { background: #fff3e0; border-left: 4px solid #e65100; color: #4e342e; }
.pics-carriage-notice--action h3 { color: #e65100; }
.pics-pay-carriage-btn {
display: inline-block;
margin-top: var(--pics-s-3);
padding: var(--pics-s-3) var(--pics-s-7);
background: var(--pics-red);
color: #fff;
font-size: var(--pics-fs-md);
font-weight: 700;
border-radius: var(--pics-radius);
text-decoration: none;
transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.pics-pay-carriage-btn:hover {
background: var(--pics-red-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--pics-shadow-cta);
}
/* =========================================================================
MANUAL DELIVERY CHECKOUT NOTICE
Shown at checkout above the (sole, manual-delivery) payment option when a
cart triggers a manual quote. Job: make "nothing is charged today" impossible
to miss — trade customers must not feel ambushed by a payment form.
========================================================================= */
body.woocommerce-checkout .pics-manual-delivery-notice {
display: flex;
gap: var(--pics-s-4);
align-items: flex-start;
margin: 0 0 var(--pics-s-5) 0;
padding: var(--pics-s-5) var(--pics-s-6);
background: linear-gradient(135deg, #0f3d22 0%, #1b5131 65%, #1f9254 100%);
color: #eaf5ee;
border-radius: var(--pics-radius-lg);
box-shadow: var(--pics-shadow-md);
position: relative;
overflow: hidden;
box-sizing: border-box;
}
body.woocommerce-checkout .pics-manual-delivery-notice::after {
content: "";
position: absolute;
right: -60px;
bottom: -60px;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
pointer-events: none;
}
body.woocommerce-checkout .pics-manual-delivery-notice__badge {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.14);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}
body.woocommerce-checkout .pics-manual-delivery-notice__badge svg {
width: 24px;
height: 24px;
display: block;
}
body.woocommerce-checkout .pics-manual-delivery-notice__body {
flex: 1 1 auto;
min-width: 0;
position: relative;
z-index: 1;
}
body.woocommerce-checkout .pics-manual-delivery-notice__eyebrow {
display: inline-block;
padding: 3px 10px;
margin-bottom: 8px;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
border-radius: 999px;
}
body.woocommerce-checkout .pics-manual-delivery-notice__title {
margin: 0 0 6px 0 !important;
font-family: var(--pics-font) !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
color: #ffffff !important;
letter-spacing: -0.005em !important;
}
body.woocommerce-checkout .pics-manual-delivery-notice__lead {
margin: 0 0 12px 0;
font-size: var(--pics-fs-base);
line-height: 1.55;
color: #d7ecde;
}
body.woocommerce-checkout .pics-manual-delivery-notice__lead strong {
color: #ffffff;
}
body.woocommerce-checkout .pics-manual-delivery-notice__steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
body.woocommerce-checkout .pics-manual-delivery-notice__steps li {
position: relative;
padding: 8px 12px 8px 40px;
background: rgba(255, 255, 255, 0.08);
border-radius: 8px;
font-size: 13px;
line-height: 1.45;
color: #eaf5ee;
}
body.woocommerce-checkout .pics-manual-delivery-notice__steps li em {
color: #ffffff;
font-style: normal;
font-weight: 700;
}
body.woocommerce-checkout .pics-manual-delivery-notice__steps li span {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
border-radius: 50%;
background: #ffffff;
color: #0f3d22;
font-size: 11px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 600px) {
body.woocommerce-checkout .pics-manual-delivery-notice {
flex-direction: column;
padding: var(--pics-s-4) var(--pics-s-4);
margin-left: var(--pics-s-3);
margin-right: var(--pics-s-3);
max-width: calc(100% - var(--pics-s-6));
box-sizing: border-box;
}
body.woocommerce-checkout .pics-manual-delivery-notice__badge {
flex: 0 0 auto;
}
body.woocommerce-checkout .pics-manual-delivery-notice__title {
font-size: 16px !important;
}
body.woocommerce-checkout .pics-manual-delivery-notice__lead {
font-size: 13.5px;
}
body.woocommerce-checkout .pics-manual-delivery-notice__steps li {
font-size: 12.5px;
padding: 8px 10px 8px 36px;
}
}
/* =========================================================================
STOCK BADGES + STATUS LABELS
========================================================================= */
.pics-stock {
display: inline-block;
padding: 3px 10px;
border-radius: 3px;
font-size: var(--pics-fs-sm);
font-weight: 700;
letter-spacing: 0.3px;
}
.pics-stock--instock { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.pics-stock--low { background: #fff3e0; color: #e65100; border: 1px solid #ffcc80; }
.pics-stock--out { background: #ffebee; color: #c62828; border: 1px solid #ef9a9a; }
.order-status.status-awaiting-carriage { background: #fff3e0; color: #e65100; }
.order-status.status-carriage-added { background: #e3f2fd; color: #1565c0; }
/* =========================================================================
TRAINING ENQUIRY NOTICE
Shown above the checkout form when the cart is training-only. Makes it
unambiguous that this is an enquiry — no card is charged at this stage.
========================================================================= */
body.woocommerce-checkout .pics-training-enquiry {
position: relative;
margin: 0 0 var(--pics-s-6) 0;
padding: var(--pics-s-6) var(--pics-s-6) var(--pics-s-6) var(--pics-s-6);
background:
radial-gradient(circle at top right, rgba(255,255,255,0.08) 0%, transparent 55%),
linear-gradient(135deg, #1f3a5f 0%, #14263f 100%);
color: #eaf1fb;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(20, 38, 63, 0.22);
overflow: hidden;
}
body.woocommerce-checkout .pics-training-enquiry::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
135deg,
transparent 0 22px,
rgba(255, 255, 255, 0.02) 22px 23px
);
pointer-events: none;
}
body.woocommerce-checkout .pics-training-enquiry__badge {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background: #FF293A !important;
color: #ffffff !important;
border-radius: 999px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.7px;
text-transform: uppercase;
margin-bottom: var(--pics-s-3);
}
body.woocommerce-checkout .pics-training-enquiry__title {
margin: 0 0 var(--pics-s-3) 0 !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.25 !important;
color: #ffffff !important;
}
body.woocommerce-checkout .pics-training-enquiry__lede {
margin: 0 0 var(--pics-s-4) 0 !important;
font-size: var(--pics-fs-base) !important;
line-height: 1.55 !important;
color: #ffffff !important;
}
body.woocommerce-checkout .pics-training-enquiry__lede strong {
color: #ffffff !important;
}
body.woocommerce-checkout .pics-training-enquiry__steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 8px;
}
body.woocommerce-checkout .pics-training-enquiry__steps li {
position: relative;
padding: 10px 14px 10px 46px;
background: rgba(255, 255, 255, 0.10) !important;
border: 1px solid rgba(255, 255, 255, 0.14) !important;
border-radius: 10px;
font-size: 13px;
line-height: 1.5;
color: #ffffff !important;
}
body.woocommerce-checkout .pics-training-enquiry__steps li strong {
color: #ffffff !important;
font-weight: 700;
}
body.woocommerce-checkout .pics-training-enquiry__steps li span {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
border-radius: 50%;
background: #FF293A !important;
color: #ffffff !important;
font-size: 12px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 600px) {
body.woocommerce-checkout .pics-training-enquiry {
padding: var(--pics-s-4) var(--pics-s-4);
margin-left: var(--pics-s-3);
margin-right: var(--pics-s-3);
max-width: calc(100% - var(--pics-s-6));
box-sizing: border-box;
}
body.woocommerce-checkout .pics-training-enquiry__title {
font-size: 18px !important;
}
body.woocommerce-checkout .pics-training-enquiry__lede {
font-size: 13.5px !important;
}
body.woocommerce-checkout .pics-training-enquiry__steps li {
font-size: 12.5px;
padding: 8px 10px 8px 40px;
}
}
/* =========================================================================
ORDER RECEIVED (thank-you) — mobile spacing + centering
Default WooCommerce thank-you markup sits flush to the viewport edge on
phones. Give it breathing room and centre the headline content so the
page reads as a confirmation moment, not a cramped receipt.
========================================================================= */
@media (max-width: 600px) {
body.woocommerce-order-received .woocommerce {
padding-left: var(--pics-s-4) !important;
padding-right: var(--pics-s-4) !important;
box-sizing: border-box !important;
}
body.woocommerce-order-received .woocommerce > p,
body.woocommerce-order-received p.woocommerce-thankyou-order-received,
body.woocommerce-order-received p.woocommerce-notice,
body.woocommerce-order-received h2.woocommerce-order-details__title,
body.woocommerce-order-received h2.woocommerce-column__title {
text-align: center !important;
}
body.woocommerce-order-received p.woocommerce-thankyou-order-received,
body.woocommerce-order-received p.woocommerce-notice {
font-size: var(--pics-fs-lg) !important;
line-height: 1.4 !important;
margin: 0 auto var(--pics-s-5) !important;
max-width: 32ch !important;
}
/* Order overview: stack order# / date / email / total / payment vertically,
centred, with clear breathing room between each. */
body.woocommerce-order-received ul.woocommerce-order-overview,
body.woocommerce-order-received ul.order_details {
display: flex !important;
flex-direction: column !important;
gap: var(--pics-s-3) !important;
list-style: none !important;
padding: var(--pics-s-4) !important;
margin: 0 0 var(--pics-s-6) 0 !important;
background: var(--pics-card, #fff) !important;
border: 1px solid var(--pics-border, #e5e7eb) !important;
border-radius: var(--pics-radius-lg, 12px) !important;
box-shadow: var(--pics-shadow-sm, 0 1px 2px rgba(0,0,0,.04)) !important;
text-align: center !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li,
body.woocommerce-order-received ul.order_details li {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
font-size: var(--pics-fs-sm) !important;
color: var(--pics-muted, #6b7280) !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
font-weight: 600 !important;
}
body.woocommerce-order-received ul.woocommerce-order-overview li strong,
body.woocommerce-order-received ul.order_details li strong {
font-size: var(--pics-fs-md) !important;
color: var(--pics-dark, #2C3440) !important;
font-weight: 700 !important;
letter-spacing: -0.005em !important;
text-transform: none !important;
}
/* Order details + customer details sections: centre headings, full-width
tables without awkward horizontal overflow, a little air between cards. */
body.woocommerce-order-received section.woocommerce-order-details,
body.woocommerce-order-received section.woocommerce-customer-details {
margin-bottom: var(--pics-s-6) !important;
}
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title {
font-size: var(--pics-fs-lg) !important;
margin: 0 0 var(--pics-s-3) 0 !important;
}
body.woocommerce-order-received .woocommerce-customer-details {
display: flex !important;
flex-direction: column !important;
gap: var(--pics-s-4) !important;
}
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column,
body.woocommerce-order-received .woocommerce-customer-details .col-1,
body.woocommerce-order-received .woocommerce-customer-details .col-2 {
width: 100% !important;
float: none !important;
text-align: center !important;
}
body.woocommerce-order-received .woocommerce-customer-details address {
text-align: center !important;
font-style: normal !important;
line-height: 1.6 !important;
}
/* Carriage notice at the top of the thank-you page: keep it readable and
aligned with the rest of the stacked, centred content. */
body.woocommerce-order-received .pics-carriage-notice {
padding: var(--pics-s-4) !important;
margin-bottom: var(--pics-s-5) !important;
}
body.woocommerce-order-received .pics-carriage-notice h3 {
font-size: var(--pics-fs-md) !important;
text-align: center !important;
}
body.woocommerce-order-received .pics-carriage-notice p {
font-size: var(--pics-fs-sm) !important;
text-align: center !important;
}
}
.pics-delivery-notes-field {
margin: 18px 0;
padding: 16px 18px;
border: 1px solid #e2c9a0;
background: #fdf7ec;
border-radius: 6px;
}
.pics-delivery-notes-field h3 {
margin: 0 0 6px;
font-size: 16px;
}
.pics-delivery-notes-field .pics-required {
color: #b3261e;
font-weight: 600;
}
.pics-delivery-notes-field__lead {
margin: 0 0 10px;
font-size: 14px;
line-height: 1.5;
}
.pics-delivery-notes-field textarea {
width: 100%;
min-height: 90px;
}