anywhere, so nothing the editor can escape.
========================================================================== */
/* --- 1. Whole quiz becomes one white card while step 1 is on screen ------- */
.vme-product-quiz:has(.vme-quiz-step[data-store-key=vam_subscription_babys_name].is-active) {
display: flex;
flex-direction: column;
gap: 20px;
padding: 24px !important;
background: #fff !important;
border-radius: 32px !important;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05) !important;
}
/* --- 2. Progress: "1/11" reads "Step N of 11", every step ---------------- */
.vme-product-quiz .vme-quiz-progress {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100% !important;
max-width: none !important;
margin: 0 0 20px !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.vme-product-quiz .vme-quiz-progress__count {
font-size: 0 !important;
line-height: 1;
color: #0c091a;
}
.vme-product-quiz .vme-quiz-progress__count::before {
content: "Step ";
}
.vme-product-quiz .vme-quiz-progress__current::after {
content: " of ";
}
.vme-product-quiz .vme-quiz-progress__count::before,
.vme-product-quiz .vme-quiz-progress__current,
.vme-product-quiz .vme-quiz-progress__current::after,
.vme-product-quiz .vme-quiz-progress__total {
font-size: 13px !important;
font-weight: 700 !important;
color: #0c091a !important;
}
.vme-product-quiz .vme-quiz-progress__track {
flex: 0 0 6px !important; /* theme sets flex:1 1 auto, which stretches it */
height: 6px !important;
background: #e6e5ec !important;
border-radius: 100px !important;
overflow: hidden;
}
.vme-product-quiz .vme-quiz-progress__bar {
display: block;
height: 100% !important;
min-width: 6px;
background: #5b0df5 !important;
border-radius: 100px !important;
transition: width 0.25s ease;
}
.vme-product-quiz:has(.vme-quiz-step[data-store-key=vam_subscription_babys_name].is-active) .vme-quiz-progress {
margin: 0 !important;
}
/* --- 3. Headline + heart ------------------------------------------------- */
/* the heading is the step's own Question field, so the copy stays editable.
The position/width/height resets undo the rule that currently hides it. */
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] {
position: relative;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__title {
position: static !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
box-sizing: border-box !important;
margin: 0 0 18px !important;
padding: 0 132px 0 0 !important; /* keeps the text clear of the heart */
font-size: 32px !important;
line-height: 1.16 !important;
font-weight: 700 !important;
color: #084b6d !important;
text-align: left !important;
white-space: normal !important;
text-wrap: balance;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__title::after {
content: "";
position: absolute;
top: -10px;
right: -8px;
width: 128px;
height: 114px;
background: url("../../assets/img/heart-ab6b53.svg") no-repeat center/contain;
pointer-events: none;
}
/* --- 4. Unwrap the inner card, order the three help-field items ----------- */
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card {
display: flex;
flex-direction: column;
gap: 20px;
width: auto !important;
max-width: none !important;
padding: 0 !important;
background: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__help-row,
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__help {
display: contents;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__more-info-row {
display: none;
}
/* the theme already sets field 2 and nav 6 */
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__help > *:not(:has(img)) {
order: 0;
} /* subtitle: the item with no image */
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__help > *:has(.vm-q1-promo) {
order: 1;
} /* gift card */
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__help > *:has(.vm-q1-review) {
order: 7;
} /* review row */
/* --- 5. Subtitle, gift card, review row ---------------------------------- */
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__help > *:not(:has(img)) {
margin: 0 !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
color: #868494 !important;
text-align: left !important;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__help > *:has(.vm-q1-promo) {
margin: 0 !important;
line-height: 0;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vm-q1-promo {
display: block;
width: 100% !important;
height: auto !important;
max-width: none !important;
margin: 0 !important;
border-radius: 0 !important;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__help > *:has(.vm-q1-review) {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin: 0 !important;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__help > *:has(.vm-q1-review)::after {
content: "Trusted by 1000+ parents every day";
max-width: 112px;
font-size: 11px;
font-weight: 500;
line-height: 1.3;
color: #868494;
text-align: center;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vm-q1-review {
display: block;
width: auto !important;
height: 24px !important;
max-width: none !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* --- 6. Input and buttons ------------------------------------------------ */
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__field {
order: 2;
margin: 0 !important;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__field input {
height: auto !important;
min-height: 0 !important;
padding: 14px 16px !important;
font-size: 15px !important;
font-weight: 600 !important;
color: #0c091a;
border: 1px solid #e6e5ec !important;
border-radius: 12px !important;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-nav {
margin: 0 !important;
gap: 0;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-nav__prev {
display: none;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-nav__next {
width: 100% !important;
padding: 14px !important;
font-size: 16px;
font-weight: 700;
border-radius: 14px !important;
}
/* --- 7. Mobile ----------------------------------------------------------- */
@media (max-width: 600px) {
.vme-product-quiz:has(.vme-quiz-step[data-store-key=vam_subscription_babys_name].is-active) {
padding: 20px 16px !important;
border-radius: 24px !important;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__title {
padding-right: 100px !important;
font-size: 26px !important;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__title::after {
width: 94px;
height: 84px;
top: -6px;
right: -4px;
}
.vme-product-quiz .vme-quiz-steps .vme-quiz-step[data-store-key=vam_subscription_babys_name] .vme-quiz-step__card .vme-quiz-step__help > *:has(.vm-q1-review) {
gap: 12px;
}
}
/* ===== QUIZ v12 — STEP 1 — END ===== */
/* Cart bundle leaks a beige #main onto product pages via ?apply_coupon */
body.single-product #main {
background: transparent;
}
/* ---- V&Me thank-you page ---- */
.woocommerce-order-received .woocommerce-order {
max-width: 560px;
margin: 0 auto;
font-family: Inter, Arial, sans-serif;
color: #1c2a35;
}
/* "Thank you. Your order has been received." */
.woocommerce-order-received .woocommerce-thankyou-order-received {
display: block;
background: #b3fdc7;
color: #084b6d;
font-family: "Bricolage Grotesque", Arial, sans-serif;
font-weight: 800;
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.4px;
text-align: center;
padding: 20px 22px;
border-radius: 18px;
margin: 0 0 22px;
border: 0;
}
.woocommerce-order-received .woocommerce-thankyou-order-received::before {
content: none;
}
/* Order number / date / total / payment method */
.woocommerce-order-received ul.woocommerce-order-overview {
list-style: none;
margin: 0 0 26px;
padding: 6px 20px;
background: #ffffff;
border: 1px solid #e9e6f2;
border-radius: 18px;
}
.woocommerce-order-received ul.woocommerce-order-overview li {
display: flex;
justify-content: space-between;
gap: 16px;
float: none;
width: auto;
margin: 0;
padding: 13px 0;
border: 0;
border-bottom: 1px solid #e9e6f2;
font-size: 14px;
text-transform: none;
line-height: 1.4;
}
.woocommerce-order-received ul.woocommerce-order-overview li:last-child {
border-bottom: 0;
}
.woocommerce-order-received ul.woocommerce-order-overview li strong {
font-weight: 600;
color: #1c2a35;
text-align: right;
display: inline;
font-size: 14px;
}
/* Section headings */
.woocommerce-order-received .woocommerce-order-details h2,
.woocommerce-order-received .woocommerce-customer-details h2 {
font-family: "Bricolage Grotesque", Arial, sans-serif;
font-weight: 800;
font-size: 21px;
letter-spacing: -0.4px;
color: #084b6d;
margin: 0 0 12px;
}
/* Order details table */
.woocommerce-order-received table.woocommerce-table--order-details {
width: 100%;
border: 1px solid #e9e6f2;
border-radius: 18px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
background: #ffffff;
font-size: 14px;
margin: 0 0 26px;
}
.woocommerce-order-received table.woocommerce-table--order-details th,
.woocommerce-order-received table.woocommerce-table--order-details td {
padding: 14px 18px;
border: 0;
border-bottom: 1px solid #e9e6f2;
text-align: left;
vertical-align: top;
}
.woocommerce-order-received table.woocommerce-table--order-details thead th {
background: #f9f5ff;
color: #5d6c7b;
font-weight: 600;
font-size: 12.5px;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.woocommerce-order-received table.woocommerce-table--order-details .product-total,
.woocommerce-order-received table.woocommerce-table--order-details tfoot td {
text-align: right;
}
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
border-bottom: 0;
font-weight: 700;
color: #084b6d;
}
.woocommerce-order-received .product-name a {
color: #084b6d;
font-weight: 700;
text-decoration: none;
}
/* Subscription fields under each line item */
.woocommerce-order-received .wc-item-meta {
list-style: none;
margin: 10px 0 0;
padding: 12px 14px;
background: #f9f5ff;
border-radius: 12px;
font-size: 13.5px;
}
.woocommerce-order-received .wc-item-meta li {
display: flex;
justify-content: space-between;
gap: 14px;
margin: 0;
padding: 6px 0;
line-height: 1.4;
}
.woocommerce-order-received .wc-item-meta li strong {
color: #5d6c7b;
font-weight: 500;
flex: none;
}
.woocommerce-order-received .wc-item-meta li p {
margin: 0;
color: #1c2a35;
font-weight: 600;
text-align: right;
}
/* Addresses */
.woocommerce-order-received .woocommerce-customer-details address {
border: 1px solid #e9e6f2;
border-radius: 18px;
padding: 18px 20px;
font-style: normal;
font-size: 14px;
line-height: 1.6;
}
/* Hide WooCommerce's banner — the hero below replaces it */
.woocommerce-order-received .woocommerce-thankyou-order-received {
display: none;
}
/* ---- Hero ---- */
.vm-hero {
max-width: 560px;
margin: 0 auto 26px;
text-align: center;
font-family: Inter, Arial, sans-serif;
}
.vm-hero-icon {
width: 60px;
height: 60px;
line-height: 60px;
margin: 0 auto 16px;
border-radius: 50%;
background: #b3fdc7;
font-size: 27px;
}
.vm-hero h2 {
font-family: "Bricolage Grotesque", Arial, sans-serif;
font-weight: 800;
font-size: 29px;
line-height: 1.12;
letter-spacing: -0.6px;
color: #084b6d;
margin: 0 0 10px;
}
.vm-hero p {
font-size: 16px;
line-height: 1.5;
color: #5d6c7b;
margin: 0;
}
/* ---- Jo card ---- */
.vm-jo {
max-width: 560px;
margin: 0 auto 30px;
padding: 24px;
background: #f9f5ff;
border: 1px solid #e9e6f2;
border-radius: 20px;
font-family: Inter, Arial, sans-serif;
}
.vm-jo-head {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 18px;
}
.vm-jo-img {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
flex: none;
display: block;
}
.vm-jo-name strong {
display: block;
font-size: 15px;
font-weight: 700;
color: #084b6d;
line-height: 1.3;
}
.vm-jo-name em {
display: block;
font-style: normal;
font-size: 13px;
color: #5d6c7b;
line-height: 1.3;
}
.vm-jo h2 {
font-family: "Bricolage Grotesque", Arial, sans-serif;
font-weight: 800;
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.5px;
color: #084b6d;
margin: 0 0 10px;
}
.vm-jo p {
font-size: 16px;
line-height: 1.55;
color: #1c2a35;
margin: 0 0 20px;
}
.vm-jo .vm-btn {
display: block;
background: #5b0df5;
color: #ffffff;
font-weight: 700;
font-size: 16px;
text-align: center;
padding: 16px 20px;
border-radius: 10px;
text-decoration: none;
box-shadow: 0 6px 18px rgba(91, 13, 245, 0.22);
}
.vm-jo .vm-note {
font-size: 13px;
text-align: center;
color: #5d6c7b;
margin: 12px 0 0;
}
/* ---- Subscription notices ---- */
.woocommerce-order-received .woocommerce-order > p {
max-width: 560px;
margin: 0 auto 12px;
font-size: 14.5px;
line-height: 1.55;
color: #5d6c7b;
}
/* ---- Related subscriptions ---- */
.woocommerce-order-received .related-subscriptions,
.woocommerce-order-received .subscription_details {
max-width: 560px;
margin: 0 auto;
font-size: 14px;
}
/* ---- My account: branding + subscriptions table ---- */
.woocommerce-account .woocommerce-MyAccount-navigation a {
font-family: "Bricolage Grotesque", Inter, sans-serif;
font-weight: 700;
font-size: 15px;
letter-spacing: -0.01em;
}
.woocommerce-account .my_account_subscriptions {
table-layout: auto;
width: 100%;
}
.woocommerce-account .my_account_subscriptions td {
vertical-align: middle;
}
.woocommerce-account .my_account_subscriptions td.subscription-id {
width: auto;
font-weight: 600;
}
.woocommerce-account .my_account_subscriptions td.subscription-total {
width: 1%;
white-space: nowrap;
}
.woocommerce-account .my_account_subscriptions td.subscription-status {
width: 1%;
white-space: nowrap;
}
.woocommerce-account .my_account_subscriptions td:last-child {
width: 1%;
white-space: nowrap;
text-align: right;
padding-right: 14px;
}
/* ==== WEANING KIT BRAND RESTYLE — START ==== */
/* Scoped to body.postid-15970 so nothing else on the store is affected.
Palette from vandme.co.uk: purple #5B0DF5 (CTA), deep blue #084B6D (headings),
lilac #F9F5FF surfaces, #E9E6F2 hairlines. Fonts are enqueued by the theme (VANDME_FONTS_STYLE_HANDLE). */
.postid-15970 {
--vm-purple: var(--vme-purple);
--vm-purple-dark: #4909c9;
--vm-blue: var(--vme-navy);
--vm-lilac: var(--vme-warm); /* was the light purple */
--vm-line: var(--vme-border);
--vm-field: var(--vme-border);
--vm-ink: var(--vme-navy);
--vm-muted: var(--vme-text);
--vm-head: var(--vme-font-head);
}
/* ---- Layout: real two columns, sticky gallery, no dead space ---- */
@media (min-width: 900px) {
.postid-15970 .site-main {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: 56px;
}
.postid-15970 .site-main > .woocommerce-breadcrumb,
.postid-15970 .site-main > .woocommerce-notices-wrapper {
flex: 0 0 100%;
}
.postid-15970 .single-product.left,
.postid-15970 .single-product.right {
float: none;
flex: 1 1 0;
min-width: 0;
width: auto;
}
.postid-15970 .single-product.right {
position: sticky;
top: 24px;
}
}
.postid-15970 .summary {
flex: 1 1 auto;
min-width: 0;
}
@media (max-width: 899px) {
.postid-15970 .single-product.left,
.postid-15970 .single-product.right {
float: none;
width: 100%;
}
.postid-15970 .single-product.right {
margin-top: 24px;
}
}
/* ---- Breadcrumb ---- */
.postid-15970 .woocommerce-breadcrumb {
font-size: var(--vme-small);
color: var(--vme-text);
margin: 0 0 18px;
}
.postid-15970 .woocommerce-breadcrumb a {
color: var(--vme-text);
text-decoration: none;
}
.postid-15970 .woocommerce-breadcrumb a:hover {
color: var(--vm-purple);
}
/* ---- Title ---- */
.postid-15970 .product_title {
font-family: var(--vm-head);
font-weight: 700;
font-size: var(--vme-display);
line-height: 1.04;
letter-spacing: -1px;
text-transform: none;
color: var(--vm-blue);
margin: 0 0 12px;
}
/* ---- Short description + price ---- */
.postid-15970 .woocommerce-product-details__short-description {
margin: 0;
font-size: var(--vme-body);
line-height: 1.55;
color: var(--vm-muted);
}
.postid-15970 .woocommerce-product-details__short-description p {
margin: 0 0 12px;
}
.postid-15970 .woocommerce-product-details__short-description a {
color: var(--vm-purple);
text-decoration: none;
box-shadow: inset 0 -1px 0 rgba(91, 13, 245, 0.28);
}
.postid-15970 .woocommerce-product-details__short-description a:hover {
box-shadow: inset 0 -2px 0 rgba(91, 13, 245, 0.55);
}
.postid-15970 .woocommerce-product-details__short-description strong {
color: var(--vm-blue);
}
.postid-15970 .woocommerce-product-details__short-description p > span:not([id]) {
display: inline-block;
font-family: var(--vm-head);
font-size: var(--vme-heading);
font-weight: 800;
line-height: 1;
letter-spacing: -1.5px;
color: var(--vm-blue);
margin: 2px 0 4px;
}
/* ---- Order-deadline countdown banner (inline styles need !important) ---- */
.postid-15970 #wk-deadline-banner {
background: var(--vm-lilac) !important;
border: 1px solid var(--vm-line);
border-radius: 16px !important;
padding: 16px 18px 14px !important;
margin: 18px 0 20px !important;
color: var(--vm-blue) !important;
font-family: Inter, Arial, sans-serif !important;
}
.postid-15970 #wk-text {
font-size: var(--vme-small) !important;
line-height: 1.45;
color: var(--vm-blue) !important;
}
.postid-15970 #wk-text strong {
color: var(--vm-blue) !important;
font-weight: 700;
}
.postid-15970 #wk-countdown {
font-family: var(--vm-head) !important;
font-size: var(--vme-heading) !important;
font-weight: 800 !important;
letter-spacing: -0.5px !important;
line-height: 1.15 !important;
color: var(--vm-purple) !important;
margin-top: 6px;
}
.postid-15970 #wk-label {
font-size: var(--vme-label) !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
color: var(--vme-text) !important;
}
/* ---- The buy box ---- */
.postid-15970 form.cart {
background: #fff;
border: 1px solid var(--vm-line);
border-radius: 20px;
padding: 22px 22px 24px;
margin: 0 0 8px;
box-shadow: 0 1px 2px rgba(8, 75, 109, 0.04), 0 10px 28px rgba(8, 75, 109, 0.06);
}
.postid-15970 .yam-additional-fields {
display: block;
}
.postid-15970 .additional-field {
width: 100%;
margin: 0 0 18px;
}
.postid-15970 .af-price-placeholder {
margin: 0;
}
.postid-15970 .af-price-placeholder .price {
display: block;
margin: 0 0 18px;
}
.postid-15970 .additional-field > label {
display: block;
font-family: Inter, Arial, sans-serif;
font-size: var(--vme-small);
font-weight: 700;
line-height: 1.3;
color: var(--vm-blue);
margin: 0 0 7px;
}
.postid-15970 .additional-field .required {
color: var(--vm-purple);
text-decoration: none;
}
.postid-15970 form.cart input[type=text],
.postid-15970 form.cart input.form-control,
.postid-15970 form.cart select {
width: 100%;
max-width: 100%;
box-sizing: border-box;
height: auto;
min-height: 50px;
padding: 13px 15px;
font-family: Inter, Arial, sans-serif;
font-size: var(--vme-body);
line-height: 1.4;
color: var(--vm-ink);
background-color: #fff;
border: 1px solid var(--vm-field);
border-radius: 12px;
box-shadow: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.postid-15970 form.cart select {
-webkit-appearance: none;
appearance: none;
padding-right: 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23084B6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
}
.postid-15970 form.cart input[type=text]:hover,
.postid-15970 form.cart input.form-control:hover,
.postid-15970 form.cart select:hover {
border-color: var(--vme-border);
}
.postid-15970 form.cart input[type=text]:focus,
.postid-15970 form.cart input.form-control:focus,
.postid-15970 form.cart select:focus {
outline: none;
border-color: var(--vm-purple);
box-shadow: 0 0 0 3px rgba(91, 13, 245, 0.14);
}
/* ---- Allergen note ---- */
.postid-15970 .description.description-after {
font-size: var(--vme-small);
line-height: 1.5;
color: var(--vm-muted);
background: var(--vm-lilac);
border-radius: 12px;
padding: 12px 14px;
margin: 10px 0 0;
}
/* ---- Add to basket ---- */
.postid-15970 .single_add_to_cart_button {
display: block;
width: 100%;
max-width: none;
margin: 2px 0 0;
padding: 17px 24px;
font-family: Inter, Arial, sans-serif;
font-size: var(--vme-body);
font-weight: 700;
line-height: 1.1;
letter-spacing: 0;
text-transform: none;
text-align: center;
color: #fff;
background: var(--vm-purple);
border: 0;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 6px 18px rgba(91, 13, 245, 0.22);
transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}
.postid-15970 .single_add_to_cart_button:hover {
background: var(--vm-purple-dark);
box-shadow: 0 8px 22px rgba(91, 13, 245, 0.3);
}
.postid-15970 .single_add_to_cart_button:active {
transform: translateY(1px);
}
/* ---- Gallery ---- */
.postid-15970 .woocommerce-product-gallery img {
border-radius: 18px;
}
.postid-15970 .flex-control-thumbs img,
.postid-15970 .woocommerce-product-gallery .flex-control-nav img {
border-radius: 10px;
border: 1px solid var(--vm-line);
}
/* ---- Specificity top-ups (theme / inline styles fight back here) ---- */
body.postid-15970 form.cart .additional-field > label {
font-size: var(--vme-small) !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
body.postid-15970 .woocommerce-product-details__short-description p > span:not([id]) {
font-size: var(--vme-heading) !important;
font-weight: 800 !important;
color: var(--vm-blue) !important;
}
body.postid-15970 .woocommerce button.button.alt.single_add_to_cart_button,
body.postid-15970 button.single_add_to_cart_button {
display: block !important;
width: 100% !important;
padding: 17px 24px !important;
font-size: var(--vme-body) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: #fff !important;
background-color: var(--vm-purple) !important;
border: 0 !important;
border-radius: 12px !important;
}
body.postid-15970 .woocommerce button.button.alt.single_add_to_cart_button:hover,
body.postid-15970 button.single_add_to_cart_button:hover {
background-color: var(--vm-purple-dark) !important;
}
/* The theme lays these fields out at ~48% in a flex row — one per row reads better */
body.postid-15970 .single-product .yam-additional-fields {
display: block;
}
body.postid-15970 .single-product .yam-additional-fields .additional-field {
width: 100% !important;
max-width: none !important;
margin: 0 0 18px !important;
}
body.postid-15970 .single-product .yam-additional-fields .additional-field.af-price-placeholder {
margin: 0 !important;
}
body.postid-15970 .single-product .yam-additional-fields .additional-field select,
body.postid-15970 .single-product .yam-additional-fields .additional-field input[type=text],
body.postid-15970 .single-product .yam-additional-fields .additional-field input.form-control {
width: 100% !important;
max-width: 100% !important;
}
body.postid-15970 form.cart .dietary-preference {
display: block;
width: 100%;
}
/* ---- Delivery-date calendar (flatpickr) ---- */
body.postid-15970 .flatpickr-calendar {
border: 1px solid var(--vm-line);
border-radius: 16px;
box-shadow: 0 14px 36px rgba(8, 75, 109, 0.14);
font-family: Inter, Arial, sans-serif;
padding-bottom: 6px;
overflow: hidden;
}
body.postid-15970 .flatpickr-months {
padding-top: 8px;
}
body.postid-15970 .flatpickr-current-month,
body.postid-15970 .flatpickr-current-month input.cur-year {
font-family: var(--vm-head);
font-weight: 700;
color: var(--vm-blue);
}
body.postid-15970 span.flatpickr-weekday {
color: var(--vme-text);
font-weight: 700;
font-size: var(--vme-label);
}
body.postid-15970 .flatpickr-day {
border-radius: 10px;
color: var(--vm-ink);
font-weight: 400;
}
body.postid-15970 .flatpickr-day:hover {
background: var(--vm-lilac);
border-color: var(--vm-lilac);
}
body.postid-15970 .flatpickr-day.today {
border-color: var(--vm-purple);
}
body.postid-15970 .flatpickr-day.selected,
body.postid-15970 .flatpickr-day.selected:hover {
background: var(--vm-purple);
border-color: var(--vm-purple);
color: #fff;
}
body.postid-15970 .flatpickr-day.flatpickr-disabled,
body.postid-15970 .flatpickr-day.prevMonthDay,
body.postid-15970 .flatpickr-day.nextMonthDay {
color: var(--vme-border);
}
/* ==== WEANING KIT BRAND RESTYLE — END ==== */
/* =====================================================================
V&Me — brand restyle for /order, Baby Food (7-12 months) and Toddler (1-4 years)
Comes after the design system and weaning kit partials in
inc/design-system/styles.scss. The fonts used here are enqueued by the
theme (VANDME_FONTS_STYLE_HANDLE).
Scopes used (nothing else on the store is touched):
.postid-9653 = Baby Food (7-12 months)
.postid-9640 = Toddler (1-4 years)
body.post-type-archive-product = the /order grid
===================================================================== */
/* ~~~~ DAILY MEAL PRODUCT PAGES — BRAND RESTYLE — START ~~~~ */
:is(.postid-9653, .postid-9640) {
--vm-purple: var(--vme-purple);
--vm-purple-dark: #4909c9;
--vm-blue: var(--vme-navy);
--vm-lilac: var(--vme-warm); /* was the light purple */
--vm-line: var(--vme-border);
--vm-field: var(--vme-border);
--vm-ink: var(--vme-navy);
--vm-muted: var(--vme-text);
--vm-head: var(--vme-font-head);
}
/* ---- Layout: real two columns, sticky gallery, no dead space ---- */
@media (min-width: 900px) {
:is(.postid-9653, .postid-9640) .site-main {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
column-gap: 56px;
}
:is(.postid-9653, .postid-9640) .site-main > .woocommerce-breadcrumb,
:is(.postid-9653, .postid-9640) .site-main > .woocommerce-notices-wrapper {
flex: 0 0 100%;
}
:is(.postid-9653, .postid-9640) .single-product.left,
:is(.postid-9653, .postid-9640) .single-product.right {
float: none;
flex: 1 1 0;
min-width: 0;
width: auto;
}
:is(.postid-9653, .postid-9640) .single-product.right {
position: sticky;
top: 24px;
}
:is(.postid-9653, .postid-9640) .single-product.left > section.related {
margin-top: 56px;
}
}
:is(.postid-9653, .postid-9640) .summary {
flex: 1 1 auto;
min-width: 0;
}
@media (max-width: 899px) {
:is(.postid-9653, .postid-9640) .single-product.left,
:is(.postid-9653, .postid-9640) .single-product.right {
float: none;
width: 100%;
}
:is(.postid-9653, .postid-9640) .single-product.right {
margin-top: 24px;
}
}
/* ---- Breadcrumb ---- */
:is(.postid-9653, .postid-9640) .woocommerce-breadcrumb {
font-size: var(--vme-small);
color: var(--vme-text);
margin: 0 0 18px;
}
:is(.postid-9653, .postid-9640) .woocommerce-breadcrumb a {
color: var(--vme-text);
text-decoration: none;
}
:is(.postid-9653, .postid-9640) .woocommerce-breadcrumb a:hover {
color: var(--vm-purple);
}
/* ---- Title ---- */
body:is(.postid-9653, .postid-9640) .product_title {
font-family: var(--vm-head) !important;
font-weight: 700 !important;
font-size: var(--vme-display) !important;
line-height: 1.04 !important;
letter-spacing: -1px !important;
text-transform: none !important;
color: var(--vm-blue) !important;
margin: 0 0 10px !important;
}
/* ---- "From £x every week" line above the description ---- */
:is(.postid-9653, .postid-9640) .summary > p.price {
font-family: var(--vm-head);
font-size: var(--vme-title);
font-weight: 700;
letter-spacing: -0.4px;
color: var(--vm-blue);
margin: 0 0 16px;
}
:is(.postid-9653, .postid-9640) .summary > p.price .from {
font-family: Inter, Arial, sans-serif;
font-size: var(--vme-small);
font-weight: 400;
color: var(--vm-muted);
}
/* ---- Short description ---- */
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description {
margin: 0 0 22px;
font-size: var(--vme-body);
line-height: 1.55;
color: var(--vm-muted);
}
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description p {
margin: 0 0 12px;
}
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description h3 {
font-family: var(--vm-head);
font-size: var(--vme-body);
font-weight: 700;
letter-spacing: -0.3px;
text-transform: none;
color: var(--vm-blue);
margin: 18px 0 8px;
}
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description strong {
color: var(--vm-blue);
}
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description ul {
margin: 0 0 12px;
padding-left: 20px;
}
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description li {
margin: 0 0 4px;
}
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description a {
color: var(--vm-purple);
text-decoration: none;
box-shadow: inset 0 -1px 0 rgba(91, 13, 245, 0.28);
}
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description a:hover {
box-shadow: inset 0 -2px 0 rgba(91, 13, 245, 0.55);
}
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description hr {
border: 0;
border-top: 1px solid var(--vm-line);
margin: 18px 0;
}
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description em {
color: var(--vme-text);
font-size: var(--vme-small);
}
:is(.postid-9653, .postid-9640) .woocommerce-product-details__short-description img {
border-radius: 12px;
}
/* ---- The buy box: one white card around the whole step flow ---- */
:is(.postid-9653, .postid-9640) form.cart {
background: #fff;
border: 1px solid var(--vm-line);
border-radius: 20px;
padding: 22px 22px 24px;
margin: 0 0 8px;
box-shadow: 0 1px 2px rgba(8, 75, 109, 0.04), 0 10px 28px rgba(8, 75, 109, 0.06);
}
:is(.postid-9653, .postid-9640) form.cart .variations {
margin: 0;
}
:is(.postid-9653, .postid-9640) .single_variation_wrap,
:is(.postid-9653, .postid-9640) .woocommerce-variation.single_variation {
margin: 0;
}
/* Running total, and the "Clear Selection" link beside it */
body:is(.postid-9653, .postid-9640) form.cart .reset_variations {
display: inline-block !important;
float: right;
font-family: Inter, Arial, sans-serif;
font-size: var(--vme-label);
font-weight: 400;
color: var(--vme-text) !important;
background: none !important;
border: 0 !important;
padding: 0 !important;
text-decoration: underline;
text-underline-offset: 3px;
}
body:is(.postid-9653, .postid-9640) form.cart .reset_variations:hover {
color: var(--vm-purple) !important;
}
body:is(.postid-9653, .postid-9640) .woocommerce-variation-price {
margin: 0 0 18px;
}
body:is(.postid-9653, .postid-9640) .woocommerce-variation-price .price,
body:is(.postid-9653, .postid-9640) .woocommerce-variation-price .amount {
font-family: var(--vm-head) !important;
font-size: var(--vme-heading) !important;
font-weight: 800 !important;
line-height: 1.1 !important;
letter-spacing: -1px !important;
color: var(--vm-blue) !important;
}
body:is(.postid-9653, .postid-9640) .woocommerce-variation-availability {
font-size: var(--vme-small);
color: var(--vm-muted);
}
/* ---- One field per row (the theme puts some at ~48% in a flex row) ---- */
body:is(.postid-9653, .postid-9640) .single-product .yam-additional-fields .additional-field {
width: 100% !important;
max-width: none !important;
float: none !important;
}
/* ---- Step headings and the hairlines that separate the steps ---- */
:is(.postid-9653, .postid-9640) .yam-additional-fields .additional-field {
border-color: var(--vm-line) !important;
}
:is(.postid-9653, .postid-9640) .yam-additional-fields h2.step-label {
font-family: var(--vm-head) !important;
font-size: var(--vme-title) !important;
font-weight: 700 !important;
line-height: 1.15 !important;
letter-spacing: -0.5px !important;
text-transform: none !important;
color: var(--vm-blue) !important;
margin: 0 0 4px !important;
}
:is(.postid-9653, .postid-9640) .yam-additional-fields .additional-field:is(.af-step-1, .af-step-2, .af-step-3, .af-step-4) {
border-top: 1px solid var(--vm-line) !important;
border-bottom: 0 !important;
padding-top: 22px !important;
margin-top: 22px !important;
}
:is(.postid-9653, .postid-9640) .yam-additional-fields .additional-field.af-step-1 {
border-top: 0 !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* ---- Field labels and helper text ---- */
:is(.postid-9653, .postid-9640) .yam-additional-fields .additional-field > label {
display: block;
font-family: Inter, Arial, sans-serif !important;
font-size: var(--vme-small) !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: var(--vm-blue) !important;
margin: 0 0 7px !important;
}
/* these h4s are screen-reader-only in the theme — keep them hidden */
body:is(.postid-9653, .postid-9640) .yam-additional-fields .additional-field > h4.label {
display: none !important;
}
:is(.postid-9653, .postid-9640) .yam-additional-fields .required {
color: var(--vm-purple);
text-decoration: none;
}
:is(.postid-9653, .postid-9640) .yam-additional-fields .description.description-before {
font-size: var(--vme-small);
line-height: 1.5;
color: var(--vm-muted);
margin: 0 0 12px;
}
:is(.postid-9653, .postid-9640) .yam-additional-fields .description.description-after {
font-size: var(--vme-small);
line-height: 1.5;
color: var(--vm-muted);
background: var(--vm-lilac);
border-radius: 12px;
padding: 12px 14px;
margin: 10px 0 0;
}
/* ---- Selects and text inputs ---- */
:is(.postid-9653, .postid-9640) form.cart select,
:is(.postid-9653, .postid-9640) form.cart input[type=text],
:is(.postid-9653, .postid-9640) form.cart input.form-control {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
height: auto;
min-height: 50px;
padding: 13px 15px;
font-family: Inter, Arial, sans-serif;
font-size: var(--vme-body);
line-height: 1.4;
color: var(--vm-ink);
background-color: #fff;
border: 1px solid var(--vm-field);
border-radius: 12px;
box-shadow: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
:is(.postid-9653, .postid-9640) form.cart select {
-webkit-appearance: none;
appearance: none;
padding-right: 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23084B6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
}
:is(.postid-9653, .postid-9640) form.cart select:hover,
:is(.postid-9653, .postid-9640) form.cart input[type=text]:hover {
border-color: var(--vme-border);
}
:is(.postid-9653, .postid-9640) form.cart select:focus,
:is(.postid-9653, .postid-9640) form.cart input[type=text]:focus {
outline: none;
border-color: var(--vm-purple);
box-shadow: 0 0 0 3px rgba(91, 13, 245, 0.14);
}
/* ---- Step 1: delivery days as pills ---- */
body:is(.postid-9653, .postid-9640) .single-product .yam-additional-fields .additional-field ul.delivery-days {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body:is(.postid-9653, .postid-9640) .single-product .yam-additional-fields .additional-field ul.delivery-days li {
display: flex !important;
align-items: center !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 10px 14px !important;
border: 1px solid var(--vm-field) !important;
border-radius: 12px !important;
background: #fff !important;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
body:is(.postid-9653, .postid-9640) .single-product .yam-additional-fields .additional-field ul.delivery-days li:hover {
border-color: var(--vme-border) !important;
background: var(--vm-lilac) !important;
}
body:is(.postid-9653, .postid-9640) .single-product .yam-additional-fields .additional-field ul.delivery-days li:has(input:checked) {
border-color: var(--vm-purple) !important;
background: var(--vm-lilac) !important;
box-shadow: 0 0 0 2px rgba(91, 13, 245, 0.12);
}
body:is(.postid-9653, .postid-9640) .single-product .yam-additional-fields .additional-field ul.delivery-days li label {
cursor: pointer;
margin: 0;
}
body:is(.postid-9653, .postid-9640) .single-product .yam-additional-fields .additional-field ul.delivery-days li span.text {
font-family: Inter, Arial, sans-serif !important;
font-size: var(--vme-body) !important;
font-weight: 400 !important;
color: var(--vm-ink) !important;
white-space: nowrap;
}
/* ---- Step 1: double-up and subscribe/one-time rows ---- */
:is(.postid-9653, .postid-9640) ul.double-up {
margin: 16px 0 0;
padding: 0;
list-style: none;
}
:is(.postid-9653, .postid-9640) ul.double-up li {
border: 1px solid var(--vm-field);
border-radius: 14px;
padding: 14px 16px;
background: #fff;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
:is(.postid-9653, .postid-9640) ul.double-up li:hover {
border-color: var(--vme-border);
}
:is(.postid-9653, .postid-9640) ul.double-up li:has(input:checked) {
border-color: var(--vm-purple);
background: var(--vm-lilac);
}
:is(.postid-9653, .postid-9640) ul.double-up li span.text {
font-family: Inter, Arial, sans-serif;
font-size: var(--vme-body);
font-weight: 700;
color: var(--vm-blue);
}
:is(.postid-9653, .postid-9640) ul.double-up .option-description {
font-size: var(--vme-small);
font-weight: 400;
line-height: 1.45;
color: var(--vm-muted);
margin-top: 2px;
}
:is(.postid-9653, .postid-9640) ul.single-week-only {
margin: 14px 0 0;
padding: 0;
list-style: none;
}
:is(.postid-9653, .postid-9640) ul.single-week-only li {
display: flex;
align-items: center;
gap: 12px;
border: 1px solid var(--vm-field);
border-radius: 14px;
padding: 12px 16px;
background: #fff;
}
:is(.postid-9653, .postid-9640) ul.single-week-only li .text,
:is(.postid-9653, .postid-9640) ul.single-week-only li span {
font-family: Inter, Arial, sans-serif;
font-size: var(--vme-body);
color: var(--vm-ink);
}
/* ---- Step 2: start-date picker ---- */
:is(.postid-9653, .postid-9640) .datepicker {
margin-top: 4px;
}
:is(.postid-9653, .postid-9640) .datepicker .month {
font-family: var(--vm-head) !important;
font-size: var(--vme-body) !important;
font-weight: 700 !important;
letter-spacing: -0.2px;
text-transform: none !important;
color: var(--vm-blue) !important;
margin: 0 0 10px !important;
}
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays {
gap: 8px;
}
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays li button {
border-radius: 12px !important;
border: 1px solid var(--vm-field) !important;
background: #fff !important;
padding: 10px 4px !important;
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays li button .date {
font-family: var(--vm-head) !important;
font-size: var(--vme-title) !important;
font-weight: 700 !important;
color: var(--vm-blue) !important;
}
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays li button .day {
font-size: var(--vme-label) !important;
font-weight: 400 !important;
letter-spacing: 0.02em;
color: var(--vm-muted) !important;
}
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays li button:disabled {
background: var(--vme-warm) !important;
border-color: var(--vme-border) !important;
opacity: 1 !important;
}
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays li button:disabled .date,
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays li button:disabled .day {
color: #C3CAD3 !important;
}
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays li button:not(:disabled):hover {
border-color: var(--vm-purple) !important;
background: var(--vm-lilac) !important;
}
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays li button:is(.selected, .active, [aria-pressed=true], [aria-selected=true]) {
background: var(--vm-purple) !important;
border-color: var(--vm-purple) !important;
box-shadow: 0 6px 16px rgba(91, 13, 245, 0.22);
}
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays li button:is(.selected, .active, [aria-pressed=true], [aria-selected=true]) .date,
:is(.postid-9653, .postid-9640) .datepicker .week ul.weekdays li button:is(.selected, .active, [aria-pressed=true], [aria-selected=true]) .day {
color: #fff !important;
}
/* ---- Add to basket (note: no display rule — the theme hides the spare
WooCommerce button and shows the "Add delivery details" one) ---- */
:is(.postid-9653, .postid-9640) .vam-add-to-cart-flex {
margin-top: 22px;
}
body:is(.postid-9653, .postid-9640) .woocommerce button.button.alt.single_add_to_cart_button,
body:is(.postid-9653, .postid-9640) button.single_add_to_cart_button,
body:is(.postid-9653, .postid-9640) .single_add_to_cart_button {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 17px 24px !important;
font-family: Inter, Arial, sans-serif !important;
font-size: var(--vme-body) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-align: center;
color: #fff !important;
background-color: var(--vm-purple) !important;
border: 0 !important;
border-radius: 12px !important;
cursor: pointer;
box-shadow: 0 6px 18px rgba(91, 13, 245, 0.22);
transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}
body:is(.postid-9653, .postid-9640) .single_add_to_cart_button:hover {
background-color: var(--vm-purple-dark) !important;
box-shadow: 0 8px 22px rgba(91, 13, 245, 0.3);
}
body:is(.postid-9653, .postid-9640) .single_add_to_cart_button:active {
transform: translateY(1px);
}
body:is(.postid-9653, .postid-9640) .single_add_to_cart_button.disabled,
body:is(.postid-9653, .postid-9640) .single_add_to_cart_button:disabled {
background-color: #CFC3F6 !important;
box-shadow: none;
cursor: not-allowed;
}
/* ---- Notes under the buy box ---- */
:is(.postid-9653, .postid-9640) p.first-payment-date,
:is(.postid-9653, .postid-9640) .woocommerce-subscriptions-product-details {
font-size: var(--vme-small);
line-height: 1.5;
color: var(--vm-muted);
}
/* ---- Gallery ---- */
:is(.postid-9653, .postid-9640) .woocommerce-product-gallery img {
border-radius: 18px;
}
:is(.postid-9653, .postid-9640) .flex-control-thumbs img,
:is(.postid-9653, .postid-9640) .woocommerce-product-gallery .flex-control-nav img {
border-radius: 10px;
border: 1px solid var(--vm-line);
}
/* ---- Related products heading ---- */
:is(.postid-9653, .postid-9640) section.related > h2 {
font-family: var(--vm-head);
font-size: var(--vme-title);
font-weight: 700;
letter-spacing: -0.6px;
text-transform: none;
color: var(--vm-blue);
margin: 0 0 18px;
}
/* ~~~~ DAILY MEAL PRODUCT PAGES — BRAND RESTYLE — END ~~~~ */
/* ~~~~ /ORDER PRODUCT GRID — BRAND RESTYLE — START ~~~~ */
/* This page is the WooCommerce shop archive. It ships without the theme's
gutter wrapper, so the grid ran to the browser edge — the #primary rule
below is what fixes that. */
body.post-type-archive-product {
--vm-purple: var(--vme-purple);
--vm-purple-dark: #4909c9;
--vm-blue: var(--vme-navy);
--vm-lilac: var(--vme-warm); /* was the light purple */
--vm-line: var(--vme-border);
--vm-ink: var(--vme-navy);
--vm-muted: var(--vme-text);
--vm-head: var(--vme-font-head);
}
body.post-type-archive-product #primary {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px 72px;
box-sizing: border-box;
}
/* ---- Breadcrumb ---- */
body.post-type-archive-product .woocommerce-breadcrumb {
font-size: var(--vme-small);
color: var(--vme-text);
margin: 0 0 18px;
}
body.post-type-archive-product .woocommerce-breadcrumb a {
color: var(--vme-text);
text-decoration: none;
}
body.post-type-archive-product .woocommerce-breadcrumb a:hover {
color: var(--vm-purple);
}
/* ---- Page header ---- */
body.post-type-archive-product .woocommerce-products-header {
display: block !important;
margin: 0 0 32px;
}
body.post-type-archive-product .woocommerce-products-header__title {
float: none !important;
display: block !important;
width: 100% !important;
clear: both !important;
font-family: var(--vm-head) !important;
font-size: var(--vme-display) !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: -1px !important;
text-transform: none !important;
color: var(--vm-blue) !important;
margin: 0 0 10px !important;
}
body.post-type-archive-product .woocommerce-products-header .page-description {
float: none !important;
clear: both !important;
width: 100% !important;
max-width: 640px;
font-size: var(--vme-body);
line-height: 1.6;
color: var(--vm-muted);
}
body.post-type-archive-product .woocommerce-products-header .page-description p {
margin: 0 0 10px;
}
body.post-type-archive-product .woocommerce-products-header .page-description a {
color: var(--vm-purple);
text-decoration: none;
box-shadow: inset 0 -1px 0 rgba(91, 13, 245, 0.28);
}
/* ---- The grid ---- */
body.post-type-archive-product ul.products {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 28px 24px;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
body.post-type-archive-product ul.products::before,
body.post-type-archive-product ul.products::after {
content: none !important;
display: none !important;
}
/* ---- Product card ---- */
body.post-type-archive-product ul.products li.product {
width: auto !important;
max-width: none !important;
float: none !important;
clear: none !important;
margin: 0 !important;
padding: 14px 14px 18px !important;
display: flex;
flex-direction: column;
position: relative;
background: #fff;
border: 1px solid var(--vm-line);
border-radius: var(--vme-radius-card);
box-shadow: none; /* system cards have no shadow; the hover lift below stays */
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
body.post-type-archive-product ul.products li.product:hover {
transform: translateY(-3px);
border-color: var(--vme-border);
box-shadow: 0 12px 30px rgba(8, 75, 109, 0.1);
}
body.post-type-archive-product ul.products li.product a.woocommerce-loop-product__link {
display: flex;
flex-direction: column;
text-decoration: none;
}
/* the theme puts the title before the image in the markup — flip it back */
body.post-type-archive-product ul.products li.product a.woocommerce-loop-product__link img {
order: -1;
width: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 14px;
margin: 0 0 14px !important;
background: var(--vm-lilac);
}
body.post-type-archive-product ul.products li.product h2.woocommerce-loop-product__title {
font-family: var(--vm-head) !important;
font-size: var(--vme-body) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
letter-spacing: -0.4px !important;
text-transform: none !important;
color: var(--vm-blue) !important;
margin: 0 0 6px !important;
padding: 0 !important;
}
body.post-type-archive-product ul.products li.product .price {
font-family: Inter, Arial, sans-serif !important;
font-size: var(--vme-small) !important;
font-weight: 700 !important;
color: var(--vm-muted) !important;
margin: 0 0 12px !important;
}
body.post-type-archive-product ul.products li.product .button {
display: block !important;
width: 100% !important;
margin: auto 0 0 !important;
padding: 13px 16px !important;
box-sizing: border-box;
font-family: Inter, Arial, sans-serif !important;
font-size: var(--vme-body) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-align: center !important;
color: #fff !important;
background-color: var(--vm-purple) !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(91, 13, 245, 0.18);
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
body.post-type-archive-product ul.products li.product .button:hover {
background-color: var(--vm-purple-dark) !important;
box-shadow: 0 6px 18px rgba(91, 13, 245, 0.26);
}
/* ---- Sale badge ---- */
body.post-type-archive-product ul.products li.product .onsale {
position: absolute !important;
top: 22px !important;
right: 22px !important;
left: auto !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
min-width: 0 !important;
min-height: 0 !important;
padding: 5px 10px !important;
border-radius: 999px !important;
font-family: Inter, Arial, sans-serif !important;
font-size: var(--vme-label) !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
color: #084B6D !important;
background: #B3FDC7 !important;
}
/* ---- Stray widget list at the foot of this page ---- */
body.post-type-archive-product #sidebar {
display: none !important;
}
/* ---- Responsive ---- */
@media (max-width: 1080px) {
body.post-type-archive-product ul.products {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 820px) {
body.post-type-archive-product ul.products {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 16px;
}
}
@media (max-width: 520px) {
body.post-type-archive-product #primary {
padding: 0 16px 56px;
}
body.post-type-archive-product ul.products li.product h2.woocommerce-loop-product__title {
font-size: var(--vme-body) !important;
}
}
/* ~~~~ /ORDER PRODUCT GRID — BRAND RESTYLE — END ~~~~ */
/* ~~~~ REVISION 2 — toggles, price position, description blocks, smash cake — START ~~~~ */
/* Everything below is additive: it overrides the blocks above, so it must
stay at the bottom. */
/* ---- Weekly price: smaller, and moved under the Step 1 heading ----
The price and the step flow live in different wrappers, so the two
`display: contents` rules flatten them into one flex column; Step 1 then
takes order:-1 so the price lands directly underneath it. */
body:is(.postid-9653, .postid-9640) form.cart .single_variation_wrap {
display: flex;
flex-direction: column;
width: 100%;
}
body:is(.postid-9653, .postid-9640) form.cart .woocommerce-variation-add-to-cart,
body:is(.postid-9653, .postid-9640) form.cart .yam-additional-fields {
display: contents;
}
body:is(.postid-9653, .postid-9640) .yam-additional-fields .additional-field.af-step-1 {
order: -1;
}
body:is(.postid-9653, .postid-9640) .yam-additional-fields .additional-field,
body:is(.postid-9653, .postid-9640) .single_variation_wrap > .vam-add-to-cart,
body:is(.postid-9653, .postid-9640) .single_variation_wrap > .woocommerce-variation {
align-self: stretch;
}
body:is(.postid-9653, .postid-9640) .woocommerce-variation-price {
margin: 0 0 18px !important;
font-family: Inter, Arial, sans-serif !important;
font-size: var(--vme-small) !important;
color: var(--vm-muted) !important;
}
body:is(.postid-9653, .postid-9640) .woocommerce-variation-price .price {
font-family: Inter, Arial, sans-serif !important;
font-size: var(--vme-small) !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
color: var(--vm-muted) !important;
}
body:is(.postid-9653, .postid-9640) .woocommerce-variation-price .amount {
font-family: var(--vm-head) !important;
font-size: var(--vme-title) !important;
font-weight: 800 !important;
letter-spacing: -0.6px !important;
color: var(--vm-blue) !important;
margin-right: 4px;
}
/* ---- Double-up and subscribe rows: drop the boxes ---- */
body:is(.postid-9653, .postid-9640) ul.double-up li,
body:is(.postid-9653, .postid-9640) ul.single-week-only li {
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
body:is(.postid-9653, .postid-9640) ul.double-up {
margin: 18px 0 0 !important;
}
body:is(.postid-9653, .postid-9640) ul.single-week-only {
margin: 16px 0 0 !important;
}
/* ~~~~ PRODUCT DESCRIPTION BLOCKS (the .vm-desc markup) ~~~~ */
/* Styles the HTML that goes in each product's SHORT DESCRIPTION box. */
.vm-desc {
font-family: Inter, Arial, sans-serif;
color: #5D6C7B;
}
.vm-desc p {
margin: 0 0 12px;
}
.vm-desc .vm-lead {
font-size: var(--vme-body) !important;
line-height: 1.55;
color: var(--vme-navy) !important;
margin: 0 0 16px !important;
}
.vm-desc .vm-eyebrow {
font-size: var(--vme-label) !important;
font-weight: 700 !important;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--vme-text) !important;
margin: 0 0 10px !important;
}
.vm-desc .vm-note {
font-size: var(--vme-small) !important;
color: var(--vme-text) !important;
margin: 0 !important;
}
.vm-desc .vm-rule {
border: 0 !important;
border-top: 1px solid #E9E6F2 !important;
margin: 20px 0 !important;
}
/* chips — "1x Lunch", topping, etc. */
.vm-desc .vm-includes {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 12px;
}
.vm-desc .vm-chip {
display: inline-block;
padding: 9px 14px;
border-radius: 12px;
background: var(--vme-warm);
font-size: var(--vme-small);
font-weight: 700;
color: #084B6D;
}
/* outlined fact pills */
.vm-desc .vm-facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 18px;
}
.vm-desc .vm-fact {
display: inline-block;
padding: 7px 12px;
border: 1px solid #E9E6F2;
border-radius: 999px;
font-size: var(--vme-small);
font-weight: 700;
color: #084B6D;
background: #fff;
}
/* stage switcher pills */
.vm-desc .vm-stages {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.vm-desc .vm-stage {
display: inline-flex !important;
align-items: center;
gap: 10px;
padding: 6px 16px 6px 6px;
border: 1px solid #E9E6F2;
border-radius: 999px;
background: #fff;
text-decoration: none !important;
box-shadow: none !important;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.vm-desc .vm-stage:hover {
border-color: #5B0DF5;
background: var(--vme-warm);
box-shadow: none !important;
}
.vm-desc .vm-stage span:not(.vm-thumb) {
display: block;
}
.vm-desc .vm-stage b {
display: block;
font-size: var(--vme-small);
font-weight: 700;
line-height: 1.25;
color: #084B6D;
}
.vm-desc .vm-stage i {
display: block;
font-size: var(--vme-label);
font-style: normal;
line-height: 1.3;
color: #5D6C7B;
}
/* the source thumbnails have their caption baked into the image — this
zooms past it so only the photo shows in the circle */
.vm-desc .vm-thumb {
position: relative;
display: block;
width: 44px;
height: 44px;
border-radius: 50%;
overflow: hidden;
flex: none;
background: var(--vme-warm);
}
.vm-desc .vm-thumb img {
position: absolute;
top: -2%;
left: -25%;
width: 150% !important;
height: auto !important;
max-width: none !important;
margin: 0 !important;
border-radius: 0 !important;
}
/* full-width banner image */
.vm-desc .vm-banner {
display: block;
margin: 0;
box-shadow: none !important;
}
.vm-desc .vm-banner img {
width: 100% !important;
height: auto !important;
border-radius: 14px;
display: block;
margin: 0 !important;
}
/* ~~~~ SUGARLESS SMASH CAKE (postid-9639) — pictures at the top ~~~~ */
.postid-9639 {
--vm-purple: var(--vme-purple);
--vm-purple-dark: #4909c9;
--vm-blue: var(--vme-navy);
--vm-lilac: var(--vme-warm); /* was the light purple */
--vm-line: var(--vme-border);
--vm-field: var(--vme-border);
--vm-ink: var(--vme-navy);
--vm-muted: var(--vme-text);
--vm-head: var(--vme-font-head);
}
/* single centred column, gallery pulled above the copy */
.postid-9639 .site-main {
display: flex;
flex-direction: column;
align-items: center;
}
.postid-9639 .site-main > .woocommerce-breadcrumb,
.postid-9639 .site-main > .woocommerce-notices-wrapper {
width: 100%;
max-width: 760px;
}
.postid-9639 .single-product.right {
order: -1;
float: none !important;
width: 100% !important;
max-width: 760px;
margin: 0 0 32px;
}
.postid-9639 .single-product.left {
float: none !important;
width: 100% !important;
max-width: 760px;
}
.postid-9639 .summary {
width: 100%;
}
.postid-9639 .woocommerce-product-gallery img {
border-radius: 18px;
}
.postid-9639 .flex-control-thumbs img {
border-radius: 10px;
border: 1px solid var(--vm-line);
}
.postid-9639 .woocommerce-breadcrumb {
font-size: var(--vme-small);
color: var(--vme-text);
margin: 0 0 18px;
}
.postid-9639 .woocommerce-breadcrumb a {
color: var(--vme-text);
text-decoration: none;
}
.postid-9639 .woocommerce-breadcrumb a:hover {
color: var(--vm-purple);
}
body.postid-9639 .product_title {
font-family: var(--vm-head) !important;
font-weight: 700 !important;
font-size: var(--vme-display) !important;
line-height: 1.04 !important;
letter-spacing: -1px !important;
text-transform: none !important;
color: var(--vm-blue) !important;
margin: 0 0 10px !important;
}
.postid-9639 .summary > p.price {
font-family: var(--vm-head);
font-size: var(--vme-title);
font-weight: 700;
letter-spacing: -0.5px;
color: var(--vm-blue);
margin: 0 0 18px;
}
/* buy box */
.postid-9639 form.cart {
background: #fff;
border: 1px solid var(--vm-line);
border-radius: 20px;
padding: 22px 22px 24px;
margin: 24px 0 8px;
box-shadow: 0 1px 2px rgba(8, 75, 109, 0.04), 0 10px 28px rgba(8, 75, 109, 0.06);
}
.postid-9639 form.cart table.variations {
width: 100%;
margin: 0 0 18px;
border: 0;
}
.postid-9639 form.cart table.variations tbody,
.postid-9639 form.cart table.variations tr,
.postid-9639 form.cart table.variations th,
.postid-9639 form.cart table.variations td {
display: block;
width: 100%;
border: 0;
padding: 0;
text-align: left;
}
.postid-9639 form.cart table.variations th.label label {
display: block;
font-family: Inter, Arial, sans-serif;
font-size: var(--vme-small);
font-weight: 700;
text-transform: none;
color: var(--vm-blue);
margin: 0 0 7px;
}
.postid-9639 form.cart .reset_variations {
display: inline-block;
float: right;
font-size: var(--vme-label);
color: var(--vme-text);
text-decoration: underline;
text-underline-offset: 3px;
}
.postid-9639 .yam-additional-fields .additional-field {
width: 100% !important;
max-width: none !important;
float: none !important;
margin: 0 0 18px !important;
}
.postid-9639 .yam-additional-fields .additional-field.af-price-placeholder:empty {
margin: 0 !important;
}
.postid-9639 .yam-additional-fields .additional-field > label {
display: block;
font-family: Inter, Arial, sans-serif !important;
font-size: var(--vme-small) !important;
font-weight: 700 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--vm-blue) !important;
margin: 0 0 7px !important;
}
.postid-9639 .yam-additional-fields .required {
color: var(--vm-purple);
text-decoration: none;
}
.postid-9639 form.cart select,
.postid-9639 form.cart input[type=text],
.postid-9639 form.cart input.form-control {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
height: auto;
min-height: 50px;
padding: 13px 15px;
font-family: Inter, Arial, sans-serif;
font-size: var(--vme-body);
line-height: 1.4;
color: var(--vm-ink);
background-color: #fff;
border: 1px solid var(--vm-field);
border-radius: 12px;
box-shadow: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.postid-9639 form.cart select {
-webkit-appearance: none;
appearance: none;
padding-right: 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23084B6D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
}
.postid-9639 form.cart select:hover,
.postid-9639 form.cart input[type=text]:hover {
border-color: var(--vme-border);
}
.postid-9639 form.cart select:focus,
.postid-9639 form.cart input[type=text]:focus {
outline: none;
border-color: var(--vm-purple);
box-shadow: 0 0 0 3px rgba(91, 13, 245, 0.14);
}
.postid-9639 .quantity {
display: none;
}
body.postid-9639 .single_add_to_cart_button {
width: 100% !important;
max-width: none !important;
margin: 6px 0 0 !important;
padding: 17px 24px !important;
font-family: Inter, Arial, sans-serif !important;
font-size: var(--vme-body) !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: 0 !important;
text-transform: none !important;
text-align: center;
color: #fff !important;
background-color: var(--vm-purple) !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: 0 6px 18px rgba(91, 13, 245, 0.22);
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
body.postid-9639 .single_add_to_cart_button:hover {
background-color: var(--vm-purple-dark) !important;
}
body.postid-9639 .single_add_to_cart_button.disabled,
body.postid-9639 .single_add_to_cart_button:disabled {
background-color: #CFC3F6 !important;
box-shadow: none;
}
/* delivery-date calendar */
body.postid-9639 .flatpickr-calendar {
border: 1px solid var(--vm-line);
border-radius: 16px;
box-shadow: 0 14px 36px rgba(8, 75, 109, 0.14);
font-family: Inter, Arial, sans-serif;
}
body.postid-9639 .flatpickr-current-month,
body.postid-9639 .flatpickr-current-month input.cur-year {
font-family: var(--vm-head);
font-weight: 700;
color: var(--vm-blue);
}
body.postid-9639 span.flatpickr-weekday {
color: var(--vme-text);
font-weight: 700;
font-size: var(--vme-label);
}
body.postid-9639 .flatpickr-day {
border-radius: 10px;
color: var(--vm-ink);
font-weight: 400;
}
body.postid-9639 .flatpickr-day:hover {
background: var(--vm-lilac);
border-color: var(--vm-lilac);
}
body.postid-9639 .flatpickr-day.selected,
body.postid-9639 .flatpickr-day.selected:hover {
background: var(--vm-purple);
border-color: var(--vm-purple);
color: #fff;
}
body.postid-9639 .flatpickr-day.flatpickr-disabled {
color: var(--vme-border);
}
.postid-9639 p.first-payment-date {
font-size: var(--vme-small);
color: var(--vm-muted);
text-align: center;
margin: 12px 0 0;
}
/* ~~~~ REVISION 2 — END ~~~~ */
/* ==== PRODUCT PAGES — SYSTEM FIXES — START ==== */
/* After the product-page blocks (WEANING KIT, DAILY MEAL, /ORDER GRID, REVISION 2), whose own sizes,
weights and colours now use the --vme- tokens. These rules fix what comes from the theme and
plugins instead. Layouts are unchanged; only the page width and left edge move onto the system
(1080px content, 100px from the edge at 1280, 16px on phones). */
/* content width and left edge: product pages (theme: .guttered with 3% margins) and /order */
body.single-product #content > .guttered,
body.post-type-archive-product #content > #primary.content-area {
max-width: var(--vme-content);
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
box-sizing: content-box;
}
@media (max-width: 1111px) {
body.single-product #content > .guttered,
body.post-type-archive-product #content > #primary.content-area {
padding-left: var(--vme-gutter);
padding-right: var(--vme-gutter);
}
}
/* page titles on product pages with no block of their own (the two other weaning kits) */
body.single-product h1.product_title.entry-title {
font-size: var(--vme-display);
line-height: 1.05;
} /* pands-mobile-style.css: h1.product_title 4.3vw up to 481px; pands-style.css: line-height 1.26em */
/* breadcrumbs: Small (WooCommerce sets 15px on pages without a block) */
body.woocommerce .woocommerce-breadcrumb,
body.woocommerce .woocommerce-breadcrumb a {
font-size: var(--vme-small);
}
/* the delivery date picker's day names come from the plugin in Roboto Mono */
body.single-product .datepicker .week ul.weekdays li button .day {
font-family: var(--vme-font-body);
}
/* weaning kit summary text (theme sets 15px) */
body.postid-15970 .woocommerce-product-details__short-description p {
font-size: var(--vme-body);
}
/* the description's paragraphs have inline styles (15px, the old purple #6300ff): body text, so grey */
body.postid-15970 .woocommerce-product-details__short-description p[style] {
font-size: var(--vme-body) !important;
color: var(--vme-text) !important;
}
/* the countdown text gets an inline weight of 500 */
body.postid-15970 #wk-text {
font-weight: 400 !important;
}
/* ==== PRODUCT PAGES — SYSTEM FIXES — END ==== */
/* ==== PRODUCT QUIZ — BRAND RESTYLE — START ==== */
/* Scoped to body.page-id-56496. v3 (Sep 2026): title as normal text flow (fixes "Bella 's"), day-step with menu preview, summary restyle, promo/flex strips, details step. */
body.page-id-56496 {
--q-purple:#5b0df5;
--q-purple-dark:#4909c9;
--q-blue:#084b6d;
--q-lilac:#f9f5ff;
--q-line:#e9e6f2;
--q-ink:#1c2a35;
--q-muted:#5d6c7b;
--q-mint:#b3fdc7;
--q-disp:"Bricolage Grotesque",Inter,Arial,sans-serif;
}
/* Theme's own primary colour var → purple, so its checked/focus states on the day rows follow brand without extra overrides */
body.page-id-56496 .vme-product-quiz {
max-width: 520px;
margin: 0 auto;
padding: 0 16px;
--vme-quiz-color-primary:#5b0df5;
--vme-quiz-color-primary-rgb:91,13,245;
}
body.page-id-56496 .vme-quiz-step__card {
max-width: none;
padding: 22px 20px 20px;
border: 1px solid var(--q-line);
border-radius: 22px;
box-shadow: 0 8px 30px rgba(8, 75, 109, 0.06);
display: flex;
flex-direction: column;
}
/* Card row order. Anything not listed gets order:0 and floats to the top — so every block that belongs in the middle is listed here */
body.page-id-56496 .vme-quiz-step__help-row {
order: 1;
margin: 0 0 16px;
justify-content: flex-start;
}
body.page-id-56496 .vme-quiz-step__field, body.page-id-56496 .vme-quiz-step__options, body.page-id-56496 .vme-quiz-step__body, body.page-id-56496 .vme-quiz-step__pricing, body.page-id-56496 .vme-quiz-step__menu-hint, body.page-id-56496 .vme-quiz-step__days-selected, body.page-id-56496 .vme-quiz-toggle, body.page-id-56496 .vme-quiz-start-date, body.page-id-56496 .vme-quiz-consent, body.page-id-56496 .vme-quiz-summary {
order: 2;
}
body.page-id-56496 .vme-quiz-step__error {
order: 3;
}
body.page-id-56496 .vme-quiz-step__more-info-row {
order: 4;
justify-content: flex-start !important;
margin: 14px 0 0;
}
body.page-id-56496 .vme-quiz-more-info__popup {
order: 5;
}
body.page-id-56496 .vme-quiz-nav {
order: 6;
}
/* Progress */
body.page-id-56496 .vme-quiz-progress {
max-width: 520px;
margin: 0 auto 18px;
padding: 0 16px;
}
body.page-id-56496 .vme-quiz-progress__track {
height: 6px;
background: var(--q-line);
border-radius: 999px;
}
body.page-id-56496 .vme-quiz-progress__bar {
height: 6px;
background: var(--q-purple);
border-radius: 999px;
transition: width 0.25s ease;
}
body.page-id-56496 .vme-quiz-progress__count {
font-size: 12px;
font-weight: 600;
color: var(--q-muted);
}
/* Title: theme makes it display:flex, which puts a gap between the {{child}} token and the apostrophe ("Bella 's"). Normal block flow fixes that and the alignment in one go */
body.page-id-56496 .vme-quiz-step__title {
display: block !important;
font-family: var(--q-disp);
font-size: clamp(25px, 5.2vw, 29px) !important;
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.8px;
color: var(--q-blue);
text-transform: none !important;
margin: 0 0 14px;
text-align: left !important;
}
body.page-id-56496 .vme-quiz-step__help {
font-size: 15px !important;
line-height: 1.45;
color: var(--q-muted);
}
body.page-id-56496 .vme-quiz-step__help p:last-child {
margin-bottom: 0;
}
body.page-id-56496 .vme-quiz-step__help, body.page-id-56496 .vme-quiz-step__body, body.page-id-56496 .vme-quiz-step__help-row * {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Images dropped into the help/body fields via the CMS (promo card on step 1, flex strip on summary) */
body.page-id-56496 .vme-quiz-step__help img, body.page-id-56496 .vme-quiz-step__body img {
display: block;
width: 100%;
height: auto;
float: none !important;
border-radius: 14px;
margin: 0 0 14px !important;
}
body.page-id-56496 .vme-quiz-step__body p:empty {
display: none;
}
/* Field labels (Your name / Your email / Start date) */
body.page-id-56496 .vme-quiz-field__label {
font-family: Inter, Arial, sans-serif;
font-size: 14px !important;
font-weight: 600;
line-height: 1.3;
color: var(--q-blue);
margin: 0 0 8px;
}
body.page-id-56496 .vme-quiz-step__field + .vme-quiz-step__field {
margin-top: 14px;
}
body.page-id-56496 .vme-quiz-step__field input, body.page-id-56496 .vme-quiz-start-date__select {
width: 100%;
box-sizing: border-box;
height: auto;
min-height: 52px;
padding: 14px 16px !important;
font-family: Inter, Arial, sans-serif;
font-size: 17px !important;
line-height: 1.4;
color: var(--q-ink);
background: #fff !important;
border: 1.5px solid var(--q-line) !important;
border-radius: 12px !important;
box-shadow: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.page-id-56496 .vme-quiz-step__field input:focus, body.page-id-56496 .vme-quiz-start-date__select:focus {
outline: none;
border-color: var(--q-purple) !important;
box-shadow: 0 0 0 3px rgba(91, 13, 245, 0.14);
}
/* Radio rows */
body.page-id-56496 .vme-quiz-step__options {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
border: 0;
padding: 0;
margin: 0;
}
body.page-id-56496 .vme-quiz-step__option {
position: relative;
width: 100%;
margin: 0;
cursor: pointer;
}
body.page-id-56496 .vme-quiz-step__option input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
body.page-id-56496 .vme-quiz-step__option-inner {
display: flex;
align-items: center;
justify-content: flex-start !important;
gap: 12px;
width: 100%;
box-sizing: border-box;
padding: 13px 14px;
background: #fff;
border: 1.5px solid var(--q-line);
border-radius: 14px;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
body.page-id-56496 .vme-quiz-step__option-inner::before {
content: "";
flex: none;
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #c9ccd4;
background: #fff;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
body.page-id-56496 .vme-quiz-step__option:hover .vme-quiz-step__option-inner {
border-color: #c3b8e8;
}
body.page-id-56496 .vme-quiz-step__option input:checked + .vme-quiz-step__option-inner {
border-color: var(--q-purple);
background: var(--q-lilac);
}
body.page-id-56496 .vme-quiz-step__option input:checked + .vme-quiz-step__option-inner::before {
border-color: var(--q-purple);
background: var(--q-purple);
box-shadow: inset 0 0 0 4px #fff;
}
body.page-id-56496 .vme-quiz-step__option-label {
font-size: 15.5px !important;
font-weight: 600;
line-height: 1.3;
color: var(--q-ink);
text-align: left;
}
/* Legacy checkbox pills (any checkbox step WITHOUT the menu preview) */
body.page-id-56496 .vme-quiz-step--checkboxes:not([data-pricing-calculation="1"]) .vme-quiz-step__options {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
body.page-id-56496 .vme-quiz-step--checkboxes:not([data-pricing-calculation="1"]) .vme-quiz-step__option-inner {
flex-direction: column;
justify-content: center !important;
text-align: center;
gap: 0;
padding: 12px 6px;
border-radius: 12px;
font-size: 14px;
font-weight: 600;
color: var(--q-ink);
}
body.page-id-56496 .vme-quiz-step--checkboxes:not([data-pricing-calculation="1"]) .vme-quiz-step__option-inner::before {
display: none;
}
body.page-id-56496 .vme-quiz-step--checkboxes:not([data-pricing-calculation="1"]) .vme-quiz-step__option-label {
font-size: 13.5px !important;
text-align: center;
}
body.page-id-56496 .vme-quiz-step--checkboxes:not([data-pricing-calculation="1"]) input:checked + .vme-quiz-step__option-inner {
background: var(--q-purple);
border-color: var(--q-purple);
color: #fff !important;
}
body.page-id-56496 .vme-quiz-step--checkboxes:not([data-pricing-calculation="1"]) input:checked + .vme-quiz-step__option-inner .vme-quiz-step__option-label {
color: #fff !important;
}
@media (max-width: 430px) {
body.page-id-56496 .vme-quiz-step--checkboxes:not([data-pricing-calculation="1"]) .vme-quiz-step__options {
grid-template-columns: repeat(2, 1fr);
}
}
/* ---- Delivery days with menu preview ---- */
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__menu-hint {
margin: 0 0 10px;
font-family: Inter, Arial, sans-serif;
font-size: 14px !important;
line-height: 1.45;
color: var(--q-muted);
text-align: left;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row {
border: 1.5px solid var(--q-line);
border-radius: 14px;
background: #fff;
transition: border-color 0.12s ease, background-color 0.12s ease;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row:hover {
border-color: #c3b8e8;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row:has(input:checked) {
border-color: var(--q-purple);
background: var(--q-lilac);
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row:has(.vme-quiz-step__option-toggle:focus-visible) {
box-shadow: 0 0 0 3px rgba(91, 13, 245, 0.14);
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-check {
width: 50px;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-check-glyph {
width: 22px;
height: 22px;
border: 2px solid #c9ccd4;
border-radius: 6px;
background-color: #fff;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-check input:checked + .vme-quiz-step__option-check-glyph {
background-color: var(--q-purple);
border-color: var(--q-purple);
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-toggle {
min-height: 52px;
padding: 12px 14px 12px 0;
font-family: Inter, Arial, sans-serif;
font-size: 15.5px !important;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0;
color: var(--q-ink) !important;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-toggle svg {
width: 12px;
height: 7px;
color: var(--q-muted);
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-date {
margin-left: 6px;
font-size: 13px;
font-weight: 500;
color: var(--q-muted);
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-date:not(:empty)::before {
content: "·";
margin-right: 6px;
}
/* Menu panel inside a day */
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu {
padding: 2px 14px 12px 50px;
border-top: 1px solid var(--q-line);
background: transparent;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu-row {
flex-direction: row;
align-items: baseline;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--q-line);
font-family: Inter, Arial, sans-serif;
font-size: 14px;
line-height: 1.35;
text-align: left;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu-row:last-child {
border-bottom: 0;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu-label {
width: 7ch;
padding-top: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--q-muted);
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu-value {
color: var(--q-ink);
font-weight: 500;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu-fallback {
padding: 8px 0;
font-size: 13.5px;
line-height: 1.45;
color: var(--q-muted);
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu-fallback a {
color: var(--q-purple);
font-weight: 600;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__days-selected {
margin: 10px 0 0;
text-align: left;
font-family: Inter, Arial, sans-serif;
font-size: 13px;
font-weight: 600;
color: var(--q-blue);
}
@media (max-width: 780px) {
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu {
padding: 2px 14px 12px 50px;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu-row {
flex-direction: row;
align-items: baseline;
gap: 10px;
text-align: left;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu-label {
width: 7ch;
padding-top: 0;
}
}
/* Pricing box + toggle */
body.page-id-56496 .vme-quiz-step__pricing {
background: var(--q-lilac);
border-radius: 14px;
padding: 14px 16px;
margin: 0 0 12px;
}
body.page-id-56496 .vme-quiz-step__pricing-amount {
font-family: var(--q-disp);
font-size: 26px;
font-weight: 800;
line-height: 1;
letter-spacing: -0.5px;
color: var(--q-blue);
}
body.page-id-56496 .vme-quiz-step__pricing-suffix {
font-size: 12.5px;
color: var(--q-muted);
margin-left: 6px;
}
body.page-id-56496 .vme-quiz-toggle {
margin-top: 12px;
}
body.page-id-56496 .vme-quiz-toggle__wrap {
display: flex;
align-items: center;
gap: 12px;
border: 1.5px solid var(--q-line);
border-radius: 14px;
padding: 12px 14px;
margin: 0;
cursor: pointer;
}
body.page-id-56496 .vme-quiz-toggle__track {
flex: none;
position: relative;
width: 46px !important;
height: 26px !important;
border-radius: 13px;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
background: #c9ccd4 !important;
transition: background-color 0.15s ease;
}
body.page-id-56496 .vme-quiz-toggle__thumb {
position: absolute;
transform: none !important;
top: 3px !important;
left: 3px !important;
width: 20px !important;
height: 20px !important;
border-radius: 50%;
background: #fff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
border: 0 !important;
transition: left 0.15s ease;
}
body.page-id-56496 .vme-quiz-toggle__input:checked + .vme-quiz-toggle__track {
background: var(--q-purple) !important;
}
body.page-id-56496 .vme-quiz-toggle__input:checked + .vme-quiz-toggle__track .vme-quiz-toggle__thumb {
left: 23px !important;
}
body.page-id-56496 .vme-quiz-toggle__wrap::before, body.page-id-56496 .vme-quiz-toggle__wrap::after, body.page-id-56496 .vme-quiz-toggle__track::before, body.page-id-56496 .vme-quiz-toggle__track::after {
display: none !important;
}
body.page-id-56496 .vme-quiz-toggle__label {
font-size: 14px;
font-weight: 600;
line-height: 1.3;
color: var(--q-blue);
}
/* Consent (details step — theme sets this to 22px bold, hence the specificity) */
body.page-id-56496 .vme-quiz-consent {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 4px;
cursor: pointer;
}
body.page-id-56496 .vme-quiz-consent__box {
accent-color: var(--q-purple);
flex: none;
margin-top: 2px;
}
body.page-id-56496 .vme-quiz-step--your-details .vme-quiz-consent__label, body.page-id-56496 .vme-quiz-consent__label {
font-size: 13.5px !important;
line-height: 1.45 !important;
font-weight: 500 !important;
color: var(--q-muted) !important;
}
body.page-id-56496 .vme-quiz-step__error {
font-size: 13.5px;
color: #b2232a;
margin: 10px 0 0;
}
/* More info */
body.page-id-56496 .vme-quiz-more-info__trigger {
margin-left: 0 !important;
background: none;
border: 0;
padding: 0;
font-size: 13px !important;
font-weight: 600;
color: var(--q-blue) !important;
border-radius: 0;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
body.page-id-56496 .vme-quiz-more-info__label {
text-decoration: underline;
text-underline-offset: 2px;
}
body.page-id-56496 .vme-quiz-more-info__icon img, body.page-id-56496 .vme-quiz-more-info__icon img.emoji {
display: none !important;
}
body.page-id-56496 .vme-quiz-more-info__icon::after {
content: "i";
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
border-radius: 50%;
border: 1.5px solid var(--q-blue);
font: italic 700 11px Georgia, serif;
}
body.page-id-56496 .vme-quiz-more-info__popup-inner {
background: var(--q-lilac);
border: 1px solid var(--q-line);
border-radius: 12px;
padding: 12px 14px;
}
body.page-id-56496 .vme-quiz-more-info__popup-content {
font-size: 13.5px;
line-height: 1.5;
color: var(--q-muted);
}
/* Nav */
body.page-id-56496 .vme-quiz-nav__prev {
order: 2;
flex: 1 1 100%;
justify-content: center;
background: none !important;
border: 0 !important;
box-shadow: none;
padding: 6px !important;
font-size: 14px !important;
color: var(--q-muted) !important;
}
body.page-id-56496 .vme-quiz-nav__next {
flex: 1;
justify-content: center;
padding: 15px 18px !important;
font-family: Inter, Arial, sans-serif;
font-size: 16px !important;
font-weight: 700;
line-height: 1.1;
color: #fff !important;
background: var(--q-purple) !important;
border: 0;
border-radius: 10px !important;
box-shadow: 0 6px 18px rgba(91, 13, 245, 0.22);
cursor: pointer;
transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.06s ease;
}
body.page-id-56496 .vme-quiz-nav__next:hover {
background: var(--q-purple-dark) !important;
box-shadow: 0 8px 22px rgba(91, 13, 245, 0.3);
}
body.page-id-56496 .vme-quiz-nav__next:active {
transform: translateY(1px);
}
body.page-id-56496 .vme-quiz-nav__prev {
flex: none;
padding: 15px 16px !important;
font-size: 15px !important;
font-weight: 600;
color: var(--q-blue) !important;
background: #fff !important;
border: 1.5px solid var(--q-line) !important;
border-radius: 10px !important;
cursor: pointer;
}
body.page-id-56496 .vme-quiz-nav__prev:hover {
border-color: #c3b8e8 !important;
}
@media (max-width: 479px) {
body.page-id-56496 .vme-quiz-nav {
flex-wrap: wrap;
gap: 8px;
}
body.page-id-56496 .vme-quiz-nav__next {
flex: 1 1 100%;
min-width: 0;
}
body.page-id-56496 .vme-quiz-nav__prev {
flex: 1 1 100%;
justify-content: center;
}
}
/* ---- Summary ---- */
body.page-id-56496 .vme-quiz-summary__texture-image {
margin: 0 0 14px;
}
body.page-id-56496 .vme-quiz-summary__texture-image img {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
}
body.page-id-56496 .vme-quiz-summary__product-title {
font-family: var(--q-disp);
font-size: 22px;
font-weight: 800;
letter-spacing: -0.4px;
line-height: 1.15;
color: var(--q-blue);
margin: 0 0 8px;
}
body.page-id-56496 .vme-quiz-summary__texture-content h6, body.page-id-56496 .vme-quiz-summary__texture-content p {
font-family: Inter, Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: var(--q-muted);
text-transform: none;
letter-spacing: 0;
margin: 0 0 10px;
}
body.page-id-56496 .vme-quiz-summary__texture-content h6:empty {
display: none;
}
body.page-id-56496 .vme-quiz-summary .vme-quiz-step__help-row {
margin: 4px 0 14px;
}
body.page-id-56496 .vme-quiz-summary__recap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 16px;
padding: 14px 16px;
margin: 0 0 14px;
background: var(--q-lilac);
border-radius: 14px;
list-style: none;
}
body.page-id-56496 .vme-quiz-summary__recap-item {
gap: 2px;
}
body.page-id-56496 .vme-quiz-summary__recap-item strong {
font-family: Inter, Arial, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--q-muted);
}
body.page-id-56496 .vme-quiz-summary__recap-item span {
font-family: Inter, Arial, sans-serif;
font-size: 15px;
font-weight: 600;
line-height: 1.3;
color: var(--q-ink);
}
body.page-id-56496 .vme-quiz-summary__product-price {
font-family: var(--q-disp);
font-size: 26px;
font-weight: 800;
letter-spacing: -0.5px;
color: var(--q-blue);
margin: 4px 0 0;
}
body.page-id-56496 .vme-quiz-summary__checkout {
display: block;
width: 100%;
box-sizing: border-box;
padding: 16px 20px !important;
font-size: 16px !important;
font-weight: 700;
text-align: center;
color: #fff !important;
background: var(--q-purple) !important;
border: 0;
border-radius: 10px !important;
box-shadow: 0 6px 18px rgba(91, 13, 245, 0.22);
}
body.page-id-56496 .vme-quiz-restart {
font-size: 13px;
color: var(--q-muted);
}
/* ---- CMS blocks: promo card (step 1) and flex strip (summary). Paste the HTML from the brief into the help/body field ---- */
body.page-id-56496 .vme-promo {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px 14px;
margin: 0 0 14px;
background: var(--q-lilac);
border: 1px solid var(--q-line);
border-radius: 14px;
}
body.page-id-56496 .vme-promo__title {
font-family: Inter, Arial, sans-serif;
font-size: 11px !important;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--q-purple);
margin: 0 0 2px !important;
}
body.page-id-56496 .vme-promo__row {
display: flex;
align-items: flex-start;
gap: 9px;
font-family: Inter, Arial, sans-serif;
font-size: 14px !important;
line-height: 1.35;
color: var(--q-ink);
margin: 0 !important;
}
body.page-id-56496 .vme-promo__row::before {
content: "✓";
flex: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--q-purple);
color: #fff;
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
body.page-id-56496 .vme-promo__row strong {
font-weight: 700;
color: var(--q-blue);
}
body.page-id-56496 .vme-promo__was {
text-decoration: line-through;
color: var(--q-muted);
margin-right: 4px;
}
body.page-id-56496 .vme-flex {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin: 0 0 14px;
padding: 0;
list-style: none;
}
body.page-id-56496 .vme-flex li, body.page-id-56496 .vme-flex__item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
background: #fff;
border: 1.5px solid var(--q-line);
border-radius: 12px;
font-family: Inter, Arial, sans-serif;
font-size: 13.5px !important;
font-weight: 600;
line-height: 1.3;
color: var(--q-ink);
margin: 0 !important;
}
body.page-id-56496 .vme-flex li::before, body.page-id-56496 .vme-flex__item::before {
content: "✓";
flex: none;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--q-mint);
color: var(--q-blue);
font-size: 11px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
}
@media (max-width: 360px) {
body.page-id-56496 .vme-flex {
grid-template-columns: 1fr;
}
}
/* ==== QUIZ v5 TWEAKS — START ==== */
/* Sep 2026. Replaces the v4 block. Sits inside PRODUCT QUIZ — BRAND RESTYLE, after v3.
0) Two fonts only, one type scale 1) More info top-right of every card
2) Continue right on desktop 3) Day-step date + price block
4) Plan page: image left / text right, plan card, calm price
5) The two image blocks. No JavaScript anywhere — everything here is CSS only. */
/* ---- 0. Type foundation: Bricolage for the two headings, Inter for everything else ---- */
body.page-id-56496 .vme-product-quiz {
font-family: Inter, Arial, sans-serif;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: var(--q-ink);
}
/* The progress bar was sitting tight under the site header */
body.page-id-56496 .vme-quiz-progress {
margin: 34px auto 22px !important;
}
/* The theme puts its display face (marche-super) on every
, which is what made the
plan title a third font. Anything with its own class below re-styles itself after this. */
body.page-id-56496 .vme-quiz-step__card strong,
body.page-id-56496 .vme-quiz-step__card b {
font-family: inherit !important;
font-size: inherit !important;
font-weight: 700 !important;
line-height: inherit !important;
letter-spacing: inherit !important;
color: inherit;
}
body.page-id-56496 .vme-quiz-step__card del {
font-weight: inherit;
color: var(--q-muted);
text-decoration: line-through;
}
/* ---- 1. More info: top-right of every card ---- */
body.page-id-56496 .vme-quiz-step__card {
position: relative;
padding: 44px 20px 20px;
}
body.page-id-56496 .vme-quiz-step__more-info-row {
position: absolute;
top: 12px;
right: 14px;
left: auto;
width: auto;
margin: 0 !important;
padding: 0;
justify-content: flex-end !important;
}
body.page-id-56496 .vme-quiz-more-info__trigger {
flex-direction: row-reverse;
gap: 6px;
padding: 5px 10px 5px 8px !important;
font-family: Inter, Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 600;
color: var(--q-muted) !important;
background: #fff;
border: 1px solid var(--q-line) !important;
border-radius: 999px;
line-height: 1;
transition: border-color 0.12s ease, color 0.12s ease;
}
body.page-id-56496 .vme-quiz-more-info__trigger:hover {
border-color: #c3b8e8 !important;
color: var(--q-blue) !important;
}
body.page-id-56496 .vme-quiz-more-info__label {
text-decoration: none;
letter-spacing: 0;
}
body.page-id-56496 .vme-quiz-more-info__icon::after {
width: 15px;
height: 15px;
border-width: 1.5px;
border-color: currentColor;
color: inherit;
font: italic 700 10px Inter, Arial, sans-serif;
}
body.page-id-56496 .vme-quiz-more-info__popup-content {
font-family: Inter, Arial, sans-serif;
font-size: 13.5px;
line-height: 1.5;
color: var(--q-muted);
}
@media (max-width: 479px) {
body.page-id-56496 .vme-quiz-step__card {
padding: 42px 16px 18px;
}
body.page-id-56496 .vme-quiz-more-info__label {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
body.page-id-56496 .vme-quiz-more-info__trigger {
padding: 6px !important;
}
}
/* ---- 2. Nav ----
Base geometry first: the theme sets a fixed height (54px) and width (209px) on both buttons
and lays the nav out as a flex COLUMN, so flex-grow stretched height instead of width.
In flow everywhere by default, Back left and Continue right. Only the dietary step and the
plan page get a bar fixed to the bottom, and only on phones — see the end of this section. */
body.page-id-56496 .vme-quiz-nav {
display: flex;
flex-direction: row !important;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;
margin: 0;
}
body.page-id-56496 .vme-quiz-nav__next, body.page-id-56496 .vme-quiz-nav__prev {
font-family: Inter, Arial, sans-serif !important;
height: auto !important;
}
body.page-id-56496 .vme-quiz-nav__next {
order: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 1 1 100%;
width: 100%;
min-width: 0;
min-height: 52px;
margin: 0;
padding: 14px 18px !important;
box-sizing: border-box;
border-radius: 12px !important;
font-size: 16px !important;
line-height: 1.2 !important;
white-space: nowrap;
}
body.page-id-56496 .vme-quiz-nav__next .vme-quiz-nav__label {
white-space: nowrap;
}
body.page-id-56496 .vme-quiz-nav__prev {
order: 2;
flex: 1 1 100%;
width: auto !important;
min-height: 0;
margin: 0;
padding: 6px 4px !important;
background: none !important;
border: 0 !important;
box-shadow: none !important;
opacity: 1 !important;
justify-content: center;
font-size: 14px !important;
font-weight: 600 !important;
color: var(--q-blue) !important;
text-decoration: underline;
text-underline-offset: 3px;
white-space: nowrap;
}
body.page-id-56496 .vme-quiz-nav__prev svg {
display: none;
}
/* Every Back button ships from the template with the disabled attribute; the quiz's own JS
enables it once there is a step to go back to. Dimmed and inert, not hidden. */
body.page-id-56496 .vme-quiz-nav__prev[disabled] {
opacity: 0.4 !important;
pointer-events: none;
text-decoration: none;
}
/* Continue full width with Back centred underneath is the base above, so the plan page and the
phone layouts need no exceptions of their own. */
/* Phones and small tablets only, and only on the two longest steps: the CTA becomes a bar fixed
to the bottom of the screen. Nothing sticky from 768px up. */
@media (max-width: 767px) {
body.page-id-56496 .vme-quiz-step--summary,
body.page-id-56496 .vme-quiz-step[data-store-key=vam_subscription_dietary_preference],
body.page-id-56496 .vme-quiz-step[data-pricing-calculation="1"] {
padding-bottom: 142px;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-nav,
body.page-id-56496 .vme-quiz-step[data-store-key=vam_subscription_dietary_preference] .vme-quiz-nav,
body.page-id-56496 .vme-quiz-step[data-pricing-calculation="1"] .vme-quiz-nav {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
padding: 10px 16px calc(8px + env(safe-area-inset-bottom));
background: #fff;
border-top: 1px solid var(--q-line);
box-shadow: 0 -8px 24px rgba(8, 75, 109, 0.1);
}
/* The cookie-consent badge sits bottom-left and would land on the bar */
body.page-id-56496 .cky-btn-revisit-wrapper {
bottom: 132px !important;
}
}
/* ---- 3. Day-selection step ---- */
/* Date above the menu: a caption, not a headline */
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-menu-date {
display: block;
font-family: Inter, Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.06em;
text-transform: uppercase;
line-height: 1.2 !important;
color: var(--q-muted) !important;
text-align: left !important;
margin: 6px 0 2px !important;
padding: 0 !important;
background: none !important;
}
/* Price: old price small above, new price once, terms on their own line */
body.page-id-56496 .vme-quiz-step__pricing {
background: var(--q-lilac);
border-radius: 14px;
padding: 13px 16px;
margin: 0 0 12px;
}
body.page-id-56496 .vme-quiz-step__pricing-value {
display: block;
}
body.page-id-56496 .vme-quiz-step__pricing-amount {
display: block;
font-family: Inter, Arial, sans-serif !important;
font-size: 22px !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
line-height: 1.2 !important;
color: var(--q-blue) !important;
}
body.page-id-56496 .vme-quiz-step__pricing-original {
display: block;
font-family: Inter, Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
letter-spacing: 0 !important;
line-height: 1.3 !important;
color: var(--q-muted) !important;
margin: 0 0 1px;
text-decoration: none;
}
body.page-id-56496 .vme-quiz-step__pricing-original::before {
content: "was ";
text-decoration: none;
}
body.page-id-56496 .vme-quiz-step__pricing-original del,
body.page-id-56496 .vme-quiz-step__pricing-original .vme-quiz-step__pricing-suffix {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
margin: 0 !important;
}
body.page-id-56496 .vme-quiz-step__pricing-value > .vme-quiz-step__pricing-suffix {
display: block;
margin: 3px 0 0 !important;
font-family: Inter, Arial, sans-serif !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.35;
color: var(--q-muted) !important;
}
/* ---- 4. Personalised plan page ---- */
body.page-id-56496 .vme-quiz-summary {
display: flex;
flex-direction: column;
}
body.page-id-56496 .vme-plan-head {
order: 1;
}
body.page-id-56496 .vme-quiz-summary__product-title, body.page-id-56496 .vme-quiz-summary__texture-content {
order: 1;
}
body.page-id-56496 .vme-quiz-summary__recap {
order: 2;
}
body.page-id-56496 .vme-quiz-summary__product-price {
order: 3;
}
body.page-id-56496 .vme-quiz-summary .vme-quiz-step__help-row {
order: 4;
margin: 0 0 14px;
}
body.page-id-56496 .vme-quiz-summary__texture-detail, body.page-id-56496 .vme-quiz-step--summary .vme-quiz-step__error {
order: 5;
}
/* Header: image top-left, product name to its right, description underneath.
The card becomes a two-column grid and .vme-quiz-summary becomes display:contents, so its
children sit on that grid directly. That is what makes the horizontal header work with no JS.
On phones the description drops to full width so it is not a thin ribbon. */
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-step__card {
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
column-gap: 14px;
align-content: start;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary {
display: contents;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__texture-image {
grid-column: 1;
grid-row: 1/span 2;
width: 100%;
margin: 0;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__texture-image img {
width: 100%;
height: auto;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 14px;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__product-title {
grid-column: 2;
grid-row: 1;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__texture-content {
grid-column: 2;
grid-row: 2;
margin-bottom: 16px;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__recap,
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-step__help-row,
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__product-price,
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-nav,
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-step__error {
grid-column: 1/-1;
}
/* Fallback shape if the snippet has not run */
body.page-id-56496 .vme-quiz-summary__texture-image img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
border-radius: 16px;
}
body.page-id-56496 .vme-quiz-summary__product-title {
font-family: var(--q-disp) !important;
font-size: 20px !important;
font-weight: 800 !important;
letter-spacing: -0.3px;
line-height: 1.2 !important;
color: var(--q-blue) !important;
margin: 0 0 6px;
}
body.page-id-56496 .vme-quiz-summary__texture-content h6, body.page-id-56496 .vme-quiz-summary__texture-content p {
font-family: Inter, Arial, sans-serif !important;
font-size: 14.5px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
text-transform: none;
color: var(--q-muted) !important;
margin: 0 0 9px !important;
}
body.page-id-56496 .vme-quiz-summary__texture-content h6:first-child {
color: var(--q-ink) !important;
}
body.page-id-56496 .vme-quiz-summary__texture-content h6:empty {
display: none;
}
body.page-id-56496 .vme-quiz-summary__texture-content > *:last-child {
margin-bottom: 0 !important;
}
/* Plan card: hairline rows, small uppercase labels, bold values */
body.page-id-56496 .vme-quiz-summary__recap {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 18px;
row-gap: 0;
background: #fff;
border: 1px solid var(--q-line);
border-bottom: 0;
border-radius: 16px 16px 0 0;
padding: 2px 16px 6px;
margin: 0;
list-style: none;
}
body.page-id-56496 .vme-quiz-summary__recap::before {
content: "Your plan";
grid-column: 1/-1;
font-family: Inter, Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--q-purple);
padding: 12px 0 8px;
border-bottom: 1px solid var(--q-line);
}
body.page-id-56496 .vme-quiz-summary__recap-item {
display: flex;
flex-direction: column;
gap: 3px;
padding: 11px 0;
margin: 0;
border-bottom: 1px solid var(--q-line);
}
body.page-id-56496 .vme-quiz-summary__recap-item:nth-last-child(-n+2) {
border-bottom: 0;
}
body.page-id-56496 .vme-quiz-summary__recap-item strong {
font-family: Inter, Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
line-height: 1.2 !important;
text-transform: uppercase;
color: var(--q-muted) !important;
}
body.page-id-56496 .vme-quiz-summary__recap-item span {
font-family: Inter, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
text-transform: none;
color: var(--q-ink) !important;
}
/* Price: old price on its own small line, then one calm line for the price and its terms.
The theme prints the new price and the terms as a single text node, so CSS cannot size the
figure on its own — shorten the coupon description in WooCommerce to tighten this line. */
/* The price is the plan's bottom line, so it is drawn as the plan card's footer rather than a
separate lilac box floating under it. The label says what the figure is for. */
body.page-id-56496 .vme-quiz-summary__product-price {
display: block;
background: var(--q-lilac);
border: 1px solid var(--q-line);
border-radius: 0 0 16px 16px;
padding: 12px 16px 14px;
margin: 0 0 14px;
}
body.page-id-56496 .vme-quiz-summary__product-price::before {
content: "What you'll pay";
display: block;
font-family: Inter, Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--q-muted);
margin: 0 0 6px;
}
body.page-id-56496 .vme-quiz-summary__price {
font-family: Inter, Arial, sans-serif !important;
font-size: 16px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
line-height: 1.45 !important;
color: var(--q-blue) !important;
margin: 0;
text-wrap: balance;
text-wrap: pretty;
}
body.page-id-56496 .vme-quiz-summary__price del {
display: block;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1.3 !important;
color: var(--q-muted) !important;
margin: 0 0 3px;
}
body.page-id-56496 .vme-quiz-summary__due-today {
margin: 10px 0 0;
padding: 9px 0 0;
border-top: 1px solid rgba(8, 75, 109, 0.1);
font-family: Inter, Arial, sans-serif;
font-size: 13.5px;
font-weight: 700;
line-height: 1.35;
color: var(--q-blue);
}
/* Its own line, so "(this week's deliveries)" stops orphaning a word */
body.page-id-56496 .vme-quiz-summary__due-today-suffix {
display: block;
margin-top: 1px;
font-size: 12.5px;
font-weight: 400;
line-height: 1.35;
color: var(--q-muted);
}
/* v3 styles the checkout anchor separately, so it needs the same geometry as .vme-quiz-nav__next.
Order, width and stickiness are all handled in section 2. */
body.page-id-56496 .vme-quiz-summary__checkout {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: auto !important;
min-height: 52px;
margin: 0;
padding: 14px 18px !important;
box-sizing: border-box;
border-radius: 12px !important;
font-size: 16px !important;
line-height: 1.2 !important;
white-space: nowrap;
}
/* Stops stray CMS paragraphs adding dead space around the flexibility strip */
body.page-id-56496 .vme-quiz-summary .vme-quiz-step__body, body.page-id-56496 .vme-quiz-summary .vme-quiz-step__body p {
font-family: Inter, Arial, sans-serif !important;
font-size: 15px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
margin: 0 !important;
}
@media (max-width: 479px) {
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-step__card {
grid-template-columns: 96px minmax(0, 1fr);
column-gap: 12px;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__texture-image {
grid-row: 1;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__product-title {
align-self: center;
margin-bottom: 0;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__texture-content {
grid-column: 1/-1;
grid-row: 2;
margin-top: 10px;
}
}
@media (max-width: 430px) {
body.page-id-56496 .vme-quiz-summary__recap {
grid-template-columns: 1fr;
padding: 2px 14px 6px;
}
body.page-id-56496 .vme-quiz-summary__recap-item:nth-last-child(-n+2) {
border-bottom: 1px solid var(--q-line);
}
body.page-id-56496 .vme-quiz-summary__recap-item:last-child {
border-bottom: 0;
}
}
/* ---- 5. Benefit chips pasted as HTML into a CMS field ---- */
/* v3 already styles .vme-flex and .vme-flex__item (white chip, mint tick). These add the small
label above them and beat the paragraph rules that otherwise capture a in that field. */
body.page-id-56496 .vme-quiz-summary .vme-flex__title,
body.page-id-56496 .vme-quiz-summary__texture-content .vme-flex__title {
font-family: Inter, Arial, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase;
line-height: 1.2 !important;
color: var(--q-purple) !important;
margin: 16px 0 8px !important;
}
body.page-id-56496 .vme-quiz-summary .vme-flex {
margin: 0 !important;
padding: 0 !important;
list-style: none;
}
body.page-id-56496 .vme-quiz-summary .vme-flex li,
body.page-id-56496 .vme-quiz-summary .vme-flex__item,
body.page-id-56496 .vme-quiz-summary__texture-content .vme-flex__item {
font-family: Inter, Arial, sans-serif !important;
font-size: 13.5px !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: 0 !important;
text-transform: none;
color: var(--q-ink) !important;
margin: 0 !important;
}
/* Each benefit gets its own icon rather than four identical ticks. Put the matching modifier
class on the item: --pause, --days, --grows, --open. An item with no modifier keeps a tick. */
body.page-id-56496 .vme-quiz-summary .vme-flex li::before,
body.page-id-56496 .vme-quiz-summary .vme-flex__item::before {
content: "" !important;
flex: none;
width: 22px;
height: 22px;
border-radius: 50%;
background-color: var(--q-mint);
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
background-image: url("data:image/svg+xml,");
}
body.page-id-56496 .vme-quiz-summary .vme-flex__item--pause::before {
background-image: url("data:image/svg+xml,");
}
body.page-id-56496 .vme-quiz-summary .vme-flex__item--days::before {
background-image: url("data:image/svg+xml,");
}
body.page-id-56496 .vme-quiz-summary .vme-flex__item--grows::before {
background-image: url("data:image/svg+xml,");
}
body.page-id-56496 .vme-quiz-summary .vme-flex__item--open::before {
background-image: url("data:image/svg+xml,");
}
/* ---- 6. Image blocks (any step field still holding flat artwork) ---- */
/* Flat artwork on a white card, so no rounding or shadow — it should read as part of the card */
body.page-id-56496 .vme-quiz-step--text-input .vme-quiz-step__help img,
body.page-id-56496 .vme-quiz-summary .vme-quiz-step__body img {
width: 100%;
max-width: 100%;
height: auto;
border-radius: 0 !important;
margin: 0 0 14px !important;
}
/* ==== QUIZ v5 TWEAKS — END ==== */
/* ==== QUIZ v6 — CENTRED STEP TITLES + PLAN PAGE ON DESKTOP — START ==== */
/* Every step title centred, desktop and mobile (v3 sets them left) */
body.page-id-56496 .vme-quiz-step__title {
text-align: center !important;
}
/* Below: desktop only (min-width:1000px) — phones and tablets keep the v5 single
column. The :has() means only the plan step widens; the other ten stay at 520px. */
@media (min-width: 1000px) {
body.page-id-56496 .vme-product-quiz:has(.vme-quiz-step--summary.is-active) {
max-width: 960px;
}
body.page-id-56496 .vme-product-quiz:has(.vme-quiz-step--summary.is-active) .vme-quiz-progress {
max-width: 960px;
}
/* Two columns: copy on the left (image on top), plan rail on the right */
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-step__card {
grid-template-columns: minmax(0, 1fr) 340px;
column-gap: 30px;
padding: 46px 28px 26px;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__texture-image {
grid-column: 1;
grid-row: 1;
align-self: start;
margin: 0 0 16px;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__texture-image img {
aspect-ratio: 16/9;
border-radius: 16px;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__product-title {
grid-column: 1;
grid-row: 2;
font-size: 24px !important;
margin: 0 0 10px;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__texture-content {
grid-column: 1;
grid-row: 3/span 2;
align-self: start;
margin: 0;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__texture-content p {
font-size: 15px !important;
}
/* Plan card: one column in the rail, so the delivery days read on one line */
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__recap {
grid-column: 2;
grid-row: 1/span 2;
align-self: stretch;
align-content: start;
grid-template-columns: 1fr;
padding: 2px 16px 6px;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__recap-item:nth-last-child(-n+2) {
border-bottom: 1px solid var(--q-line);
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__recap-item:last-child {
border-bottom: 0;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-summary__product-price {
grid-column: 2;
grid-row: 3;
align-self: start;
margin: 0;
}
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-nav {
grid-column: 2;
grid-row: 4;
align-self: start;
margin: 18px 0 0;
}
/* Anything else the template prints sits under the copy column */
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-step__help-row,
body.page-id-56496 .vme-quiz-step--summary .vme-quiz-step__error {
grid-column: 1/-1;
grid-row: 5;
}
}
/* ==== QUIZ v6 — END ==== */
/* ==== PRODUCT QUIZ — BRAND RESTYLE — END ==== */
.vm-remind {
cursor: pointer;
}
.vm-remind .vm-done {
display: none;
}
/* ===== QUIZ v7 — DAY MENU CUE + WEEKLY MENU LINE — START ===== */
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-toggle .vme-quiz-step__option-day-label {
flex: 1 1 auto;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-toggle .vme-quiz-step__option-day-label::after {
content: "See menu";
display: inline-block;
margin-left: 10px;
vertical-align: middle;
font-family: Inter, Arial, sans-serif;
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.01em;
white-space: nowrap;
padding: 6px 10px;
border-radius: 999px;
color: var(--q-purple);
background: rgba(91, 13, 245, 0.08);
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-toggle svg {
color: var(--q-purple);
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-toggle[aria-expanded=true] .vme-quiz-step__option-day-label::after {
content: "Hide menu";
color: var(--q-muted);
background: rgba(93, 108, 123, 0.1);
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row .vme-quiz-step__option-toggle[aria-expanded=true] svg {
color: var(--q-muted);
}
/* weekly-rotation line, sits under the "80% of parents" line */
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__help::after {
content: "Menu rotates every week, open a day to see what’s cooking.";
display: block;
margin-top: 6px;
font-family: Inter, Arial, sans-serif;
font-size: 15px;
line-height: 1.45;
color: var(--q-muted);
}
/* ===== QUIZ v7 — DAY MENU CUE + WEEKLY MENU LINE — END ===== */
/* ===== REFER A FRIEND — BRAND RESTYLE — START ===== */
/* Scope: My account -> Refer a Friend (.gens-refer-a-friend). Mobile-first. */
.woocommerce-account .gens-refer-a-friend {
--raf-purple:#5B0DF5;
--raf-purple-dark:#4909C9;
--raf-purple-soft:#EFE7FF;
--raf-blue:#084B6D;
--raf-lilac:#F9F5FF;
--raf-line:#E9E6F2;
--raf-field:#DCD6EE;
--raf-ink:#1C2A35;
--raf-muted:#5D6C7B;
--raf-head:'Bricolage Grotesque', Inter, Arial, sans-serif;
font-family: Inter, Arial, sans-serif;
color: var(--raf-ink);
text-align: left;
max-width: 520px;
margin: 0 auto;
}
.woocommerce-account .gens-refer-a-friend * {
box-sizing: border-box;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-my-account {
display: flex;
flex-direction: column;
gap: 22px;
}
/* --- Header --- */
.woocommerce-account .gens-refer-a-friend .gens-raf-text {
text-align: left;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-text h2 {
font-family: var(--raf-head);
font-size: 24px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--raf-blue);
margin: 0 0 8px;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-text p {
font-size: 15px;
line-height: 1.55;
color: var(--raf-muted);
margin: 0;
}
/* --- Reward strip --- */
.woocommerce-account .gens-refer-a-friend .gens-raf-reward {
display: flex;
align-items: stretch;
gap: 0;
background: var(--raf-lilac) !important;
border: 1px solid var(--raf-line);
border-radius: 16px;
padding: 16px 8px;
color: var(--raf-ink) !important;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-reward > div {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
text-align: center;
font-size: 0; /* hides the plugin's own label text */
}
.woocommerce-account .gens-refer-a-friend .gens-raf-reward > div::before {
font-size: 13px;
line-height: 1.3;
font-weight: 600;
color: var(--raf-muted);
}
.woocommerce-account .gens-refer-a-friend .gens-raf-reward > div:first-child::before {
content: "You get";
}
.woocommerce-account .gens-refer-a-friend .gens-raf-reward > div:last-child::before {
content: "They get";
}
.woocommerce-account .gens-refer-a-friend .gens-raf-reward > div span {
font-family: var(--raf-head);
font-size: 26px;
line-height: 1.1;
font-weight: 700;
white-space: nowrap;
color: var(--raf-purple) !important;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-reward > span {
flex: 0 0 1px;
width: 1px;
align-self: stretch;
background: var(--raf-field);
font-size: 0;
}
/* --- Field labels (relabelled, customer-first) --- */
.woocommerce-account .gens-refer-a-friend .gens-raf-field {
margin: 0;
text-align: left;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field > label {
display: block;
margin: 0 0 8px;
font-size: 0;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field > label::after {
font-size: 13px;
line-height: 1.3;
font-weight: 600;
color: var(--raf-blue);
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--input--link > label::after {
content: "Your invite link";
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--input:not(.gens-raf-field--input--link) > label::after {
content: "Or give them your code";
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email > label::after {
content: "Send it straight to a friend";
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--social > label::after {
content: "Or share it anywhere";
}
/* --- Copy-to-clipboard rows --- */
.woocommerce-account .gens-refer-a-friend .gens-copy {
display: flex;
align-items: center;
gap: 8px;
background: #fff;
border: 1px solid var(--raf-field);
border-radius: 12px;
padding: 4px 4px 4px 12px;
}
.woocommerce-account .gens-refer-a-friend .gens-copy:focus-within {
border-color: var(--raf-purple);
box-shadow: 0 0 0 3px rgba(91, 13, 245, 0.12);
}
.woocommerce-account .gens-refer-a-friend .gens-copy input {
flex: 1 1 auto;
min-width: 0;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 10px 0 !important;
margin: 0 !important;
height: auto !important;
font-family: inherit;
font-size: 15px;
line-height: 1.3 !important;
color: var(--raf-ink);
text-overflow: ellipsis;
}
.woocommerce-account .gens-refer-a-friend .gens-copy input:focus {
outline: none;
box-shadow: none !important;
}
.woocommerce-account .gens-refer-a-friend .gens-ctc-modern {
flex: 0 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--raf-lilac);
border: 1px solid var(--raf-line);
color: var(--raf-purple);
cursor: pointer;
transition: background 0.15s ease;
}
.woocommerce-account .gens-refer-a-friend .gens-ctc-modern:hover {
background: var(--raf-purple-soft);
}
.woocommerce-account .gens-refer-a-friend .gens-ctc-modern svg {
position: absolute !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 18px;
height: 18px;
}
/* --- Email invite form --- */
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email {
position: relative;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email form {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
}
.woocommerce-account .gens-refer-a-friend .gens-referral_share__email__inputs {
display: flex;
flex-direction: column;
gap: 10px;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email input[type=email],
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email input[type=text] {
width: 100%;
height: auto !important;
background: #fff !important;
border: 1px solid var(--raf-field) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
margin: 0 !important;
min-height: 0 !important;
font-family: inherit;
font-size: 15px;
line-height: 1.3 !important;
color: var(--raf-ink);
box-shadow: none !important;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email input[type=email]:focus,
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email input[type=text]:focus {
outline: none;
border-color: var(--raf-purple) !important;
box-shadow: 0 0 0 3px rgba(91, 13, 245, 0.12) !important;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email input::placeholder {
color: #97A0B3;
}
/* add / remove a friend — pinned next to the label */
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email form > a#js--gens-email-clone,
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email form > a#js--gens-email-remove {
position: absolute !important;
top: -4px !important;
width: 28px !important;
height: 28px !important;
border-radius: 8px !important;
display: flex !important;
align-items: center;
justify-content: center;
background: var(--raf-lilac) !important;
border: 1px solid var(--raf-line) !important;
color: var(--raf-purple) !important;
text-decoration: none !important;
font-family: inherit !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 700 !important;
transition: background 0.15s ease;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email form > a#js--gens-email-clone:hover,
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email form > a#js--gens-email-remove:hover {
background: var(--raf-purple-soft) !important;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email form > a#js--gens-email-clone {
right: 0 !important;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-field--email form > a#js--gens-email-remove {
right: 36px !important;
}
/* primary CTA */
.woocommerce-account .woocommerce-MyAccount-content .gens-refer-a-friend input.gens-raf-send-emails,
.woocommerce-account .gens-refer-a-friend input.gens-raf-send-emails {
display: block;
width: 100%;
height: auto !important;
background: var(--raf-purple) !important;
color: #fff !important;
border: 0 !important;
border-radius: 12px !important;
padding: 14px 18px !important;
margin: 2px 0 0 !important;
font-family: inherit !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
box-shadow: none !important;
cursor: pointer;
transition: background 0.15s ease;
}
.woocommerce-account .woocommerce-MyAccount-content .gens-refer-a-friend input.gens-raf-send-emails:hover,
.woocommerce-account .gens-refer-a-friend input.gens-raf-send-emails:hover {
background: var(--raf-purple-dark) !important;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-submit-success {
font-family: inherit;
font-size: 14px;
line-height: 1.45;
color: var(--raf-blue);
}
/* --- Social share --- */
.woocommerce-account .gens-refer-a-friend .gens-referral_share {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.woocommerce-account .gens-refer-a-friend .gens-referral_share a {
width: 44px;
height: 44px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--raf-lilac);
border: 1px solid var(--raf-line);
color: var(--raf-purple);
text-decoration: none;
transition: background 0.15s ease, transform 0.15s ease;
}
.woocommerce-account .gens-refer-a-friend .gens-referral_share a:hover {
background: var(--raf-purple-soft);
transform: translateY(-1px);
}
.woocommerce-account .gens-refer-a-friend .gens-referral_share a svg,
.woocommerce-account .gens-refer-a-friend .gens-referral_share a svg path {
fill: currentColor !important;
}
.woocommerce-account .gens-refer-a-friend .gens-referral_share a svg {
width: 20px;
height: 20px;
}
/* --- Track your invites --- */
.woocommerce-account .gens-refer-a-friend .gens-referral_stats__title {
font-family: var(--raf-head);
font-size: 18px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--raf-blue) !important;
text-align: left;
margin: 26px 0 10px;
}
.woocommerce-account .gens-refer-a-friend .gens-referral_stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
background: transparent !important;
border: 0 !important;
overflow: visible;
}
.woocommerce-account .gens-refer-a-friend .gens-referral_stats > div {
display: flex;
flex-direction: column-reverse;
align-items: center;
gap: 2px;
background: var(--raf-lilac) !important;
color: var(--raf-ink) !important;
border: 1px solid var(--raf-line) !important;
border-radius: 14px !important;
padding: 14px 12px !important;
text-align: center;
width: 100% !important;
min-width: 0;
font-size: 0; /* hides the plugin's own label text */
cursor: default;
}
.woocommerce-account .gens-refer-a-friend .gens-referral_stats > div span {
font-family: var(--raf-head);
font-size: 26px;
line-height: 1.1;
font-weight: 700;
color: var(--raf-purple) !important;
}
.woocommerce-account .gens-refer-a-friend .gens-referral_stats > div::before {
font-size: 13px;
line-height: 1.3;
font-weight: 600;
color: var(--raf-muted);
}
.woocommerce-account .gens-refer-a-friend .gens-referral_stats > div:first-child::before {
content: "Rewards ready to use";
}
.woocommerce-account .gens-refer-a-friend .gens-referral_stats > div:last-child::before {
content: "Friends still to order";
}
@media (min-width: 600px) {
.woocommerce-account .gens-refer-a-friend .gens-raf-text h2 {
font-size: 26px;
}
.woocommerce-account .gens-refer-a-friend .gens-raf-reward > div span {
font-size: 30px;
}
}
/* ===== REFER A FRIEND — BRAND RESTYLE — END ===== */
/* ==== V&ME QUIZ — DAY STEP: HIDE MENU PREVIEW + PER-MEAL PRICE (Sep 2026) — START ==== */
/* The day name lives inside the toggle button, so the button stays — only the
chevron, menu panel, per-day date and the two cue pseudo-elements go. */
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__menu-hint,
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-menu,
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-date,
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-toggle svg,
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-day-label::after,
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__help::after {
display: none !important;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-toggle {
pointer-events: none;
cursor: default;
}
/* With the expander dead, clicking anywhere on the row selects the day */
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-row {
position: relative;
}
body.page-id-56496 .vme-quiz-step--checkboxes[data-pricing-calculation="1"] .vme-quiz-step__option-check::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
cursor: pointer;
}
/* Per-meal figure removed 22 Sep 2026: the two figures were hardcoded, so they were wrong for other products, other discounts and the one-off plan. It returns once the day step sets the real figure from the price shown. */
/* ==== V&ME QUIZ — DAY STEP — END ==== */
/* ==== V&ME QUIZ — TEXTURE STEP: 3-UP WITH IMAGES — START ==== */
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__options {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
align-items: stretch;
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__option {
height: auto !important;
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__option-inner {
flex-direction: column;
align-items: center;
text-align: center;
gap: 8px;
padding: 12px 8px;
height: auto !important;
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__option-inner::before {
display: none;
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__option-inner::after {
content: "";
order: -1;
flex: 0 0 auto;
width: 100%;
height: auto;
aspect-ratio: 2.19;
margin: 0;
border-radius: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 0 0 1px rgba(8, 7, 64, 0.07);
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__option-label {
font-size: 12.5px !important;
line-height: 1.28 !important;
font-weight: 600 !important;
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] #vam_subscription_texture_smooth + .vme-quiz-step__option-inner::after {
background-image: url(/wp-content/uploads/Smooth.webp);
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] #vam_subscription_texture_lumpy + .vme-quiz-step__option-inner::after {
background-image: url(/wp-content/uploads/Lumpy.webp);
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] #vam_subscription_texture_bite-sized + .vme-quiz-step__option-inner::after {
background-image: url(/wp-content/uploads/Bite-sized.webp);
}
/* ==== V&ME QUIZ — TEXTURE STEP: 3-UP — END ==== */
body.page-id-56496 .vme-quiz-nav {
margin-top: 16px;
}
@media (max-width: 767px) {
body.page-id-56496 .vme-quiz-step--summary,
body.page-id-56496 .vme-quiz-step[data-store-key=vam_subscription_dietary_preference],
body.page-id-56496 .vme-quiz-step[data-pricing-calculation="1"] {
padding-bottom: 129px;
}
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__options::after {
content: "";
grid-column: 1/-1;
width: 100%;
aspect-ratio: 2.19;
border-radius: 12px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 0 0 1px rgba(8, 7, 64, 0.07);
max-height: 0;
opacity: 0;
margin-top: 0;
overflow: hidden;
transition: max-height 0.38s ease, opacity 0.3s ease, margin-top 0.38s ease;
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__options:has(input:checked)::after {
max-height: 280px;
opacity: 1;
margin-top: 2px;
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__options:has(#vam_subscription_texture_smooth:checked)::after {
background-image: url(/wp-content/uploads/Smooth.webp);
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__options:has(#vam_subscription_texture_lumpy:checked)::after {
background-image: url(/wp-content/uploads/Lumpy.webp);
}
body.page-id-56496 .vme-quiz-step--radio[data-store-key=vam_subscription_texture] .vme-quiz-step__options:has(#vam_subscription_texture_bite-sized:checked)::after {
background-image: url(/wp-content/uploads/Bite-sized.webp);
}
/* Any stray element in the product grid takes its own full-width row */
@media (min-width: 900px) {
:is(.postid-9653, .postid-9640) .site-main > *:not(.single-product) {
flex: 0 0 100%;
}
:is(.postid-9653, .postid-9640) .single-product.left,
:is(.postid-9653, .postid-9640) .single-product.right {
flex: 1 1 0%;
min-width: 0;
}
}
/* ==== CHECKOUT — BRAND RESTYLE — START ==== */
/* Scoped to the checkout form, form.woocommerce-checkout (the order-received page keeps the
thank-you rules above). Restyle only: no layout, field, shipping or payment changes.
Selectors repeat the theme's own (themes/vandme styles.css, woocommerce.css) so these win by
coming later. Stripe's hidden style input is left alone. Uses the --vme- tokens. */
form.woocommerce-checkout {
font-family: var(--vme-font-body);
font-weight: 400;
color: var(--vme-text);
}
/* white page, like the rest of the store (styles.css sets #f5f6f8 behind the checkout) */
body.woocommerce-checkout #content {
background-color: var(--vme-white);
}
/* cards: white, 1px border, 16px radius, no shadow (the totals card loses its 2px purple border) */
form.woocommerce-checkout .checkout-card > .card-content,
form.woocommerce-checkout .checkout-card.weekly-totals > .card-content {
background-color: var(--vme-white);
border: 1px solid var(--vme-border);
border-radius: var(--vme-radius-card);
box-shadow: none;
}
form.woocommerce-checkout .checkout-card.checkout-coupon-form > .card-content,
form.woocommerce-checkout .delivery-slot > .card-content,
form.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper.card-content {
border: 0;
background: transparent;
}
/* card titles: Title style */
form.woocommerce-checkout .checkout-card .card-header .card-title,
form.woocommerce-checkout h3.card-title.payment-title {
font: 800 var(--vme-title)/1.2 var(--vme-font-head);
letter-spacing: -0.01em;
color: var(--vme-navy);
text-transform: none;
}
/* field names inside cards ("Product", "Delivery slot", "Have a discount code?") */
form.woocommerce-checkout .card-content dt,
form.woocommerce-checkout .card-content .card-title {
font: 700 var(--vme-body)/1.5 var(--vme-font-body);
color: var(--vme-navy);
letter-spacing: 0;
}
form.woocommerce-checkout .card-content dd,
form.woocommerce-checkout .product-quantity {
font-weight: 400;
color: var(--vme-text);
}
form.woocommerce-checkout .card-subtitle {
font: 400 var(--vme-small)/1.45 var(--vme-font-body);
color: var(--vme-text);
}
/* edit order: text link */
form.woocommerce-checkout .vme-checkout__edit-order,
form.woocommerce-checkout .vme-checkout__edit-order span {
font: 700 var(--vme-body)/1.4 var(--vme-font-body);
color: var(--vme-purple);
text-decoration: none;
}
/* prices are navy, never lower-cased (WooCommerce's bdi rule lower-cases them) */
form.woocommerce-checkout .woocommerce-Price-amount,
form.woocommerce-checkout .woocommerce-Price-amount bdi,
form.woocommerce-checkout .woocommerce-Price-currencySymbol {
color: var(--vme-navy);
text-transform: none;
}
/* total due: Title style */
form.woocommerce-checkout .woocommerce-checkout-review-order-table .weekly-totals .card-content dt.due-today,
form.woocommerce-checkout .woocommerce-checkout-review-order-table .weekly-totals .card-content dd.due-today,
form.woocommerce-checkout .due-today .woocommerce-Price-amount,
form.woocommerce-checkout .due-today bdi,
form.woocommerce-checkout .due-today .woocommerce-Price-currencySymbol {
font: 800 var(--vme-title)/1.2 var(--vme-font-head);
letter-spacing: -0.01em;
color: var(--vme-navy);
}
/* delivery slot tiles: white with a border, purple when chosen */
form.woocommerce-checkout #shipping_method_0 li label {
border: 1px solid var(--vme-border);
border-radius: var(--vme-radius-btn);
color: var(--vme-navy);
}
form.woocommerce-checkout #shipping_method_0 li input:checked + label {
background-color: var(--vme-purple);
border-color: var(--vme-purple);
color: var(--vme-white);
}
/* form labels and fields */
form.woocommerce-checkout .form-row label {
font: 700 var(--vme-body)/1.5 var(--vme-font-body);
color: var(--vme-navy);
}
form.woocommerce-checkout .form-row label .optional {
font-weight: 400;
color: var(--vme-text);
}
form.woocommerce-checkout .form-row input.input-text:where(:not(#wc-stripe-hidden-style-input)),
form.woocommerce-checkout .form-row textarea.input-text,
form.woocommerce-checkout .checkout-card#customer_details .form-row input.input-text,
form.woocommerce-checkout .checkout-card#customer_details .form-row textarea {
background-color: var(--vme-white);
border: 1px solid var(--vme-border);
border-radius: var(--vme-radius-btn);
font: 400 var(--vme-body)/1.5 var(--vme-font-body);
color: var(--vme-navy);
}
/* discount code: field and button stay joined */
form.woocommerce-checkout .woocommerce-checkout-review-order-table .weekly-totals .checkout-coupon-form .checkout-coupon-form__input {
background-color: var(--vme-white);
border: 1px solid var(--vme-border);
border-right: 0;
border-radius: var(--vme-radius-btn) 0 0 var(--vme-radius-btn);
font: 400 var(--vme-body)/1.5 var(--vme-font-body);
color: var(--vme-navy);
}
form.woocommerce-checkout .woocommerce-checkout-review-order-table .weekly-totals .checkout-coupon-form .checkout-coupon-form__submit {
background-color: var(--vme-purple);
color: var(--vme-white);
border-radius: 0 var(--vme-radius-btn) var(--vme-radius-btn) 0;
font: 700 var(--vme-body)/24px var(--vme-font-body);
text-transform: none;
letter-spacing: 0;
}
/* payment box: warm panel, Small text */
form.woocommerce-checkout #payment div.payment_box {
background-color: var(--vme-warm);
border-radius: var(--vme-radius-btn);
color: var(--vme-text);
}
form.woocommerce-checkout #payment div.payment_box::before {
border-bottom-color: var(--vme-warm);
}
form.woocommerce-checkout #payment div.payment_box :is(p, label, span, strong, a, .wc-stripe-payment-method-instruction) {
font-size: var(--vme-small);
line-height: 1.45;
}
form.woocommerce-checkout #payment div.payment_box a {
color: var(--vme-purple);
font-weight: 700;
}
/* terms */
form.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text {
font: 400 var(--vme-small)/1.45 var(--vme-font-body);
color: var(--vme-text);
}
form.woocommerce-checkout .woocommerce-terms-and-conditions-link {
font-weight: 700;
color: var(--vme-purple);
}
/* place order: primary button (this selector outranks pands-style.css's button colour) */
form.woocommerce-checkout .checkout-card#payment #place_order {
background: var(--vme-purple);
color: var(--vme-white);
border: 0;
border-radius: var(--vme-radius-btn);
box-shadow: var(--vme-shadow-btn);
min-height: 56px;
padding: 16px 24px;
font: 700 var(--vme-body)/24px var(--vme-font-body);
text-transform: none;
letter-spacing: 0;
}
@media (max-width: 767px) {
form.woocommerce-checkout .checkout-card#payment #place_order {
display: block;
width: 100%;
}
form.woocommerce-checkout .checkout-card#payment .form-row.place-order {
padding-left: 0;
padding-right: 0;
} /* full card width on phone */
}
/* ==== CHECKOUT — BRAND RESTYLE — END ==== */
/*# sourceMappingURL=styles.css.map */