/** Shopify CDN: Minification failed
Line 53:0 All "@import" rules must come first
**/
/*
Omeera Checkout Page Styling
Paste into: Online Store > Themes > Edit Code > Assets > omeera-checkout.css
Then add in theme.liquid :
{{ 'omeera-checkout.css' | asset_url | stylesheet_tag }}
Or add via Shopify Checkout settings > Custom CSS (Shopify Plus)
NOTE: Standard Shopify (non-Plus) has limited checkout CSS access.
For non-Plus stores, paste the :root variables and override classes
into Settings > Checkout > Additional scripts or theme.liquid.
For non-Plus: The checkout branding can be updated via
Admin > Settings > Checkout > Customize checkout appearance.
Use these hex values there:
Accent color: #D946A8
Button background: #D946A8
Button text: #FFFFFF
Background: #FBF6F8
Form background: #FFFFFF
Input border: #EBD9E1
Body text: #2A1525
Error: #E53E3E
*/
/* ============================================================
CHECKOUT BRANDING VARIABLES — matches omeera-landing.liquid
============================================================ */
:root {
--oc-cream: #FBF6F8;
--oc-white: #FFFFFF;
--oc-border: #EBD9E1;
--oc-pink: #FBE7F1;
--oc-pink-deep: #F5D7E8;
--oc-text: #2A1525;
--oc-muted: #6B4D5C;
--oc-accent: #D946A8;
--oc-accent-hover: #B8198A;
--oc-accent-soft: #F5C5DA;
--oc-shadow-cta: 0 8px 24px rgba(217, 70, 168, 0.35);
--oc-radius-card: 24px;
--oc-font-body: 'Inter', -apple-system, sans-serif;
--oc-font-serif: 'Playfair Display', Georgia, serif;
}
/* ============================================================
FONT IMPORT
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap');
/* ============================================================
CHECKOUT PAGE BACKGROUND
============================================================ */
body,
.checkout,
.page--checkout {
background: var(--oc-cream) !important;
font-family: var(--oc-font-body) !important;
color: var(--oc-text) !important;
-webkit-font-smoothing: antialiased;
}
/* ============================================================
CHECKOUT HEADER / LOGO AREA
============================================================ */
.checkout-header,
.page--checkout .checkout-header {
background: var(--oc-white) !important;
border-bottom: 1.5px solid var(--oc-border) !important;
padding: 20px 24px !important;
}
.checkout-header__logo-image {
max-height: 40px !important;
}
/* ============================================================
MAIN LAYOUT
============================================================ */
.content-box,
.checkout__content {
background: var(--oc-cream) !important;
}
/* ============================================================
ANNOUNCEMENT / TRUST BAR (custom — add above checkout form)
============================================================ */
.omeera-checkout-trust-bar {
background: var(--oc-accent);
color: var(--oc-white);
font-family: var(--oc-font-body);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.04em;
text-align: center;
padding: 10px 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}
.omeera-checkout-trust-bar span {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
/* ============================================================
ORDER SUMMARY SIDEBAR
============================================================ */
.order-summary,
.sidebar__sections,
.order-summary__section {
background: var(--oc-white) !important;
border: 1.5px solid var(--oc-border) !important;
border-radius: var(--oc-radius-card) !important;
overflow: hidden;
}
.order-summary__section + .order-summary__section {
border-top: 1px solid var(--oc-border) !important;
}
.order-summary__section--product-list {
padding: 20px 24px !important;
}
/* Product thumbnail in order summary */
.product-thumbnail {
border-radius: 12px !important;
overflow: hidden;
border: 1.5px solid var(--oc-border) !important;
}
.product-thumbnail__wrapper {
background: var(--oc-pink) !important;
}
/* Product badge count */
.product-thumbnail__quantity-badge {
background: var(--oc-accent) !important;
color: var(--oc-white) !important;
font-family: var(--oc-font-body) !important;
font-weight: 700 !important;
border-radius: 100px !important;
}
/* Product name in summary */
.product__description__name,
.order-summary__emphasis {
font-family: var(--oc-font-body) !important;
font-weight: 700 !important;
color: var(--oc-text) !important;
}
.product__description__variant,
.order-summary__small-text {
color: var(--oc-muted) !important;
font-size: 0.85rem !important;
}
/* Price in summary */
.order-summary__total-recap strong,
.payment-due__price {
font-family: var(--oc-font-body) !important;
font-weight: 800 !important;
color: var(--oc-text) !important;
letter-spacing: -0.5px;
}
/* Subtotal / total rows */
.total-line__name,
.total-line__price {
font-family: var(--oc-font-body) !important;
color: var(--oc-text) !important;
}
.total-line--shipping .total-line__name::after {
content: " 🎉";
}
/* Discount code input */
.reduction-code__text {
background: var(--oc-pink) !important;
border-color: var(--oc-accent-soft) !important;
color: var(--oc-accent-hover) !important;
border-radius: 100px !important;
font-weight: 700 !important;
font-size: 0.82rem !important;
}
/* ============================================================
MAIN FORM CONTAINER
============================================================ */
.main__content,
.step,
.section--checkout-step {
background: var(--oc-white) !important;
border: 1.5px solid var(--oc-border) !important;
border-radius: var(--oc-radius-card) !important;
padding: 32px !important;
box-shadow: 0 4px 24px rgba(42, 21, 37, 0.06) !important;
}
/* ============================================================
STEP HEADINGS
============================================================ */
.section__title,
.step__sections .section__title {
font-family: var(--oc-font-serif) !important;
font-size: 1.4rem !important;
font-weight: 700 !important;
color: var(--oc-text) !important;
margin-bottom: 20px !important;
}
/* Breadcrumb steps */
.step__breadcrumbs,
.checkout-step-count {
font-family: var(--oc-font-body) !important;
font-size: 0.82rem !important;
color: var(--oc-muted) !important;
}
.step__breadcrumbs a,
.breadcrumb__chevron {
color: var(--oc-accent) !important;
}
/* ============================================================
FORM INPUTS
============================================================ */
.field__input,
.select__select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
font-family: var(--oc-font-body) !important;
font-size: 1rem !important;
color: var(--oc-text) !important;
background: var(--oc-white) !important;
border: 1.5px solid var(--oc-border) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out !important;
width: 100% !important;
min-height: 52px !important;
}
.field__input:focus,
.select__select:focus,
input:focus,
select:focus,
textarea:focus {
border-color: var(--oc-accent) !important;
box-shadow: 0 0 0 3px rgba(217, 70, 168, 0.12) !important;
outline: none !important;
}
/* Floating labels */
.field__label,
.select__label {
font-family: var(--oc-font-body) !important;
color: var(--oc-muted) !important;
font-size: 0.88rem !important;
}
.field__input:focus ~ .field__label,
.field__input:not(:placeholder-shown) ~ .field__label {
color: var(--oc-accent) !important;
font-size: 0.75rem !important;
}
/* Input error state */
.field--error .field__input,
.field--error input {
border-color: #E53E3E !important;
background: #FFF5F5 !important;
}
.field__message--error {
color: #E53E3E !important;
font-size: 0.82rem !important;
font-family: var(--oc-font-body) !important;
}
/* ============================================================
EXPRESS CHECKOUT BUTTONS (Shop Pay, PayPal, GPay)
============================================================ */
.shopify-payment-button__button,
.dynamic-checkout__button {
border-radius: 100px !important;
min-height: 52px !important;
font-family: var(--oc-font-body) !important;
font-weight: 700 !important;
transition: all 0.3s ease-out !important;
}
.shopify-payment-button__button:hover {
transform: scale(1.02) !important;
}
/* Divider between express and form */
.express-checkout__divider,
.shopify-payment-button__separator {
color: var(--oc-muted) !important;
font-size: 0.82rem !important;
font-family: var(--oc-font-body) !important;
}
/* ============================================================
SHIPPING METHOD OPTIONS
============================================================ */
.radio-wrapper,
.content-box__row--shipping-method {
border: 1.5px solid var(--oc-border) !important;
border-radius: 14px !important;
padding: 16px 20px !important;
margin-bottom: 10px !important;
background: var(--oc-white) !important;
transition: all 0.2s ease-out !important;
cursor: pointer;
}
.radio-wrapper:hover {
border-color: var(--oc-accent-soft) !important;
background: #fff5fb !important;
}
.radio-wrapper--selected,
.radio-wrapper[data-checked="true"] {
border-color: var(--oc-accent) !important;
background: linear-gradient(135deg, #fff5fb 0%, var(--oc-white) 100%) !important;
box-shadow: 0 0 0 3px rgba(217, 70, 168, 0.08) !important;
}
/* Custom radio dot */
.radio__input,
input[type="radio"] {
accent-color: var(--oc-accent) !important;
width: 20px !important;
height: 20px !important;
}
.radio-wrapper__label,
.shipping-method__name {
font-family: var(--oc-font-body) !important;
font-weight: 600 !important;
color: var(--oc-text) !important;
font-size: 0.97rem !important;
}
.shipping-method__price {
font-family: var(--oc-font-body) !important;
font-weight: 700 !important;
color: var(--oc-accent) !important;
}
/* Free shipping highlight */
.shipping-method__price:contains("Free"),
.shipping-method__price[data-free="true"] {
color: #16A34A !important;
}
/* ============================================================
PAYMENT METHOD OPTIONS
============================================================ */
.section--payment-method .content-box {
border-radius: 16px !important;
overflow: hidden;
border: 1.5px solid var(--oc-border) !important;
}
.section--payment-method .content-box__row {
border-bottom: 1px solid var(--oc-border) !important;
padding: 18px 20px !important;
}
.section--payment-method .content-box__row:last-child {
border-bottom: none !important;
}
/* ============================================================
SECURE CHECKOUT BADGE
============================================================ */
.shown-if-js .lock-icon,
.checkout__secure-badge,
.secure-checkout {
color: var(--oc-muted) !important;
font-size: 0.82rem !important;
font-family: var(--oc-font-body) !important;
}
/* ============================================================
MAIN CTA — COMPLETE PURCHASE BUTTON
============================================================ */
.step__footer__continue-btn,
.btn--primary,
button[data-trekkie-id="complete_purchase_button"],
#checkout-pay-button,
.btn.field__input--primary {
font-family: var(--oc-font-body) !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
background: var(--oc-accent) !important;
color: var(--oc-white) !important;
border: none !important;
border-radius: 100px !important;
padding: 18px 36px !important;
min-height: 56px !important;
box-shadow: var(--oc-shadow-cta) !important;
transition: all 0.3s ease-out !important;
cursor: pointer !important;
width: 100% !important;
letter-spacing: 0.01em;
}
.step__footer__continue-btn:hover,
.btn--primary:hover,
#checkout-pay-button:hover {
background: var(--oc-accent-hover) !important;
transform: scale(1.02) !important;
box-shadow: 0 12px 32px rgba(217, 70, 168, 0.45) !important;
}
.step__footer__continue-btn:active,
.btn--primary:active {
transform: scale(0.99) !important;
}
/* Secondary / back buttons */
.step__footer__previous-btn,
.btn--secondary,
.previous-link {
font-family: var(--oc-font-body) !important;
color: var(--oc-accent) !important;
font-weight: 600 !important;
font-size: 0.92rem !important;
background: none !important;
border: none !important;
text-decoration: underline !important;
cursor: pointer !important;
}
/* ============================================================
TRUST SECTION BELOW BUTTON (custom HTML block)
============================================================ */
.omeera-checkout-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 16px;
padding: 16px 0;
font-family: var(--oc-font-body);
font-size: 0.82rem;
font-weight: 600;
color: var(--oc-muted);
border-top: 1px solid var(--oc-border);
}
.omeera-checkout-trust span {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
/* ============================================================
FOOTER
============================================================ */
.checkout-footer,
.page--checkout .checkout-footer {
background: var(--oc-cream) !important;
border-top: 1px solid var(--oc-border) !important;
padding: 20px 24px !important;
}
.checkout-footer__content a {
color: var(--oc-muted) !important;
font-family: var(--oc-font-body) !important;
font-size: 0.8rem !important;
text-decoration: none;
}
.checkout-footer__content a:hover {
color: var(--oc-accent) !important;
}
/* ============================================================
CONFIRMATION PAGE
============================================================ */
.os-header__heading,
.thank-you__title {
font-family: var(--oc-font-serif) !important;
font-size: clamp(1.8rem, 4vw, 2.6rem) !important;
font-weight: 700 !important;
color: var(--oc-text) !important;
}
.os-step__title {
font-family: var(--oc-font-body) !important;
font-weight: 700 !important;
color: var(--oc-text) !important;
}
.os-header {
background: linear-gradient(135deg, var(--oc-pink) 0%, var(--oc-cream) 100%) !important;
border-bottom: 1.5px solid var(--oc-border) !important;
padding: 32px 24px !important;
}
/* Confirmation checkmark */
.os-header__hanging-icon svg circle,
.os-header__hanging-icon svg path {
fill: var(--oc-accent) !important;
stroke: var(--oc-accent) !important;
}
/* ============================================================
TOOLTIP / POPOVER
============================================================ */
.tooltip__text {
background: var(--oc-text) !important;
font-family: var(--oc-font-body) !important;
font-size: 0.8rem !important;
border-radius: 8px !important;
}
/* ============================================================
MOBILE RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.main__content,
.step,
.section--checkout-step {
border-radius: 16px !important;
padding: 20px 16px !important;
}
.order-summary,
.sidebar__sections {
border-radius: 16px !important;
}
.step__footer__continue-btn,
.btn--primary,
#checkout-pay-button {
font-size: 1rem !important;
padding: 18px 24px !important;
min-height: 56px !important;
}
.omeera-checkout-trust {
gap: 12px;
font-size: 0.78rem;
}
.omeera-checkout-trust-bar {
font-size: 0.75rem;
gap: 12px;
padding: 8px 12px;
}
.radio-wrapper,
.content-box__row--shipping-method {
padding: 14px 16px !important;
}
}
@media (max-width: 480px) {
.main__content,
.step {
padding: 16px 12px !important;
}
.omeera-checkout-trust {
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
}
/* ============================================================
CUSTOM CHECKOUT ELEMENTS
Add this HTML snippet above your checkout button via
Shopify checkout additional scripts or theme customization:
🚚 Free Shipping
🛡️ 30-Day Money-Back Guarantee
⭐ 328+ Verified Reviews
🔒 Secure Checkout
And add this below the CTA button:
🛡️ Money-Back Guarantee
🚚 Free AU Shipping
⭐ 4.9/5 Stars
🔒 256-bit SSL
============================================================ */