/* Landing Funnel - mobile-first, theme-independent CSS bundle.
* Owns 100% of the funnel-page UI. Does not depend on any theme asset.
*/
:root {
/* Brand */
--lf-accent: #0ea5e9;
--lf-accent-hover: #0284c7;
--lf-accent-soft: #e0f2fe;
--lf-accent-ring: rgba(14, 165, 233, 0.25);
/* Urgency / sale */
--lf-sale: #f97316;
--lf-sale-hover: #ea580c;
--lf-sale-soft: #fff7ed;
/* Neutrals */
--lf-text: #0f172a;
--lf-text-soft: #334155;
--lf-muted: #64748b;
--lf-bg: #ffffff;
--lf-bg-alt: #f8fafc;
--lf-bg-tint: #f1f5f9;
--lf-border: #e2e8f0;
--lf-border-strong: #cbd5e1;
/* Status */
--lf-success: #16a34a;
--lf-error: #dc2626;
--lf-warning: #f59e0b;
/* Radii */
--lf-radius-sm: 0.5rem;
--lf-radius: 0.875rem;
--lf-radius-lg: 1.25rem;
--lf-radius-pill: 999px;
/* Shadow scale */
--lf-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
--lf-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
--lf-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.08);
--lf-shadow-lg: 0 18px 40px -16px rgba(15, 23, 42, 0.18);
/* Layout */
--lf-max-width: 760px;
--lf-max-width-wide: 1080px;
/* Typography */
--lf-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* Motion */
--lf-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
/* Keyboard users get clear focus rings; pointer users don't see them. */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--lf-accent-ring); outline-offset: 2px; }
/* Honor user-level scroll preference */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
::selection {
background: var(--lf-accent-soft);
color: var(--lf-accent-hover);
}
body {
margin: 0;
padding: 0;
font-family: var(--lf-font);
font-size: 16px;
line-height: 1.55;
color: var(--lf-text);
background:
radial-gradient(1200px 600px at 50% -200px, var(--lf-accent-soft) 0%, rgba(224, 242, 254, 0) 60%),
var(--lf-bg);
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, video {
max-width: 100%;
height: auto;
display: block;
}
a { color: inherit; }
.lf-container {
width: 100%;
max-width: var(--lf-max-width);
margin: 0 auto;
padding: 1.5rem 1rem 2rem;
}
/* ============================
HERO
============================ */
.lf-hero {
margin-bottom: 2rem;
display: grid;
gap: 1.25rem;
}
.lf-hero__media {
position: relative;
border-radius: var(--lf-radius-lg);
overflow: hidden;
background: var(--lf-bg-alt);
box-shadow: var(--lf-shadow-md);
aspect-ratio: 4 / 3;
}
.lf-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--lf-ease);
}
.lf-hero__media:hover img { transform: scale(1.03); }
/* Sale badge on image */
.lf-badge {
position: absolute;
top: 0.875rem;
left: 0.875rem;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 56px;
min-height: 56px;
padding: 0.375rem 0.625rem;
border-radius: var(--lf-radius);
background: linear-gradient(135deg, var(--lf-sale) 0%, var(--lf-sale-hover) 100%);
color: #fff;
font-weight: 700;
letter-spacing: 0.02em;
box-shadow: 0 8px 24px -8px rgba(249, 115, 22, 0.65);
transform: rotate(-6deg);
}
.lf-badge--sale .lf-badge__num { font-size: 1rem; line-height: 1; }
.lf-badge--sale .lf-badge__label { font-size: 0.625rem; opacity: 0.9; margin-top: 2px; }
.lf-hero__copy {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
/* Kicker label */
.lf-kicker {
display: inline-flex;
align-items: center;
gap: 0.5rem;
align-self: flex-start;
padding: 0.35rem 0.75rem;
background: var(--lf-sale-soft);
color: var(--lf-sale-hover);
border-radius: var(--lf-radius-pill);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.lf-kicker__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--lf-sale);
box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6);
animation: lf-pulse 1.6s ease-out infinite;
}
@keyframes lf-pulse {
0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.55); }
70% { box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}
.lf-hero__title {
font-size: clamp(1.75rem, 5vw + 1rem, 2.5rem);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 800;
margin: 0;
color: var(--lf-text);
}
.lf-hero__sub {
color: var(--lf-text-soft);
margin: 0;
font-size: 1rem;
line-height: 1.6;
}
/* Rating */
.lf-rating {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--lf-text-soft);
font-size: 0.875rem;
}
.lf-rating__stars { display: inline-flex; color: #f59e0b; gap: 1px; }
.lf-rating__text strong { color: var(--lf-text); font-weight: 700; }
/* Pricing */
.lf-pricing {
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.875rem 1rem;
background: linear-gradient(135deg, #ffffff 0%, var(--lf-bg-alt) 100%);
border: 1px solid var(--lf-border);
border-radius: var(--lf-radius);
box-shadow: var(--lf-shadow-xs);
}
.lf-pricing__row {
display: flex;
align-items: baseline;
gap: 0.625rem;
flex-wrap: wrap;
}
.lf-pricing__current {
font-size: 1.875rem;
font-weight: 800;
color: var(--lf-text);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.lf-pricing__old {
font-size: 1rem;
color: var(--lf-muted);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
}
.lf-pricing__tag {
background: var(--lf-sale);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
padding: 0.15rem 0.5rem;
border-radius: var(--lf-radius-pill);
}
.lf-pricing__save {
color: var(--lf-success);
font-size: 0.8125rem;
font-weight: 600;
}
/* Hero actions + quick trust */
.lf-hero__actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.lf-quick-trust {
list-style: none;
padding: 0;
margin: 0.25rem 0 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.25rem;
color: var(--lf-text-soft);
font-size: 0.8125rem;
}
.lf-quick-trust li {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.lf-quick-trust svg { color: var(--lf-success); }
/* ============================
CTA
============================ */
.lf-cta {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
background: var(--lf-accent);
color: #fff;
border: none;
border-radius: var(--lf-radius);
font-family: inherit;
font-size: 1rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
min-height: 48px;
text-align: center;
box-shadow: 0 8px 24px -8px rgba(14, 165, 233, 0.55);
transition: transform 0.18s var(--lf-ease), box-shadow 0.18s var(--lf-ease), background 0.18s var(--lf-ease);
isolation: isolate;
overflow: hidden;
}
.lf-cta::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.25) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s var(--lf-ease);
z-index: -1;
}
.lf-cta:hover { background: var(--lf-accent-hover); transform: translateY(-1px); box-shadow: 0 12px 30px -10px rgba(14, 165, 233, 0.6); }
.lf-cta:hover::after { transform: translateX(100%); }
.lf-cta:active { transform: translateY(0); box-shadow: 0 6px 18px -6px rgba(14, 165, 233, 0.55); }
.lf-cta:focus-visible { outline: 3px solid var(--lf-accent-ring); outline-offset: 2px; }
.lf-cta[disabled] { opacity: 0.7; cursor: not-allowed; transform: none; }
/* ============================
PRODUCT CARD
============================ */
.lf-product {
padding: 1.25rem;
background: var(--lf-bg);
border: 1px solid var(--lf-border);
border-radius: var(--lf-radius-lg);
margin-bottom: 1.5rem;
box-shadow: var(--lf-shadow-sm);
}
.lf-product__head {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-bottom: 0.875rem;
}
.lf-product__title {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
letter-spacing: -0.01em;
}
.lf-product__sku {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
color: var(--lf-success);
font-weight: 600;
}
.lf-dot {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
}
.lf-dot--success {
background: var(--lf-success);
box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.18);
}
.lf-product__desc {
color: var(--lf-text-soft);
font-size: 0.9375rem;
line-height: 1.65;
}
.lf-product__desc img { margin: 0.5rem 0; border-radius: var(--lf-radius-sm); }
.lf-product__desc ul, .lf-product__desc ol { padding-left: 1.25rem; }
.lf-product__desc li { margin: 0.25rem 0; }
.lf-product__desc h3, .lf-product__desc h4 {
margin: 1rem 0 0.5rem;
color: var(--lf-text);
font-weight: 700;
}
/* ============================
FEATURES / TRUST BADGES
============================ */
.lf-features { margin: 0 0 1.5rem; }
.lf-features__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 0;
}
.lf-feature {
position: relative;
padding: 1rem;
background: var(--lf-bg);
border: 1px solid var(--lf-border);
border-radius: var(--lf-radius);
display: flex;
align-items: flex-start;
gap: 0.75rem;
transition: transform 0.18s var(--lf-ease), border-color 0.18s var(--lf-ease), box-shadow 0.18s var(--lf-ease);
}
.lf-feature:hover {
border-color: var(--lf-accent);
transform: translateY(-2px);
box-shadow: var(--lf-shadow-md);
}
.lf-feature__icon {
flex: none;
width: 40px;
height: 40px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--lf-accent-soft);
color: var(--lf-accent-hover);
}
.lf-feature__copy { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.lf-feature strong { font-size: 0.9375rem; color: var(--lf-text); font-weight: 700; line-height: 1.3; }
.lf-feature span { font-size: 0.8125rem; color: var(--lf-muted); line-height: 1.45; }
/* ============================
VARIATION GRID
============================ */
.lf-variation-grid { margin: 1.5rem 0; }
.lf-variation-grid h2 { font-size: 1.125rem; margin: 0 0 0.75rem; font-weight: 700; }
.lf-variation-grid__rows {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.lf-variation-row {
border: 1px solid var(--lf-border);
border-radius: var(--lf-radius);
padding: 0.625rem;
background: var(--lf-bg);
transition: border-color 0.18s var(--lf-ease), box-shadow 0.18s var(--lf-ease);
}
.lf-variation-row:hover { border-color: var(--lf-accent); box-shadow: var(--lf-shadow-sm); }
.lf-variation-row__inner {
display: grid;
grid-template-columns: auto 56px 1fr auto;
gap: 0.75rem;
align-items: center;
cursor: pointer;
}
.lf-variation-row img {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 0.5rem;
}
.lf-variation-row__copy { display: flex; flex-direction: column; }
.lf-qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--lf-border);
border-radius: var(--lf-radius);
overflow: hidden;
}
.lf-qty button {
width: 36px;
height: 36px;
background: transparent;
border: none;
font-size: 1.125rem;
cursor: pointer;
color: var(--lf-text);
transition: background 0.15s var(--lf-ease);
}
.lf-qty button:hover { background: var(--lf-bg-alt); }
.lf-qty input {
width: 40px;
height: 36px;
border: none;
text-align: center;
background: transparent;
font-size: 1rem;
font-variant-numeric: tabular-nums;
}
.lf-qty input::-webkit-inner-spin-button,
.lf-qty input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* ============================
CHECKOUT
============================ */
.lf-checkout {
margin: 1.5rem 0;
padding: 1.5rem 1.25rem;
background: var(--lf-bg);
border: 1px solid var(--lf-border);
border-radius: var(--lf-radius-lg);
box-shadow: var(--lf-shadow-md);
/* Anchor jump from hero CTA - keep a comfortable breathing room above */
scroll-margin-top: 1.5rem;
}
.lf-checkout__head { margin-bottom: 1.25rem; }
/* Step indicator - communicates "almost done" and reduces perceived effort */
.lf-checkout__step {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.625rem;
}
.lf-checkout__step-num {
flex: none;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--lf-accent);
color: #fff;
font-weight: 700;
font-size: 0.9375rem;
border-radius: 50%;
box-shadow: 0 4px 12px -4px var(--lf-accent-ring);
}
.lf-checkout__step-meta {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
}
.lf-checkout__step-label {
font-size: 0.75rem;
color: var(--lf-muted);
font-weight: 500;
}
.lf-checkout__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.125rem 0.5rem;
background: var(--lf-accent-soft);
color: var(--lf-accent-hover);
border-radius: var(--lf-radius-pill);
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
align-self: flex-start;
}
.lf-checkout__title { font-size: 1.375rem; margin: 0 0 0.25rem; font-weight: 800; letter-spacing: -0.01em; }
.lf-checkout__sub { color: var(--lf-muted); margin: 0; font-size: 0.9375rem; }
/* Paired-fields grid: stacked on mobile, side-by-side on tablet+ */
.lf-fields-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0 0.75rem;
}
@media (min-width: 560px) {
.lf-fields-grid { grid-template-columns: 1fr 1fr; }
}
.lf-field { margin-bottom: 0.875rem; }
.lf-field label {
display: block;
font-size: 0.8125rem;
font-weight: 600;
margin-bottom: 0.375rem;
color: var(--lf-text-soft);
}
.lf-required { color: var(--lf-error); margin-left: 0.125rem; }
.lf-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.lf-input-icon {
position: absolute;
left: 0.875rem;
color: var(--lf-muted);
pointer-events: none;
transition: color 0.15s var(--lf-ease);
}
.lf-input-wrap--textarea .lf-input-icon { top: 0.875rem; align-self: flex-start; }
.lf-field input,
.lf-field textarea,
.lf-field select {
width: 100%;
padding: 0.75rem 0.875rem 0.75rem 2.625rem;
border: 1px solid var(--lf-border);
border-radius: var(--lf-radius);
font-size: 1rem;
font-family: inherit;
background: var(--lf-bg);
color: var(--lf-text);
min-height: 48px;
transition: border-color 0.15s var(--lf-ease), box-shadow 0.15s var(--lf-ease);
}
.lf-field textarea { min-height: 80px; resize: vertical; padding-top: 0.75rem; }
.lf-field input:hover,
.lf-field textarea:hover,
.lf-field select:hover { border-color: var(--lf-border-strong); }
.lf-field input:focus-visible,
.lf-field textarea:focus-visible,
.lf-field select:focus-visible {
outline: none;
border-color: var(--lf-accent);
box-shadow: 0 0 0 4px var(--lf-accent-ring);
}
.lf-field input:focus-visible + .lf-input-icon,
.lf-input-wrap:focus-within .lf-input-icon { color: var(--lf-accent); }
.lf-checkout input:user-invalid,
.lf-checkout textarea:user-invalid,
.lf-checkout select:user-invalid {
border-color: var(--lf-error);
box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}
/* Summary - richer card with product thumb, savings ribbon, total */
.lf-summary {
margin: 1rem 0;
padding: 0.875rem;
background: var(--lf-bg-alt);
border: 1px solid var(--lf-border);
border-radius: var(--lf-radius);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.lf-summary__product {
display: flex;
align-items: center;
gap: 0.75rem;
position: relative;
}
.lf-summary__thumb {
flex: none;
width: 56px;
height: 56px;
border-radius: var(--lf-radius-sm);
overflow: hidden;
background: var(--lf-bg);
border: 1px solid var(--lf-border);
}
.lf-summary__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lf-summary__meta {
display: flex;
flex-direction: column;
gap: 0.125rem;
min-width: 0;
flex: 1;
}
.lf-summary__name {
font-weight: 700;
color: var(--lf-text);
font-size: 0.9375rem;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.lf-summary__qty {
font-size: 0.75rem;
color: var(--lf-muted);
}
.lf-summary__ribbon {
flex: none;
padding: 0.25rem 0.5rem;
background: var(--lf-sale);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
border-radius: var(--lf-radius-pill);
letter-spacing: 0.02em;
}
.lf-summary__rows {
display: flex;
flex-direction: column;
gap: 0.125rem;
border-top: 1px dashed var(--lf-border-strong);
padding-top: 0.625rem;
}
.lf-summary__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.125rem 0;
font-size: 0.875rem;
color: var(--lf-text-soft);
gap: 1rem;
}
.lf-summary__row > span:last-child {
font-weight: 600;
color: var(--lf-text);
text-align: right;
font-variant-numeric: tabular-nums;
}
.lf-summary__strikethrough { text-decoration: line-through; color: var(--lf-muted) !important; font-weight: 500 !important; }
.lf-summary__row--save { color: var(--lf-success); }
.lf-summary__row--save > span:last-child { color: var(--lf-success); }
.lf-summary__total {
font-weight: 700;
border-top: 1px solid var(--lf-border);
margin-top: 0.375rem;
padding-top: 0.625rem;
font-size: 1.0625rem;
color: var(--lf-text);
}
.lf-summary__total > span:last-child { color: var(--lf-accent-hover); }
/* Submit button - split layout with action label on left + price on right */
.lf-checkout__submit {
width: 100%;
margin-top: 0.25rem;
min-height: 56px;
padding: 0.875rem 1.25rem;
justify-content: space-between;
font-size: 1rem;
letter-spacing: 0.01em;
}
.lf-checkout__submit-label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.lf-checkout__submit-price {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-variant-numeric: tabular-nums;
padding-left: 0.75rem;
border-left: 1px solid rgba(255, 255, 255, 0.25);
}
/* Inline assurance row under submit */
.lf-checkout__assure-row {
list-style: none;
margin: 0.875rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.25rem;
color: var(--lf-muted);
font-size: 0.75rem;
}
.lf-checkout__assure-row li {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.lf-checkout__assure-row svg {
color: var(--lf-success);
flex: none;
}
.lf-checkout__error {
margin-top: 0.625rem;
padding: 0.625rem 0.875rem;
background: rgba(220, 38, 38, 0.08);
color: var(--lf-error);
border: 1px solid rgba(220, 38, 38, 0.2);
border-radius: var(--lf-radius);
font-size: 0.875rem;
}
/* ============================
MINIMAL TEMPLATE
============================ */
.lf-minimal { text-align: center; padding: 1rem 0; }
.lf-minimal__image {
max-width: 320px;
margin: 0 auto 1rem;
border-radius: var(--lf-radius);
}
.lf-minimal h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
/* ============================
STICKY CTA
============================ */
@keyframes lf-slide-up {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.lf-sticky-cta {
position: fixed;
left: 0;
right: 0;
bottom: 0;
padding: 0.625rem max(1rem, env(safe-area-inset-left)) calc(0.625rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-right));
background: rgba(255, 255, 255, 0.96);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-top: 1px solid var(--lf-border);
box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, 0.15);
z-index: 50;
animation: lf-slide-up 0.4s var(--lf-ease) both;
}
.lf-sticky-cta__inner {
width: 100%;
max-width: var(--lf-max-width);
margin: 0 auto;
display: flex;
align-items: center;
gap: 0.75rem;
}
.lf-sticky-cta__price {
display: flex;
flex-direction: column;
line-height: 1.1;
flex: none;
}
.lf-sticky-cta__current {
font-weight: 800;
font-size: 1.0625rem;
color: var(--lf-text);
font-variant-numeric: tabular-nums;
}
.lf-sticky-cta__old {
font-size: 0.75rem;
color: var(--lf-muted);
text-decoration: line-through;
font-variant-numeric: tabular-nums;
}
.lf-sticky-cta__btn { flex: 1; min-width: 0; }
body.lf-has-sticky-cta,
body:has(.lf-sticky-cta) { padding-bottom: 96px; }
@media (max-width: 991px) {
body.lf-has-sticky-cta,
body:has(.lf-sticky-cta) { padding-bottom: 88px; }
}
/* ============================
404 / utility
============================ */
.lf-404__wrap {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
}
.lf-404__inner { text-align: center; }
.lf-empty { color: var(--lf-muted); }
/* ============================
RTL
============================ */
[dir="rtl"] .lf-pricing__old { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .lf-input-icon { left: auto; right: 0.875rem; }
[dir="rtl"] .lf-field input,
[dir="rtl"] .lf-field textarea { padding: 0.75rem 2.625rem 0.75rem 0.875rem; }
[dir="rtl"] .lf-badge { left: auto; right: 0.875rem; transform: rotate(6deg); }
[dir="rtl"] .lf-variation-row__inner { direction: rtl; }
/* ============================
Reduced motion
============================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after { transition: none !important; animation: none !important; }
.lf-hero__media:hover img { transform: none; }
.lf-feature:hover { transform: none; }
}
/* ============================
PAGE STYLE VARIANTS
Override CSS variables only - markup/layout stays identical.
============================ */
/* default - sky blue + warm sunset orange (baseline) */
/* indigo-bold - deep indigo + amber, premium SaaS feel */
.lf-style-indigo-bold {
--lf-accent: #4f46e5;
--lf-accent-hover: #4338ca;
--lf-accent-soft: #eef2ff;
--lf-accent-ring: rgba(79, 70, 229, 0.28);
--lf-sale: #f59e0b;
--lf-sale-hover: #d97706;
--lf-sale-soft: #fffbeb;
/* deep indigo accent needs light ink on the CTA (dark ink ≈ 2.5:1). */
--lf-accent-ink: #ffffff;
}
.lf-style-indigo-bold body,
body.lf-style-indigo-bold {
background:
radial-gradient(1200px 600px at 50% -200px, #e0e7ff 0%, rgba(224, 231, 255, 0) 60%),
var(--lf-bg);
}
.lf-style-indigo-bold .lf-cta {
box-shadow: 0 10px 28px -10px rgba(79, 70, 229, 0.55);
}
.lf-style-indigo-bold .lf-cta:hover {
box-shadow: 0 14px 32px -12px rgba(79, 70, 229, 0.65);
}
/* emerald-fresh - emerald + coral, healthy / organic */
.lf-style-emerald-fresh {
--lf-accent: #059669;
--lf-accent-hover: #047857;
--lf-accent-soft: #d1fae5;
--lf-accent-ring: rgba(5, 150, 105, 0.28);
--lf-sale: #ef4444;
--lf-sale-hover: #dc2626;
--lf-sale-soft: #fef2f2;
/* emerald accent is too dark for dark ink; light ink ≈ 4.5:1 (AA). */
--lf-accent-ink: #ffffff;
}
.lf-style-emerald-fresh body,
body.lf-style-emerald-fresh {
background:
radial-gradient(1200px 600px at 50% -200px, #d1fae5 0%, rgba(209, 250, 229, 0) 60%),
#f7fdf9;
}
.lf-style-emerald-fresh .lf-cta {
box-shadow: 0 10px 28px -10px rgba(5, 150, 105, 0.55);
}
/* noir - dark slate canvas with electric lime, fashion / luxury */
.lf-style-noir {
--lf-accent: #a3e635;
--lf-accent-hover: #84cc16;
--lf-accent-soft: rgba(163, 230, 53, 0.12);
--lf-accent-ring: rgba(163, 230, 53, 0.35);
--lf-sale: #f43f5e;
--lf-sale-hover: #e11d48;
--lf-sale-soft: rgba(244, 63, 94, 0.12);
--lf-text: #f8fafc;
--lf-text-soft: #cbd5e1;
--lf-muted: #94a3b8;
--lf-bg: #0b1120;
--lf-bg-alt: #111827;
--lf-bg-tint: #1f2937;
--lf-border: #1f2937;
--lf-border-strong: #334155;
--lf-success: #34d399;
--lf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--lf-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.4);
--lf-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
--lf-shadow-lg: 0 20px 50px -16px rgba(0, 0, 0, 0.7);
}
.lf-style-noir body,
body.lf-style-noir {
background:
radial-gradient(1200px 600px at 50% -200px, rgba(163, 230, 53, 0.08) 0%, rgba(163, 230, 53, 0) 60%),
var(--lf-bg);
color: var(--lf-text);
}
body.lf-style-noir .lf-cta {
color: #0b1120;
box-shadow: 0 10px 28px -10px rgba(163, 230, 53, 0.5);
}
body.lf-style-noir .lf-cta:hover { color: #0b1120; }
body.lf-style-noir .lf-field input,
body.lf-style-noir .lf-field textarea,
body.lf-style-noir .lf-field select {
background: var(--lf-bg-alt);
color: var(--lf-text);
}
body.lf-style-noir .lf-summary { background: rgba(255, 255, 255, 0.03); }
body.lf-style-noir .lf-sticky-cta {
background: rgba(11, 17, 32, 0.92);
border-top-color: var(--lf-border);
}
body.lf-style-noir .lf-pricing {
background: linear-gradient(135deg, var(--lf-bg-alt) 0%, var(--lf-bg) 100%);
}
/* rose-pop - vibrant rose + violet, lifestyle / DTC consumer */
.lf-style-rose-pop {
--lf-accent: #e11d48;
--lf-accent-hover: #be123c;
--lf-accent-soft: #ffe4e6;
--lf-accent-ring: rgba(225, 29, 72, 0.28);
--lf-sale: #7c3aed;
--lf-sale-hover: #6d28d9;
--lf-sale-soft: #f5f3ff;
/* vibrant rose accent needs light ink on the CTA (≈ 5.8:1). */
--lf-accent-ink: #ffffff;
}
/* mint-minimal - soft mint + cream, wellness / skincare / food */
.lf-style-mint-minimal {
--lf-accent: #10b981;
--lf-accent-hover: #059669;
--lf-accent-soft: #ecfdf5;
--lf-accent-ring: rgba(16, 185, 129, 0.25);
--lf-sale: #f59e0b;
--lf-sale-hover: #d97706;
--lf-sale-soft: #fffbeb;
--lf-text: #064e3b;
--lf-text-soft: #065f46;
--lf-bg: #fdfcf7;
--lf-bg-alt: #ecfdf5;
--lf-border: #d1fae5;
}
.lf-style-mint-minimal body,
body.lf-style-mint-minimal {
background:
radial-gradient(1200px 600px at 50% -200px, #d1fae5 0%, rgba(209, 250, 229, 0) 60%),
var(--lf-bg);
}
/* sunset-warm - terracotta + golden, artisanal food / gifts / coffee */
.lf-style-sunset-warm {
--lf-accent: #c2410c;
--lf-accent-hover: #9a3412;
--lf-accent-soft: #ffedd5;
--lf-accent-ring: rgba(194, 65, 12, 0.28);
/* terracotta accent is too dark for the default dark ink (~3.5:1);
light ink on the orange CTA lifts contrast to ~5.2:1 (AA). */
--lf-accent-ink: #fff7ed;
--lf-sale: #facc15;
--lf-sale-hover: #eab308;
--lf-sale-soft: #fef9c3;
--lf-text: #431407;
--lf-text-soft: #7c2d12;
--lf-bg: #fff7ed;
--lf-bg-alt: #fed7aa;
--lf-border: #fdba74;
}
.lf-style-sunset-warm body,
body.lf-style-sunset-warm {
background:
radial-gradient(900px 500px at 80% -100px, #fed7aa 0%, rgba(254, 215, 170, 0) 55%),
radial-gradient(900px 500px at 10% 0%, #fef9c3 0%, rgba(254, 249, 195, 0) 55%),
var(--lf-bg);
}
/* cyber-neon - dark + electric cyan/magenta, gaming / tech / gadgets */
.lf-style-cyber-neon {
--lf-accent: #22d3ee;
--lf-accent-hover: #06b6d4;
--lf-accent-soft: rgba(34, 211, 238, 0.14);
--lf-accent-ring: rgba(34, 211, 238, 0.35);
--lf-sale: #f0abfc;
--lf-sale-hover: #e879f9;
--lf-sale-soft: rgba(240, 171, 252, 0.14);
--lf-text: #e2e8f0;
--lf-text-soft: #cbd5e1;
--lf-muted: #94a3b8;
--lf-bg: #020617;
--lf-bg-alt: #0f172a;
--lf-bg-tint: #1e293b;
--lf-border: #1e293b;
--lf-border-strong: #334155;
--lf-success: #34d399;
--lf-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
--lf-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
--lf-shadow-md: 0 10px 30px rgba(34, 211, 238, 0.12);
--lf-shadow-lg: 0 20px 50px -16px rgba(240, 171, 252, 0.2);
}
.lf-style-cyber-neon body,
body.lf-style-cyber-neon {
background:
radial-gradient(1000px 500px at 80% -100px, rgba(240, 171, 252, 0.08) 0%, rgba(240, 171, 252, 0) 60%),
radial-gradient(1000px 500px at 10% 0%, rgba(34, 211, 238, 0.08) 0%, rgba(34, 211, 238, 0) 60%),
var(--lf-bg);
color: var(--lf-text);
}
body.lf-style-cyber-neon .lf-hero__title {
background: linear-gradient(90deg, #22d3ee 0%, #f0abfc 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
body.lf-style-cyber-neon .lf-cta {
background: linear-gradient(135deg, var(--lf-accent) 0%, var(--lf-sale) 100%);
color: #020617;
box-shadow: 0 10px 28px -8px rgba(34, 211, 238, 0.5);
}
body.lf-style-cyber-neon .lf-cta:hover {
color: #020617;
box-shadow: 0 14px 36px -10px rgba(240, 171, 252, 0.6);
}
body.lf-style-cyber-neon .lf-field input,
body.lf-style-cyber-neon .lf-field textarea,
body.lf-style-cyber-neon .lf-field select {
background: var(--lf-bg-alt);
color: var(--lf-text);
border-color: var(--lf-border-strong);
}
body.lf-style-cyber-neon .lf-summary { background: rgba(255, 255, 255, 0.03); }
body.lf-style-cyber-neon .lf-sticky-cta {
background: rgba(2, 6, 23, 0.92);
border-top-color: var(--lf-border);
}
/* ============================
DARK-STYLE SHARED REFINEMENTS
Apply to all dark themes for consistent contrast.
============================ */
body.lf-style-noir .lf-feature,
body.lf-style-cyber-neon .lf-feature {
background: var(--lf-bg-alt);
border-color: var(--lf-border);
}
body.lf-style-noir .lf-feature__icon,
body.lf-style-cyber-neon .lf-feature__icon {
background: rgba(255, 255, 255, 0.04);
}
body.lf-style-noir .lf-product,
body.lf-style-cyber-neon .lf-product,
body.lf-style-noir .lf-checkout,
body.lf-style-cyber-neon .lf-checkout {
background: var(--lf-bg-alt);
border-color: var(--lf-border);
}
body.lf-style-noir .lf-pricing,
body.lf-style-cyber-neon .lf-pricing {
background: linear-gradient(135deg, var(--lf-bg-alt) 0%, var(--lf-bg) 100%);
border-color: var(--lf-border);
}
body.lf-style-noir .lf-checkout__eyebrow,
body.lf-style-cyber-neon .lf-checkout__eyebrow {
background: rgba(255, 255, 255, 0.05);
}
body.lf-style-noir .lf-quick-trust svg,
body.lf-style-cyber-neon .lf-quick-trust svg {
color: var(--lf-success);
}
.lf-style-rose-pop body,
body.lf-style-rose-pop {
background:
radial-gradient(900px 500px at 80% -100px, #ffe4e6 0%, rgba(255, 228, 230, 0) 55%),
radial-gradient(900px 500px at 10% 0%, #f5f3ff 0%, rgba(245, 243, 255, 0) 55%),
var(--lf-bg);
}
.lf-style-rose-pop .lf-hero__title {
background: linear-gradient(90deg, #e11d48 0%, #7c3aed 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.lf-style-rose-pop .lf-cta {
background: linear-gradient(135deg, var(--lf-accent) 0%, var(--lf-sale) 100%);
box-shadow: 0 12px 30px -10px rgba(225, 29, 72, 0.55);
}
.lf-style-rose-pop .lf-cta:hover {
background: linear-gradient(135deg, var(--lf-accent-hover) 0%, var(--lf-sale-hover) 100%);
}
/* ============================
Tablet & desktop
============================ */
@media (min-width: 720px) {
.lf-container { padding: 2rem 1.5rem 2.5rem; }
.lf-hero {
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
margin-bottom: 2.5rem;
}
.lf-hero__media { aspect-ratio: 1 / 1; }
.lf-features__grid { grid-template-columns: repeat(4, 1fr); }
.lf-hero__title { font-size: 2.5rem; }
}
@media (min-width: 1024px) {
.lf-container { max-width: var(--lf-max-width-wide); padding: 2.5rem 2rem 3rem; }
.lf-hero__title { font-size: 3rem; }
.lf-pricing__current { font-size: 2.25rem; }
}
/* =========================================================================
SHARED HERO DESIGN SYSTEM (.sh-*) - extracted from single-product-hero
template so all 4 public templates share one polished look. Scoped under
.lf-page (added to in layout.blade.php). Color tokens map from the
StyleRegistry --lf-* contract; Shofy palette is the fallback.
========================================================================= */
/* ===== Single-Product-Hero ================================================
Color tokens come from the funnel's selected style (one of 8 palettes
defined in StyleRegistry.php - default, indigo-bold, emerald-fresh, noir,
rose-pop, mint-minimal, sunset-warm, cyber-neon). Each style sets a body
class `.lf-style-{key}` in landing-funnel.css that overrides `--lf-*`
tokens. We map them here to template-local names + fall back to the
bundled Shofy palette so the page still renders when no style class is
applied (preview / legacy funnels).
--accent-ink defaults to dark, which works for styles with a bright accent
(noir lime, cyber-neon cyan, mint/sunny). Styles whose accent is a dark or
saturated mid-tone (indigo-bold, emerald-fresh, rose-pop, sunset-warm)
override --accent-ink to a light value so CTA text clears WCAG AA.
========================================================================== */
.lf-page {
--bg: var(--lf-bg, #ffffff);
--bg-card: var(--lf-bg, #ffffff);
--bg-warm: var(--lf-bg-tint, #f3f5f7);
--ink: var(--lf-text, #0e1422);
--ink-2: var(--lf-text-soft, #55585b);
--ink-3: var(--lf-muted, #898c90);
--line: var(--lf-border, #e8ebed);
--line-2: var(--lf-bg-alt, #f3f5f7);
--accent: var(--lf-accent, #fcb800);
--accent-ink: var(--lf-accent-ink, #0e1422);
--accent-dark: var(--lf-accent-hover, #d99c00);
--hot: var(--lf-sale, #ef2d2d);
--hot-soft: var(--lf-sale-soft, #ffe6e5);
--ok: var(--lf-success, #46ac4a);
--shadow-sm: 0 1px 0 rgba(14,20,34,.04), 0 1px 3px rgba(14,20,34,.06);
--shadow-md: 0 1px 0 rgba(14,20,34,.04), 0 12px 28px -10px rgba(14,20,34,.14);
--radius: 4px;
--radius-lg: 8px;
--maxw: 1240px;
--font-display: 'Jost', ui-sans-serif, -apple-system, system-ui, sans-serif;
--font-body: 'Jost', ui-sans-serif, -apple-system, system-ui, 'Segoe UI', sans-serif;
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
font-size: 16px;
line-height: 1.55;
/* clip (not hidden) so a rotated badge / wide child can't cause horizontal
scroll on narrow phones - `hidden` would make a scroll container
and break the position:sticky nav. */
overflow-x: clip;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.lf-page *,
.lf-page *::before,
.lf-page *::after { box-sizing: border-box; }
.lf-page a { color: inherit; text-decoration: none; }
.lf-page img { max-width: 100%; display: block; }
.lf-page button { font-family: inherit; cursor: pointer; }
.lf-page input,
.lf-page textarea,
.lf-page select { font-family: inherit; color: inherit; }
.lf-page ::selection { background: var(--accent); color: var(--accent-ink); }
/* ── Mobile-first breakpoints (literal px; CSS custom-props are unreliable in
@media). Authoring rule: base styles target mobile; min-width queries
enhance upward. These are the system's ORIGINAL transition points, simply
inverted from max-width to min-width so the desktop render is unchanged:
480px - container side-padding step (.sh-wrap)
560px - gallery rail, feature cols, form-grid, sticky bar sizing
720px - section padding, nav links, bundle grid
768px - embedded-checkout stack, FAQ answer inset
880px - hero / trust / reviews / related / checkout: 1-col → multi-col
Note: an inverted boundary is inclusive on the min-width side, so a layout
may switch exactly 1px earlier than the old max-width rule - cosmetically
irrelevant. Larger ranges were kept neutral (e.g. form-grid stays at 560). */
.sh-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
@media (min-width: 480px) { .sh-wrap { padding: 0 24px; } }
.sh-section { padding: 56px 0; position: relative; }
@media (min-width: 720px) { .sh-section { padding: 80px 0; } }
.sh-rule { height: 1px; background: var(--line); border: 0; }
.sh-num { font-variant-numeric: tabular-nums; }
/* Typography */
.sh-serif { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.sh-italic { font-family: var(--font-body); font-style: italic; font-weight: 500; color: var(--accent); letter-spacing: -0.005em; }
.sh-eyebrow {
font-size: 11px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ink-3);
}
/* clamp minimums lowered so long product names / headings don't overflow at
320px (≈288px content width); desktop max unchanged. */
.sh-display-1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 8vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.sh-display-2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 6vw, 44px); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); }
/* Buttons */
.sh-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 16px 26px;
font-size: 14.5px; font-weight: 500; letter-spacing: 0.01em;
border-radius: 999px; border: 1px solid transparent;
white-space: nowrap; /* keep label on one line - wrapping turns the 999px pill into a tall blob */
transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
cursor: pointer;
}
/* Use the .sh-btn.sh-btn-primary compound (specificity 0,2,0) so the ink color
beats `.lf-page a { color: inherit }` (0,1,1) on anchor-based CTAs - otherwise
the nav/hero/sticky buttons inherit body text instead of --accent-ink. */
.sh-btn.sh-btn-primary { background: var(--accent); color: var(--accent-ink); }
.sh-btn-primary:hover { background: var(--accent-dark); }
.sh-btn-primary:active { transform: translateY(1px); }
.sh-btn-lg { padding: 18px 30px; font-size: 16px; }
/* Pills / badges */
.sh-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; font-size: 12px; font-weight: 500;
background: var(--bg-card); border: 1px solid var(--line);
border-radius: 999px; color: var(--ink-2);
}
.sh-badge-sale {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 10px; background: var(--hot); color: #fff8ee;
font-size: 11px; font-weight: 600; letter-spacing: 0.04em; border-radius: 4px;
}
/* Promo bar */
.sh-promo {
background: var(--ink); color: var(--bg-card);
font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
padding: 10px 16px; text-align: center; font-weight: 500;
}
.sh-promo__msg { display: inline-block; animation: sh-fadeIn 500ms ease; }
@keyframes sh-fadeIn { from{opacity:0; transform:translateY(2px)} to{opacity:1; transform:none} }
/* Hero */
.sh-hero { padding: 32px 0 80px; background:
radial-gradient(1200px 600px at 20% -10%, rgba(252,184,0,0.18), transparent 60%),
radial-gradient(900px 500px at 110% 20%, rgba(239,45,45,0.08), transparent 60%),
var(--bg);
}
/* Mobile-first: single column, image above copy; two columns from the
layout breakpoint (880px). */
.sh-hero__grid {
display: grid; grid-template-columns: 1fr;
gap: 32px; align-items: center;
}
.sh-hero__media-wrap { order: -1; }
@media (min-width: 880px) {
.sh-hero__grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; }
.sh-hero__media-wrap { order: 0; }
}
.sh-hero__price {
display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px;
}
.sh-hero__price-current { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 9vw, 60px); line-height: 1; color: var(--ink); }
.sh-hero__price-old { font-size: 17px; color: var(--ink-3); text-decoration: line-through; }
.sh-hero__save { font-size: 13px; color: var(--ink-2); margin-bottom: 24px; }
.sh-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 28px; }
.sh-hero__rating-text { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.sh-hero__pills { display: flex; flex-wrap: wrap; gap: 8px; }
/* Hero gallery - mobile-first: thumbs scroll horizontally under the main
image; from sm (560px) they become a vertical rail beside it. */
.sh-gallery { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sh-gallery__thumbs { display: flex; flex-direction: row; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.sh-gallery__thumbs > * { flex: 0 0 64px; }
@media (min-width: 560px) {
.sh-gallery { grid-template-columns: 72px 1fr; }
.sh-gallery__thumbs { flex-direction: column; overflow-x: visible; padding-bottom: 0; }
.sh-gallery__thumbs > * { flex: 0 0 auto; }
}
.sh-gallery__thumb {
appearance: none; padding: 0;
border: 2px solid var(--line);
border-radius: 6px; background: var(--bg-warm);
overflow: hidden; aspect-ratio: 1/1;
transition: border-color 160ms ease;
cursor: pointer;
}
.sh-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: opacity 160ms ease; }
.sh-gallery__thumb[aria-pressed="true"] { border-color: var(--accent); }
.sh-gallery__thumb[aria-pressed="true"] img { opacity: 1; }
.sh-gallery__main {
background: var(--bg-warm); border-radius: var(--radius-lg);
overflow: hidden; position: relative; aspect-ratio: 4/5;
}
.sh-gallery__main img { width: 100%; height: 100%; object-fit: cover; animation: sh-galFade 280ms ease; }
@keyframes sh-galFade { from{opacity:.5; transform:scale(1.01)} to{opacity:1; transform:none} }
.sh-hero__overlay-tag {
position: absolute; top: 16px; right: 16px;
background: var(--bg-card); border: 1px solid var(--line);
padding: 8px 14px; border-radius: 999px;
font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
display: inline-flex; align-items: center; gap: 8px;
box-shadow: var(--shadow-md);
}
.sh-hero__overlay-discount {
position: absolute; bottom: 60px; right: 16px;
background: var(--hot); color: #fff;
padding: 12px 16px; border-radius: 999px;
display: flex; align-items: center; gap: 10px;
box-shadow: var(--shadow-md);
transform: rotate(-4deg);
}
.sh-hero__overlay-discount-num { font-family: var(--font-display); font-size: 24px; line-height: 1; font-weight: 600; }
.sh-hero__overlay-discount-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.sh-hero__urgency {
margin-top: 14px;
background: var(--bg-card); border: 1px solid var(--line);
padding: 12px 16px; border-radius: 8px;
display: flex; align-items: center; gap: 10px;
font-size: 13px; color: var(--ink-2);
box-shadow: var(--shadow-sm);
}
/* Trust strip */
.sh-trust {
padding: 32px 0;
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
background: var(--bg-card);
}
.sh-trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 880px) { .sh-trust__grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px; } }
.sh-trust__item { display: flex; gap: 14px; align-items: flex-start; }
.sh-trust__icon {
width: 40px; height: 40px; flex-shrink: 0;
background: var(--bg-warm); border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--accent);
}
.sh-trust__title { font-size: 14px; font-weight: 500; }
.sh-trust__sub { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
/* Features (RTE) */
.sh-rte-section { background: var(--bg-warm); }
.sh-rte { font-size: 16px; line-height: 1.7; color: var(--ink-2); max-width: 760px; }
.sh-rte > * { margin: 0; }
.sh-rte > * + * { margin-top: 18px; }
.sh-rte strong { color: var(--ink); font-weight: 600; }
.sh-rte em { font-style: italic; }
.sh-rte a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.sh-rte h2 { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--ink); margin-top: 40px; }
.sh-rte h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--ink); margin-top: 32px; }
.sh-rte h2:first-child, .sh-rte h3:first-child { margin-top: 0; }
.sh-rte ul, .sh-rte ol { padding-left: 22px; }
.sh-rte li + li { margin-top: 8px; }
.sh-rte ul li { list-style: none; position: relative; }
.sh-rte ul li::before {
content: ""; position: absolute; left: -16px; top: 12px;
width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
}
.sh-rte ol { list-style: none; counter-reset: rte-ol; padding-left: 0; }
.sh-rte ol > li { counter-increment: rte-ol; padding-left: 38px; position: relative; }
.sh-rte ol > li::before {
content: counter(rte-ol);
position: absolute; left: 0; top: 2px;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--accent); color: var(--accent-ink);
font-size: 12px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.sh-rte blockquote {
margin: 28px 0; padding: 22px 26px;
background: var(--bg-card); border-left: 3px solid var(--accent);
border-radius: 0 8px 8px 0;
font-family: var(--font-display); font-size: 19px; line-height: 1.5;
color: var(--ink); font-style: italic; font-weight: 500;
}
/* Reviews */
.sh-reviews { background: var(--bg-card); }
.sh-reviews__grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
@media (min-width: 880px) { .sh-reviews__grid { grid-template-columns: 320px 1fr; gap: 56px; } }
.sh-reviews__bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.sh-reviews__bar { flex: 1; height: 6px; background: var(--bg-warm); border-radius: 3px; overflow: hidden; }
.sh-reviews__bar-fill { height: 100%; background: var(--accent); }
.sh-review-card {
background: var(--bg); border: 1px solid var(--line);
border-radius: 10px; padding: 24px;
}
.sh-review-card + .sh-review-card { margin-top: 16px; }
.sh-review-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sh-review-card__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.sh-review-card__body { font-size: 14.5px; color: var(--ink-2); margin: 0 0 14px; }
.sh-review-card__meta { font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.04em; }
/* FAQ */
.sh-faq-list { border-top: 1px solid var(--line); }
.sh-faq-item { border-bottom: 1px solid var(--line); }
.sh-faq-q {
width: 100%; text-align: left; appearance: none;
background: transparent; border: 0;
padding: 22px 0; color: var(--ink);
display: flex; align-items: center; justify-content: space-between; gap: 24px;
cursor: pointer; list-style: none;
}
.sh-faq-q::-webkit-details-marker { display: none; }
.sh-faq-q__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; }
.sh-faq-q__plus {
width: 32px; height: 32px; flex-shrink: 0;
border-radius: 50%; border: 1px solid var(--line);
display: inline-flex; align-items: center; justify-content: center;
transition: transform 200ms ease; color: var(--ink-2);
}
.sh-faq-item[open] .sh-faq-q__plus { transform: rotate(45deg); }
/* Mobile-first: no right inset on phones (keeps line length usable); the 64px
inset (clearing the +/- toggle column) applies from md. */
.sh-faq-a { padding-right: 0; padding-bottom: 22px; margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.55; }
@media (min-width: 768px) { .sh-faq-a { padding-right: 64px; } }
/* Checkout (inline COD form) */
.sh-checkout { background: var(--bg-warm); }
.sh-checkout__heading-row { display: flex; align-items: baseline; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.sh-checkout__step {
width: 28px; height: 28px; border-radius: 50%;
background: var(--accent); color: var(--accent-ink);
display: inline-flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 500;
}
.sh-checkout__secure {
margin-left: auto; font-size: 12px; color: var(--ink-2);
display: inline-flex; align-items: center; gap: 6px;
}
.sh-checkout__grid {
display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start;
}
@media (min-width: 880px) { .sh-checkout__grid { grid-template-columns: 1.4fr 1fr; } }
.sh-checkout__form {
background: var(--bg-card); border: 1px solid var(--line);
border-radius: 12px; padding: 28px;
}
.sh-form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .sh-form-grid { grid-template-columns: 1fr 1fr; } }
.sh-field { display: flex; flex-direction: column; gap: 6px; }
.sh-field--full { grid-column: 1/-1; }
.sh-field label { font-size: 12px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.01em; }
.sh-field .sh-req { color: var(--hot); }
.sh-field .sh-opt { color: var(--ink-3); font-weight: 400; }
.sh-field input, .sh-field textarea {
appearance: none; width: 100%; padding: 14px;
background: var(--bg-card); border: 1px solid var(--line);
border-radius: var(--radius); font-size: 15px; color: var(--ink);
transition: border-color 140ms, background 140ms, box-shadow 140ms;
}
.sh-field input:focus, .sh-field textarea:focus {
outline: none; border-color: var(--accent); border-width: 2px;
/* Stronger amber ring - 0.25 was near-invisible on bright mobile screens. */
box-shadow: 0 0 0 3px rgba(252,184,0,0.45);
}
.sh-cod-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 12px; border-radius: 999px;
background: rgba(252,184,0,0.16); color: var(--accent-dark);
font-size: 13px; font-weight: 500;
}
.sh-checkout__actions {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
}
.sh-checkout__error {
margin-top: 16px; padding: 12px 14px;
background: var(--hot-soft); border: 1px solid var(--hot);
border-radius: 6px; color: #8a1818; font-size: 13.5px;
}
.sh-checkout__error[hidden] { display: none; }
/* Mobile persistent checkout bar - keeps the grand total + a one-tap submit
pinned to the bottom of the viewport while the buyer fills the form (the
in-flow .sh-summary scrolls out of view on the single-column mobile layout).
Redirect-mode only; revealed by initCheckoutBar() once #lf-checkout is in
view. Hidden entirely on desktop where the sticky summary is always visible. */
.sh-checkout-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
display: none; align-items: center; gap: 14px;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
background: var(--bg-card); border-top: 1px solid var(--line);
box-shadow: 0 -6px 20px -10px rgba(14, 20, 34, .25);
}
.sh-checkout-bar.is-visible { display: flex; }
.sh-checkout-bar__info { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.sh-checkout-bar__label { font-size: 11px; color: var(--ink-2); }
.sh-checkout-bar__amount { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.sh-checkout-bar__cta { flex: 1; min-width: 0; }
/* Desktop: never show - the sticky aside already keeps the total visible. */
@media (min-width: 880px) { .sh-checkout-bar.is-visible { display: none; } }
/* Reserve space so the fixed bar never covers the last content on mobile. */
@media (max-width: 879px) { body:has(.sh-checkout-bar) { padding-bottom: 84px; } }
/* Summary aside */
.sh-summary {
background: var(--bg-card); border: 1px solid var(--line);
border-radius: 12px; padding: 24px;
position: sticky; top: 24px;
}
.sh-summary__product-row {
display: flex; gap: 14px; align-items: center;
padding-bottom: 18px; border-bottom: 1px solid var(--line-2);
}
.sh-summary__thumb {
width: 72px; height: 72px; border-radius: 8px; overflow: hidden;
background: var(--bg-warm); flex-shrink: 0;
}
.sh-summary__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sh-summary__totals { padding: 16px 0; border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 8px; }
.sh-summary__row { display: flex; justify-content: space-between; font-size: 14px; color: var(--ink-2); }
.sh-summary__row--save { color: var(--hot); }
.sh-summary__grand { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; }
.sh-summary__grand-amount { font-family: var(--font-display); font-weight: 600; font-size: 30px; }
.sh-summary__assurances { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--ink-2); }
.sh-summary__assurances > div { display: flex; align-items: center; gap: 8px; }
/* Related products - grid wrapper.
Card styling itself comes from ecommerce's front-upsale-crosssale.css
(.ec-cross-sale-*), loaded by EcommerceHelper::registerThemeAssets().
We only define grid + badge overlay positioning here. */
.sh-related { background: var(--bg); }
.sh-related__grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (min-width: 880px) { .sh-related__grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; } }
/* Force amber accent on the ecommerce cross-sale card (overrides the
default --primary-color blue) and align the card to the funnel palette. */
.sh-related .ec-cross-sale-card-inner { background: var(--bg-card); border-color: var(--line); height: 100%; }
.sh-related .ec-cross-sale-card-inner:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.sh-related .ec-cross-sale-name a { color: var(--ink); font-family: var(--font-body); }
.sh-related .ec-cross-sale-name a:hover { color: var(--accent-dark); }
.sh-related .ec-cross-sale-price-current { color: var(--ink); font-family: var(--font-display); font-size: 20px; }
.sh-related .ec-cross-sale-price-old { color: var(--ink-3); }
.sh-related .ec-cross-sale-thumb { background: var(--bg-warm); }
.sh-related .ec-cross-sale-thumb img { object-fit: cover; }
.sh-related__badge {
position: absolute; top: 10px; left: 10px;
background: var(--bg-card); color: var(--ink); z-index: 1;
font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
padding: 4px 8px; border-radius: 4px;
border: 1px solid var(--line);
}
/* Sticky CTA - shown on all viewports (matches the reference). The price
group sits left, the CTA expands to fill the row on the right. */
/* Mobile-first: compact base; min-width:560 restores desktop sizing. */
.sh-sticky {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
background: var(--bg-card); border-top: 1px solid var(--line);
padding: 12px 16px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
display: flex; align-items: center; gap: 12px;
box-shadow: 0 -8px 24px -12px rgba(34,28,20,0.18);
}
.sh-sticky__price { display: flex; flex-direction: column; flex-shrink: 0; }
.sh-sticky__price-row { display: flex; align-items: baseline; gap: 8px; }
.sh-sticky__price-current { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1; }
.sh-sticky__price-old { font-size: 14px; color: var(--ink-3); text-decoration: line-through; }
.sh-sticky__cod { font-size: 11px; color: var(--ink-2); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.sh-sticky__cta { flex: 1; justify-content: center; padding: 14px 18px; font-size: 14px; }
@media (min-width: 560px) {
.sh-sticky { padding: 14px 24px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); gap: 24px; }
.sh-sticky__cta { padding: 16px 24px; font-size: 15px; }
.sh-sticky__price-current { font-size: 26px; }
}
/* Legal */
.sh-legal {
padding: 20px 24px; background: var(--bg);
border-top: 1px solid var(--line-2);
text-align: center; font-size: 11.5px; color: var(--ink-3); letter-spacing: 0.04em;
}
.sh-stars { display: inline-flex; gap: 2px; color: var(--accent); }
.sh-ico { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
.lf-page.lf-has-sticky-cta { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .lf-page.lf-has-sticky-cta { padding-bottom: 0; } }
.sh-scroll-anchor { scroll-margin-top: 24px; }
/* =========================================================================
SECONDARY-TEMPLATE LAYOUTS (.sh-* skin for video / minimal / variation)
Built on the shared design system above so every template reads as a
sibling of single-product-hero. Layout-only; colors come from --lf-* tokens.
========================================================================= */
/* Video hero - full-bleed media with a bottom gradient + overlay copy */
.sh-hero--video { position: relative; padding: 0; min-height: clamp(440px, 72vh, 700px); display: flex; align-items: flex-end; overflow: hidden; }
.sh-hero--video .sh-hero__media,
.sh-hero--video .sh-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-hero--video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(14,20,34,.86) 0%, rgba(14,20,34,.4) 48%, rgba(14,20,34,.08) 100%); }
.sh-hero__overlay { position: relative; z-index: 1; color: #fff; padding: 56px 0; width: 100%; }
.sh-hero__overlay-inner { max-width: 640px; }
.sh-hero__overlay .sh-display-1, .sh-hero__overlay .sh-eyebrow { color: #fff; }
.sh-hero__overlay .sh-hero__sub { color: rgba(255,255,255,.86); }
.sh-hero__overlay .sh-hero__price-current { color: #fff; }
/* Centered hero - minimal-product-ads */
.sh-hero--centered { text-align: center; }
.sh-hero--centered .sh-hero__inner { max-width: 720px; margin: 0 auto; }
.sh-hero--centered .sh-hero__price, .sh-hero--centered .sh-hero__actions, .sh-hero--centered .sh-hero__rating-text { justify-content: center; }
.sh-hero--centered .sh-hero__media { margin: 36px auto 0; max-width: 560px; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/10; background: var(--bg-warm); }
.sh-hero--centered .sh-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Compact hero - variation-grid-checkout */
.sh-hero--compact .sh-hero__grid { grid-template-columns: 1fr; }
@media (min-width: 880px) { .sh-hero--compact .sh-hero__grid { grid-template-columns: 0.85fr 1fr; gap: 44px; } }
.sh-hero--compact .sh-hero__media { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background: var(--bg-warm); }
.sh-hero--compact .sh-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Feature cards (video / minimal) */
.sh-feature-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 560px) { .sh-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .sh-feature-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.sh-feature-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.sh-feature-card__title { font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.sh-feature-card__sub { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin: 0; }
/* Variation grid (.sh-* skin - JS still keys off .lf-variation-row + data-lf-qty*) */
.sh-variation { background: var(--bg-warm); }
.sh-variation__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sh-variation-row { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color 160ms ease, box-shadow 160ms ease; }
.sh-variation-row:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.sh-variation-row__inner { display: flex; align-items: center; gap: 16px; padding: 16px; cursor: pointer; margin: 0; }
.sh-variation-row__inner > input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }
.sh-variation-row__thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--bg-warm); flex-shrink: 0; }
.sh-variation-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sh-variation-row__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-variation-row__name { font-weight: 500; font-size: 14.5px; }
.sh-variation-row__price { color: var(--ink-2); font-size: 14px; }
.sh-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.sh-qty button { width: 36px; height: 36px; background: var(--bg-card); border: 0; color: var(--ink); font-size: 18px; line-height: 1; }
.sh-qty button:hover { background: var(--bg-warm); }
.sh-qty input { width: 44px; text-align: center; border: 0; background: transparent; font-size: 15px; -moz-appearance: textfield; }
.sh-qty input::-webkit-outer-spin-button, .sh-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sh-empty { color: var(--ink-2); font-size: 14px; }
/* ===== Sticky nav ====================================================== */
.sh-nav { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg-card) 82%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--line); }
.sh-nav__inner { display: flex; align-items: center; gap: 20px; padding-top: 14px; padding-bottom: 14px; }
.sh-nav__logo { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mobile-first: anchor links hidden on phones (single-CTA funnel - no
hamburger needed); shown from md. */
.sh-nav__links { display: none; align-items: center; gap: 24px; margin-left: 8px; }
.sh-nav__links a { font-size: 14px; color: var(--ink-2); transition: color 140ms ease; }
.sh-nav__links a:hover { color: var(--ink); }
.sh-nav__cta { margin-left: auto; padding: 9px 16px; font-size: 13.5px; flex-shrink: 0; /* never squeeze the CTA so its label can't wrap */ }
@media (min-width: 720px) {
.sh-nav__links { display: flex; }
.sh-nav__cta { padding: 10px 20px; }
}
/* ===== Bundle / quantity picker ======================================= */
.sh-bundle__grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .sh-bundle__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.sh-bundle__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 22px 20px; background: var(--bg-card); border: 1.5px solid var(--line); border-radius: var(--radius-lg); transition: border-color 160ms ease, box-shadow 160ms ease, transform 120ms ease; cursor: pointer; }
.sh-bundle__card:hover { border-color: var(--accent); }
.sh-bundle__card.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--lf-accent-ring, rgba(252,184,0,0.22)); }
.sh-bundle__badge { position: absolute; top: -10px; left: 20px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.sh-bundle__qty { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--ink); }
.sh-bundle__price { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--ink); }
.sh-bundle__save { font-size: 12px; font-weight: 600; color: var(--hot); }
.sh-bundle__unit { font-size: 12.5px; color: var(--ink-3); }
/* ===== Inline payment-method selector (reused ecommerce partial) ======== */
.sh-payment .checkout-payment-title { font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.sh-payment .list_payment_method { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sh-payment .payment-method-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; background: var(--bg-card); border: 1.5px solid var(--line); border-radius: var(--radius-lg); transition: border-color 160ms ease; }
.sh-payment .payment-method-item:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 3px var(--lf-accent-ring, rgba(252,184,0,0.22)); }
.sh-payment .payment-method-item input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }
.sh-payment .payment-method-item label { font-size: 14.5px; font-weight: 500; color: var(--ink); margin: 0; cursor: pointer; }
.sh-payment .payment_collapse_wrap { flex-basis: 100%; }
.sh-payment .payment_collapse_wrap p { font-size: 13px; color: var(--ink-2); margin: 4px 0 0; }
.sh-payment .payment_collapse_wrap.collapse:not(.show) { display: none; }
/* =====================================================================
EMBEDDED REAL CHECKOUT FORM (.sh-embedded-checkout)
Reskins the standard ecommerce CheckoutForm to match the .sh-*
design system. All rules are scoped under .sh-embedded-checkout to
prevent any bleed into the hero/sections above.
No Bootstrap CSS is loaded - these rules replace Bootstrap utilities
the form markup uses (col-*, row, form-control, btn, etc.).
===================================================================== */
/* ── Reset Bootstrap grid inside the embedded form ────────────────── */
.sh-embedded-checkout .row {
display: flex;
flex-wrap: wrap;
margin-left: -10px;
margin-right: -10px;
gap: 0;
}
.sh-embedded-checkout .col-6,
.sh-embedded-checkout .col-sm-6,
.sh-embedded-checkout .col-12,
.sh-embedded-checkout .col-lg-5,
.sh-embedded-checkout .col-md-6,
.sh-embedded-checkout .col-lg-7,
.sh-embedded-checkout .col-md-12 {
padding-left: 10px;
padding-right: 10px;
flex: 1 1 auto;
min-width: 0;
box-sizing: border-box;
}
/* State / City use Bootstrap .col-sm-6.col-12 - the reset above didn't define
these, so they collapsed to content width (~169px). Restore the responsive
widths: full-width stacked on xs, two-up (50%) from the sm breakpoint.
.col-sm-6 is placed in a min-width media query so it wins over .col-12 at
≥576px (same trick Bootstrap uses to resolve the dual-class precedence). */
.sh-embedded-checkout .col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 576px) {
.sh-embedded-checkout .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
}
/* Order summary → RIGHT, form → LEFT - mirrors the standard ecommerce
checkout, which tags .checkout-order-info with Bootstrap `order-2`.
The .row reset above dropped Bootstrap's order utilities, so honor the
order explicitly here (targeting .form-checkout rather than :first-child,
which actually matched the summary and flipped the proportions). */
/* Mobile-first: stack - order summary above the form; side-by-side from md. */
.sh-embedded-checkout #main-checkout-product-info { flex-direction: column; }
.sh-embedded-checkout #main-checkout-product-info > .checkout-order-info {
order: -1; /* summary above form on mobile */
flex: 0 0 auto;
width: 100%;
}
.sh-embedded-checkout #main-checkout-product-info > .form-checkout {
order: 1;
flex: 1 1 0;
min-width: 0;
}
@media (min-width: 768px) {
.sh-embedded-checkout #main-checkout-product-info { flex-direction: row; }
.sh-embedded-checkout #main-checkout-product-info > .checkout-order-info {
order: 2;
flex: 0 0 clamp(260px, 38%, 340px);
width: auto;
}
}
/* ── Typography / spacing resets ──────────────────────────────────── */
.sh-embedded-checkout p { margin: 0 0 0.5rem; }
.sh-embedded-checkout strong { font-weight: 600; }
.sh-embedded-checkout h3,
.sh-embedded-checkout h4 { font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--ink); }
.sh-embedded-checkout small { font-size: 0.8125rem; color: var(--ink-2); }
.sh-embedded-checkout .text-end { text-align: right; }
.sh-embedded-checkout .float-end { float: right; }
.sh-embedded-checkout .mt-2 { margin-top: 0.5rem; }
.sh-embedded-checkout .mt-3 { margin-top: 0.75rem; }
.sh-embedded-checkout .mb-3 { margin-bottom: 0.75rem; }
.sh-embedded-checkout .mb-5 { margin-bottom: 1.5rem; }
.sh-embedded-checkout .my-3 { margin-top: 0.75rem; margin-bottom: 0.75rem; }
.sh-embedded-checkout .p-2 { padding: 0.5rem; }
.sh-embedded-checkout .p-3 { padding: 0.75rem; }
/* ── Form group & label-above-input layout ─────────────────────────
The ecommerce CheckoutForm uses:
.form-group.mb-3 > .form-input-wrapper > input.form-control + label
.form-group.mb-3 > .phone-input-wrapper > input + hidden + label
.form-group.mb-3 > .select--arrow.form-input-wrapper > select + label
Previous approach floated the label - but :not(:placeholder-shown)
does NOT fire when a is server-prefilled (State /
City) because placeholder is absent. Fix: place the label ABOVE the
input statically, matching .sh-field label appearance.
──────────────────────────────────────────────────────────────────── */
.sh-embedded-checkout .form-group { margin-bottom: 1rem; }
/* .form-input-wrapper becomes a flex column - label on top, input below */
.sh-embedded-checkout .form-input-wrapper,
.sh-embedded-checkout .phone-input-wrapper {
display: flex;
flex-direction: column;
gap: 6px;
position: relative; /* kept for select-arrow pseudo-element */
}
/* Label - static, above the field. Kill any absolute/transform remnant. */
.sh-embedded-checkout .form-input-wrapper > label,
.sh-embedded-checkout .phone-input-wrapper > label {
/* Reset old floating-label positioning */
position: static !important;
top: auto !important;
transform: none !important;
left: auto !important;
/* Static label appearance matching .sh-field label */
display: block;
font-size: 12px;
font-weight: 500;
color: var(--ink-2);
letter-spacing: 0.01em;
pointer-events: none;
white-space: normal;
overflow: visible;
text-overflow: clip;
max-width: none;
order: -1; /* ensure label renders before the input even if DOM order is input→label */
}
/* Input / select / textarea inside .form-input-wrapper - simple flat style */
.sh-embedded-checkout .form-input-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.sh-embedded-checkout .form-input-wrapper select,
.sh-embedded-checkout .form-input-wrapper textarea {
width: 100%;
padding: 0.75rem 0.875rem;
font-size: 0.9375rem;
font-family: var(--font-body, inherit);
color: var(--ink);
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
outline: none;
transition: border-color 160ms ease, box-shadow 160ms ease;
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
min-height: 44px;
}
.sh-embedded-checkout .form-input-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
.sh-embedded-checkout .form-input-wrapper select:hover,
.sh-embedded-checkout .form-input-wrapper textarea:hover {
border-color: var(--lf-border-strong, #cbd5e1);
}
.sh-embedded-checkout .form-input-wrapper input:focus,
.sh-embedded-checkout .form-input-wrapper select:focus,
.sh-embedded-checkout .form-input-wrapper textarea:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--lf-accent-ring, rgba(14,165,233,0.2));
}
/* Phone intl-tel-input wrapper - the JS lib wraps input in .iti; label
is a sibling after the hidden input. Keep label on top via flex order. */
.sh-embedded-checkout .phone-input-wrapper .iti { order: 0; }
.sh-embedded-checkout .phone-input-wrapper input[type="tel"],
.sh-embedded-checkout .phone-input-wrapper .iti__input {
width: 100%;
padding: 0.75rem 0.875rem;
font-size: 0.9375rem;
font-family: var(--font-body, inherit);
color: var(--ink);
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
outline: none;
box-sizing: border-box;
min-height: 44px;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.sh-embedded-checkout .phone-input-wrapper input[type="tel"]:focus,
.sh-embedded-checkout .phone-input-wrapper .iti__input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--lf-accent-ring, rgba(14,165,233,0.2));
}
/* Non-floating inputs (plain .form-control not in .form-input-wrapper) */
.sh-embedded-checkout .form-control,
.sh-embedded-checkout .form-select {
width: 100%;
padding: 0.75rem 0.875rem;
font-size: 0.9375rem;
font-family: var(--font-body, inherit);
color: var(--ink);
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
outline: none;
transition: border-color 160ms ease, box-shadow 160ms ease;
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
min-height: 44px;
}
.sh-embedded-checkout .form-control:focus,
.sh-embedded-checkout .form-select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--lf-accent-ring, rgba(14,165,233,0.2));
}
.sh-embedded-checkout .form-control.is-invalid,
.sh-embedded-checkout .field-is-invalid .form-control {
border-color: var(--lf-error, #dc2626);
}
.sh-embedded-checkout .invalid-feedback {
display: block;
font-size: 0.8125rem;
color: var(--lf-error, #dc2626);
margin-top: 0.25rem;
}
/* Select arrow - needs top recalculated now that there's no floating label */
.sh-embedded-checkout .select--arrow { position: relative; }
.sh-embedded-checkout .select--arrow::after {
content: '';
position: absolute;
right: 0.875rem;
/* vertically center in the input area (below the label) */
bottom: 0;
top: auto;
height: 44px;
display: flex;
align-items: center;
width: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid var(--ink-3);
pointer-events: none;
/* use a box trick: margin-top to sit at vertical center of input */
margin-top: calc(100% - 44px + 19px);
}
/* Simpler: override with transform approach */
.sh-embedded-checkout .select--arrow::after {
top: auto;
bottom: 13px; /* half the 44px input height minus a nudge */
height: auto;
margin-top: 0;
transform: none;
}
.sh-embedded-checkout .select--arrow select { padding-right: 2.25rem; }
/* Textarea */
.sh-embedded-checkout textarea.form-control { resize: vertical; min-height: 80px; }
.sh-embedded-checkout .form-input-wrapper textarea { min-height: 80px; resize: vertical; }
/* ── Checkbox / radio ───────────────────────────────────────────────── */
.sh-embedded-checkout .form-check { display: flex; align-items: flex-start; gap: 0.5rem; }
.sh-embedded-checkout .form-check-input {
width: 17px;
height: 17px;
flex: none;
margin-top: 2px;
accent-color: var(--accent);
cursor: pointer;
}
.sh-embedded-checkout .form-check-label { font-size: 0.875rem; color: var(--ink-2); cursor: pointer; line-height: 1.4; }
.sh-embedded-checkout .form-check-label a { color: var(--accent); text-decoration: underline; }
/* ── Section labels / dividers ─────────────────────────────────────── */
.sh-embedded-checkout .checkout-payment-title,
.sh-embedded-checkout .section-heading {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 14px;
}
.sh-embedded-checkout hr {
border: none;
border-top: 1px solid var(--line);
margin: 1.25rem 0;
}
/* ── 1. Coupon section ──────────────────────────────────────────────
Hide only the store-wide coupon LIST (gift icon + N auto-listed codes)
- that's noise on a single-offer funnel. Keep the manual entry: the
"You have a coupon code?" toggle link + the inline input that opens on
click, so buyers can still apply a code. No !important on the wrapper - checkout.js (DiscountManagement) toggles it open via inline display. */
.sh-embedded-checkout .checkout__coupon-section { display: none !important; }
/* "You have a coupon code?" toggle link */
.sh-embedded-checkout .checkout-discount-section { margin-top: 0.75rem; }
.sh-embedded-checkout .btn-open-coupon-form {
font-size: 13px;
font-weight: 600;
color: var(--accent);
text-decoration: none;
cursor: pointer;
}
.sh-embedded-checkout .btn-open-coupon-form:hover { text-decoration: underline; }
/* Inline coupon input + apply button (apply-coupon.blade.php) */
.sh-embedded-checkout .coupon-wrapper { margin-top: 0.5rem; }
.sh-embedded-checkout .coupon-wrapper .btn-group { display: flex; gap: 8px; }
.sh-embedded-checkout .coupon-wrapper .coupon-code {
flex: 1 1 auto;
width: 100%;
padding: 0.75rem 0.875rem;
font-size: 0.9375rem;
font-family: var(--font-body, inherit);
color: var(--ink);
background: var(--bg-card);
border: 1px solid var(--line);
border-radius: var(--radius);
outline: none;
transition: border-color 160ms ease, box-shadow 160ms ease;
box-sizing: border-box;
min-height: 44px;
}
.sh-embedded-checkout .coupon-wrapper .coupon-code:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--lf-accent-ring, rgba(14,165,233,0.2));
}
.sh-embedded-checkout .coupon-wrapper .apply-coupon-code {
flex: 0 0 auto;
padding: 0 1.1rem;
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--radius);
cursor: pointer;
transition: opacity 160ms ease;
}
.sh-embedded-checkout .coupon-wrapper .apply-coupon-code:hover { opacity: 0.9; }
.sh-embedded-checkout .coupon-error-msg { font-size: 12px; margin-top: 0.25rem; }
/* ── Payment methods - compact rows ────────────────────────────────── */
.sh-embedded-checkout .list_payment_method {
list-style: none;
/* Bottom margin separates the payment cards from "Order notes" below. */
margin: 0 0 1.75rem;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.sh-embedded-checkout .payment-method-item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 12px 14px;
/* Match the neutral field surface (set by the polish block below) instead
of the warm --bg-card/--line, and force a uniform border with
!important - payment.css loads after us and leaks Bootstrap's
.list-group-item per-side borders (uneven 1px/1.5px, gray bottom). */
background: var(--lf-field-bg) !important;
border: 1.5px solid var(--lf-field-border) !important;
border-radius: var(--radius-lg) !important;
transition: border-color 160ms ease, background-color 160ms ease;
}
.sh-embedded-checkout .payment-method-item:hover {
border-color: var(--lf-field-border-hover) !important;
}
.sh-embedded-checkout .payment-method-item:has(input:checked) {
border-color: var(--accent) !important;
/* Soft accent tint adapts to every palette (light & dark) via color-mix;
degrades gracefully to the field surface where unsupported. */
background: color-mix(in srgb, var(--accent) 7%, var(--lf-field-bg)) !important;
box-shadow: none !important;
}
.sh-embedded-checkout .payment-method-item input[type="radio"] {
width: 18px; height: 18px;
accent-color: var(--accent);
margin: 0; flex: none;
}
/* The checkout radios use the magic-check library (.magic-radio), which hides
the native input and draws its own circle on the adjacent label via
::before/::after - hardcoded blue (#3e97eb) that clashes with the warm
accent. Recolor those pseudo-elements to the theme accent. Applies to any
magic-radio in the embedded checkout (payment + shipping). */
.sh-embedded-checkout .magic-radio + label::before {
border-color: var(--lf-field-border) !important;
}
.sh-embedded-checkout .magic-radio:checked + label::before {
border-color: var(--accent) !important;
}
.sh-embedded-checkout .magic-radio:checked + label::after {
background: var(--accent) !important;
}
.sh-embedded-checkout .payment-method-item label {
font-size: 14px; font-weight: 600; color: var(--lf-field-text);
margin: 0; cursor: pointer; flex: 1;
}
/* Payment logo right-aligned, clamped to 30px */
.sh-embedded-checkout .payment-method-logo { flex: 0 0 auto; margin-left: auto; }
.sh-embedded-checkout .payment-method-logo img,
.sh-embedded-checkout .payment-method-item > img {
height: 28px !important; width: auto !important;
max-width: 48px !important;
object-fit: contain !important;
flex: none;
}
.sh-embedded-checkout .payment_collapse_wrap { flex-basis: 100%; }
.sh-embedded-checkout .payment_collapse_wrap p { font-size: 13px; color: var(--lf-field-text); opacity: 0.7; margin: 4px 0 0; }
.sh-embedded-checkout .payment_collapse_wrap.collapse:not(.show) { display: none; }
/* Loading spinner area */
.sh-embedded-checkout .payment-info-loading { display: none; }
/* ── Shipping methods ───────────────────────────────────────────────── */
.sh-embedded-checkout [data-bb-toggle="checkout-shipping-methods-area"] { margin-top: 1rem; }
.sh-embedded-checkout .shipping-method-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
/* Same neutral surface + uniform border as payment cards (see note above). */
border: 1.5px solid var(--lf-field-border) !important;
border-radius: var(--radius-lg) !important;
background: var(--lf-field-bg) !important;
transition: border-color 160ms ease, background-color 160ms ease;
margin-bottom: 8px;
}
.sh-embedded-checkout .shipping-method-item:hover {
border-color: var(--lf-field-border-hover) !important;
}
.sh-embedded-checkout .shipping-method-item:has(input:checked) {
border-color: var(--accent) !important;
background: color-mix(in srgb, var(--accent) 7%, var(--lf-field-bg)) !important;
box-shadow: none !important;
}
.sh-embedded-checkout .shipping-method-item input[type="radio"] {
width: 18px; height: 18px; accent-color: var(--accent); flex: none;
}
.sh-embedded-checkout .shipping_method_input { accent-color: var(--accent); }
.sh-embedded-checkout .shipping-info-loading { display: none; }
/* ── 3. Right column: order-summary card ────────────────────────────
The ecommerce markup uses nested .bg-light divs which render as the
heavy peach/orange block on sunset-warm palette. Override every
.bg-light to transparent/var(--bg-card) and give the outer
cart-item-wrapper a clean card treatment. */
/* Mobile-first: no left gutter (summary is stacked); add it from md when the
summary sits beside the form. */
.sh-embedded-checkout .checkout-order-info {
padding-left: 0;
padding-bottom: 1.5rem;
}
@media (min-width: 768px) {
.sh-embedded-checkout .checkout-order-info {
padding-left: 24px;
padding-bottom: 0;
}
}
/* Outer card wrapper that contains Product(s) heading + items + totals */
.sh-embedded-checkout .cart-item-wrapper {
background: var(--bg-card) !important;
border: 1px solid var(--line) !important;
border-radius: var(--radius-lg) !important;
padding: 16px !important;
}
/* Neutralize every nested .bg-light - they inherit the sunset-warm
--lf-bg-alt = #fed7aa (peach). Force transparent so the clean card
background shows through. */
.sh-embedded-checkout .bg-light {
background: transparent !important;
border-radius: 0 !important;
}
/* The outer wrapper that wraps cart-item-wrapper also has .bg-light */
.sh-embedded-checkout .my-3.bg-light {
background: transparent !important;
border-radius: 0 !important;
margin: 0 0 1rem !important;
}
/* Inline antiquewhite on vendor-information-section (already hidden, but
neutralize for safety) */
.sh-embedded-checkout [style*="antiquewhite"] {
background: transparent !important;
}
/* Product(s) heading row */
.sh-embedded-checkout .cart-item-wrapper .bg-light.py-2,
.sh-embedded-checkout .cart-item-wrapper > .bg-light:first-child {
background: transparent !important;
padding: 0 0 12px !important;
margin-bottom: 12px !important;
border-bottom: 1px solid var(--line) !important;
}
.sh-embedded-checkout .font-weight-bold { font-weight: 600; color: var(--ink); }
/* Items marketplace wrapper - remove peach bg from nested .bg-light */
.sh-embedded-checkout .checkout-products-marketplace .bg-light,
.sh-embedded-checkout .checkout-products-marketplace .mt-3.bg-light {
background: transparent !important;
border-radius: 0 !important;
}
/* Totals rows - clean label/value layout */
.sh-embedded-checkout .price-text,
.sh-embedded-checkout .raw-total-text { font-weight: 600; color: var(--ink); }
.sh-embedded-checkout .total-text { font-size: 1rem; font-weight: 700; }
.sh-embedded-checkout .ec-checkout-total-row > div:last-child p { font-size: 1.0625rem; }
.sh-embedded-checkout .sub-total-text,
.sh-embedded-checkout .tax-price-text,
.sh-embedded-checkout .shipping-price-text,
.sh-embedded-checkout .coupon-code-text,
.sh-embedded-checkout .total-discount-amount-text,
.sh-embedded-checkout .payment-fee-text { font-size: 0.875rem; color: var(--ink-2); }
/* Total row emphasis */
.sh-embedded-checkout .ec-checkout-total-row { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
/* Discount / coupon discount-input form (discount_coupon_form, not the coupon list) */
.sh-embedded-checkout .discount-coupon-form { margin-top: 0.5rem; }
.sh-embedded-checkout .discount-coupon-form .form-control {
border-radius: var(--radius) 0 0 var(--radius);
}
.sh-embedded-checkout .discount-coupon-form .btn-apply-coupon {
border-radius: 0 var(--radius) var(--radius) 0;
padding: 0.625rem 1rem;
background: var(--bg-warm, var(--lf-bg-tint));
border: 1px solid var(--line);
border-left: none;
font-size: 0.875rem;
font-weight: 500;
color: var(--ink);
cursor: pointer;
transition: background 140ms ease;
}
.sh-embedded-checkout .discount-coupon-form .btn-apply-coupon:hover { background: var(--line); }
.sh-embedded-checkout .input-group { display: flex; }
.sh-embedded-checkout .input-group .form-control { border-radius: var(--radius) 0 0 var(--radius); }
.sh-embedded-checkout .input-group .btn { border-radius: 0 var(--radius) var(--radius) 0; }
/* ── Qty stepper in order summary ───────────────────────────────────── */
.sh-embedded-checkout .qty-input-wrapper {
display: inline-flex;
align-items: center;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.sh-embedded-checkout [data-bb-toggle="decrease-qty"],
.sh-embedded-checkout [data-bb-toggle="increase-qty"] {
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-warm, var(--lf-bg-tint));
border: none; cursor: pointer; font-size: 15px; font-weight: 600;
color: var(--ink);
}
.sh-embedded-checkout [data-bb-toggle="decrease-qty"]:hover,
.sh-embedded-checkout [data-bb-toggle="increase-qty"]:hover { background: var(--line); }
.sh-embedded-checkout [data-bb-toggle="update-cart"] {
width: 38px; text-align: center; border: none;
font-size: 0.875rem; font-weight: 500; color: var(--ink);
background: transparent; padding: 0;
}
/* ec-checkout-quantity class */
.sh-embedded-checkout .ec-checkout-quantity {
display: inline-flex;
align-items: center;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.sh-embedded-checkout .ec-checkout-quantity-control {
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
background: var(--bg-warm, var(--lf-bg-tint));
border: none; cursor: pointer; color: var(--ink);
}
.sh-embedded-checkout .ec-checkout-quantity-control:hover { background: var(--line); }
.sh-embedded-checkout .ec-checkout-quantity input[type="number"] {
width: 38px; height: 30px; text-align: center;
border: none; background: transparent;
font-size: 0.875rem; font-weight: 500; color: var(--ink);
padding: 0; -moz-appearance: textfield;
}
.sh-embedded-checkout .ec-checkout-quantity input::-webkit-inner-spin-button,
.sh-embedded-checkout .ec-checkout-quantity input::-webkit-outer-spin-button { -webkit-appearance: none; }
/* ── Checkout button ──────────────────────────────────────────────────
Selector carries `.btn` so it outranks the generic `.btn` shim defined
later (equal-specificity, later-wins would otherwise paint it the light
neutral surface — same guard the mobile checkout button uses). */
.sh-embedded-checkout .btn.payment-checkout-btn,
.sh-embedded-checkout .btn.payment-checkout-btn-step {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 0.875rem 1.75rem;
font-size: 1rem;
font-weight: 600;
font-family: var(--font-body, inherit);
color: var(--accent-ink);
background: var(--accent);
border: none;
border-radius: 999px;
cursor: pointer;
transition: background 160ms ease, box-shadow 160ms ease, transform 80ms ease;
text-decoration: none;
box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.sh-embedded-checkout .btn.payment-checkout-btn:hover,
.sh-embedded-checkout .btn.payment-checkout-btn-step:hover {
background: color-mix(in srgb, var(--accent) 85%, #000 15%);
box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}
.sh-embedded-checkout .btn.payment-checkout-btn:active,
.sh-embedded-checkout .btn.payment-checkout-btn-step:active { transform: scale(0.98); }
.sh-embedded-checkout .btn.payment-checkout-btn:disabled,
.sh-embedded-checkout .btn.payment-checkout-btn-step.disabled {
opacity: 0.6;
cursor: not-allowed;
pointer-events: none;
}
/* Back-to-cart — secondary ghost link paired opposite the Checkout pill.
Muted by default, darkens on hover; icon sized down from the raw 24px. */
.sh-embedded-checkout .back-to-cart-btn {
color: var(--ink-2);
font-size: 0.9375rem;
font-weight: 500;
padding: 0.625rem 0.25rem;
border-radius: 999px;
transition: color 160ms ease;
}
.sh-embedded-checkout .back-to-cart-btn:hover { color: var(--ink); }
.sh-embedded-checkout .back-to-cart-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
/* Generic .btn fallback */
.sh-embedded-checkout .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
font-family: var(--font-body, inherit);
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--bg-warm, var(--lf-bg-tint));
color: var(--ink);
cursor: pointer;
transition: background 140ms ease;
text-decoration: none;
}
.sh-embedded-checkout .btn:hover { background: var(--line); }
.sh-embedded-checkout .btn-primary {
background: var(--accent);
color: var(--accent-ink);
border-color: transparent;
box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.sh-embedded-checkout .btn-primary:hover {
background: color-mix(in srgb, var(--accent) 85%, #000 15%);
}
/* ── Notes textarea / order notes ───────────────────────────────────── */
.sh-embedded-checkout textarea.form-control { resize: vertical; min-height: 80px; }
/* ── Utility / state helpers ────────────────────────────────────────── */
.sh-embedded-checkout .alert {
padding: 0.75rem 1rem;
border-radius: var(--radius);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.sh-embedded-checkout .alert-warning { background: var(--lf-sale-soft); border: 1px solid var(--lf-warning); color: #92400e; }
.sh-embedded-checkout .alert-danger { background: #fef2f2; border: 1px solid #fca5a5; color: var(--lf-error, #dc2626); }
.sh-embedded-checkout .alert-success { background: #f0fdf4; border: 1px solid #86efac; color: var(--lf-success, #16a34a); }
.sh-embedded-checkout .text-danger { color: var(--lf-error, #dc2626); font-size: 0.8125rem; }
.sh-embedded-checkout .text-success { color: var(--lf-success, #16a34a); }
.sh-embedded-checkout .d-none { display: none !important; }
.sh-embedded-checkout [hidden] { display: none !important; }
/* Terms checkbox area */
.sh-embedded-checkout .agree-terms-wrapper { margin-top: 1rem; }
.sh-embedded-checkout .agree-terms-wrapper a { color: var(--accent); text-decoration: underline; }
/* Login prompt */
.sh-embedded-checkout .checkout-login-prompt { font-size: 0.875rem; color: var(--ink-2); }
.sh-embedded-checkout .checkout-login-prompt a { color: var(--accent); }
/* ── Mobile checkout footer ─────────────────────────────────────────────
On real mobile UA the embedded checkout renders the ecommerce mobile
variant: a terms checkbox + an actions row (back-to-cart icon, coupon
trigger, Checkout submit) plus a Bootstrap offcanvas "Select Coupon" sheet.
This standalone funnel loads neither Bootstrap CSS nor JS, so the offcanvas
can't hide/toggle (it dumps its contents inline) and the data-bs-toggle
coupon button is inert. Hide the non-functional sheet + the two secondary
icon buttons and keep a single clean, full-width Checkout. Coupon entry
remains available on the desktop variant. */
.sh-embedded-checkout .mobile-checkout-footer { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
/* Non-functional without Bootstrap - render nothing instead of broken inline. */
.sh-embedded-checkout .mobile-coupon-sheet,
.sh-embedded-checkout #mobile-coupon-sheet { display: none !important; }
/* Drop the back-to-cart + coupon-trigger icon buttons (both inert here). */
.sh-embedded-checkout .mobile-checkout-footer__btn-secondary { display: none !important; }
.sh-embedded-checkout .mobile-checkout-footer__terms { margin-bottom: 1rem; }
.sh-embedded-checkout .mobile-checkout-footer__actions { display: flex; }
/* Re-assert the primary treatment on the Checkout submit: .mobile-checkout-btn
also carries .btn, and our generic .btn shim (defined later, equal
specificity) would otherwise win and paint it the light neutral surface. */
.sh-embedded-checkout .mobile-checkout-footer__actions .payment-checkout-btn,
.sh-embedded-checkout .btn.mobile-checkout-btn {
width: 100%;
padding: 0.875rem 1.75rem;
font-size: 1rem;
font-weight: 600;
color: var(--accent-ink);
background: var(--accent);
border: none;
border-radius: 999px;
box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
.sh-embedded-checkout .btn.mobile-checkout-btn:hover {
background: color-mix(in srgb, var(--accent) 85%, #000 15%);
}
/* ── Checkout warnings ──────────────────────────────────────────────── */
.sh-embedded-checkout .checkout-warnings {
margin-bottom: 1rem;
padding: 0.75rem 1rem;
border-radius: var(--radius);
background: var(--lf-sale-soft);
border: 1px solid var(--lf-warning);
font-size: 0.875rem;
color: #92400e;
}
/* ── Bootstrap utility shims ────────────────────────────────────────── */
.sh-embedded-checkout .position-relative { position: relative; }
.sh-embedded-checkout .d-flex { display: flex; }
/* Responsive (md+) display shims. The ecommerce checkout's desktop submit row is
``; with only `.d-none !important` shimmed
above and no `d-md-flex` counterpart, the Checkout button stayed hidden on
desktop. Restore Bootstrap's md-breakpoint behavior so the row shows ≥768px. */
@media (min-width: 768px) {
.sh-embedded-checkout .d-md-flex { display: flex !important; }
.sh-embedded-checkout .d-md-block { display: block !important; }
.sh-embedded-checkout .d-md-inline-block { display: inline-block !important; }
.sh-embedded-checkout .d-md-none { display: none !important; }
}
.sh-embedded-checkout .align-items-center { align-items: center; }
.sh-embedded-checkout .gap-2 { gap: 0.5rem; }
.sh-embedded-checkout .flex-wrap { flex-wrap: wrap; }
.sh-embedded-checkout .w-100 { width: 100%; }
.sh-embedded-checkout .col-3 { flex: 0 0 25%; max-width: 25%; padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
.sh-embedded-checkout .col-6 { flex: 0 0 50%; max-width: 50%; }
.sh-embedded-checkout .col { flex: 1 1 0; min-width: 0; padding-left: 10px; padding-right: 10px; }
.sh-embedded-checkout .cart-item { align-items: flex-start; }
.sh-embedded-checkout .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.sh-embedded-checkout .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.sh-embedded-checkout .mb-0 { margin-bottom: 0 !important; }
/* ===== Embedded checkout - tame marketplace/site images ========== */
/* Redundant in a funnel: the page already carries its own branding. */
.sh-embedded-checkout .checkout-logo { display: none !important; }
/* Marketplace per-store header - hide; product line below remains. */
.sh-embedded-checkout .vendor-information-section { display: none !important; }
/* Product thumbnail in the order summary. */
.sh-embedded-checkout .checkout-product-img-wrapper img,
.sh-embedded-checkout .item-thumb,
.sh-embedded-checkout .img-thumbnail {
width: 60px !important; height: 60px !important; object-fit: cover !important;
border-radius: 8px !important; padding: 0 !important; border: 1px solid var(--line) !important;
}
/* Safety net: nothing inside the embedded checkout should exceed its column. */
.sh-embedded-checkout img { max-width: 100% !important; }
/* ===== ui-ux-pro-max polish - high-contrast neutral checkout fields ========
The embedded form inherited the funnel palette wholesale, so on warm/tinted
styles (e.g. sunset-warm) inputs rendered low-contrast: cream fill + orange
border + warm-brown labels. Give fields a neutral surface (white on light
styles, translucent on dark) so the form reads clean and meets WCAG contrast;
the accent is kept only for focus rings + selected payment. */
.sh-embedded-checkout {
--lf-field-bg: #ffffff;
--lf-field-border: rgba(17, 24, 39, 0.16);
--lf-field-border-hover: rgba(17, 24, 39, 0.34);
--lf-field-text: #1f2430;
--lf-field-label: #1f2430;
--lf-field-placeholder: #9aa1ac;
}
body.lf-style-noir .sh-embedded-checkout,
body.lf-style-cyber-neon .sh-embedded-checkout {
--lf-field-bg: rgba(255, 255, 255, 0.06);
--lf-field-border: rgba(255, 255, 255, 0.20);
--lf-field-border-hover: rgba(255, 255, 255, 0.40);
--lf-field-text: #f1f5f9;
--lf-field-label: #e2e8f0;
--lf-field-placeholder: rgba(255, 255, 255, 0.45);
}
.sh-embedded-checkout .form-input-wrapper > label,
.sh-embedded-checkout .phone-input-wrapper > label,
.sh-embedded-checkout .form-group > label,
.sh-embedded-checkout label.form-label {
color: var(--lf-field-label) !important;
font-weight: 600;
}
.sh-embedded-checkout .form-input-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.sh-embedded-checkout .form-input-wrapper select,
.sh-embedded-checkout .form-input-wrapper textarea,
.sh-embedded-checkout .form-control,
.sh-embedded-checkout .form-select,
.sh-embedded-checkout .phone-input-wrapper input[type="tel"],
.sh-embedded-checkout .iti__input {
background-color: var(--lf-field-bg) !important;
border-color: var(--lf-field-border) !important;
color: var(--lf-field-text) !important;
}
.sh-embedded-checkout .form-input-wrapper input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):hover,
.sh-embedded-checkout .form-input-wrapper select:hover,
.sh-embedded-checkout .form-input-wrapper textarea:hover,
.sh-embedded-checkout .form-control:hover,
.sh-embedded-checkout .form-select:hover {
border-color: var(--lf-field-border-hover) !important;
}
.sh-embedded-checkout .form-input-wrapper input:focus,
.sh-embedded-checkout .form-input-wrapper select:focus,
.sh-embedded-checkout .form-input-wrapper textarea:focus,
.sh-embedded-checkout .form-control:focus,
.sh-embedded-checkout .form-select:focus,
.sh-embedded-checkout .iti__input:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 3px var(--lf-accent-ring, rgba(14, 165, 233, 0.25)) !important;
}
.sh-embedded-checkout ::placeholder { color: var(--lf-field-placeholder) !important; opacity: 1; }
/* intl-tel phone field: whole control shares the field surface, inner input borderless */
.sh-embedded-checkout .phone-input-wrapper .iti { background-color: var(--lf-field-bg) !important; border: 1px solid var(--lf-field-border); border-radius: var(--radius); }
.sh-embedded-checkout .phone-input-wrapper .iti input[type="tel"] { border: 0 !important; box-shadow: none !important; }
.sh-embedded-checkout .iti__selected-flag { background-color: transparent !important; }
/* Selects: exactly one dropdown arrow (kill native + duplicate); keep the
custom .select--arrow::after caret where present. */
.sh-embedded-checkout select { background-image: none !important; appearance: none !important; -webkit-appearance: none !important; }
/* Order-summary panel → same neutral surface as the fields for a cohesive card. */
.sh-embedded-checkout .cart-item-wrapper { background: var(--lf-field-bg) !important; }
/* ui-ux-pro-max: fix Country select double-arrow. The form markup injects an
AND we drew a CSS-triangle ::after - two
arrows. The injected svg is also a flex child (flex-column wrapper), so it
dropped below the field. Keep ONE arrow: absolutely position the real svg,
remove the CSS triangle. */
.sh-embedded-checkout .select--arrow::after { display: none !important; }
.sh-embedded-checkout .select--arrow > svg {
position: absolute;
right: 0.875rem;
bottom: 11px;
width: 18px;
height: 18px;
margin: 0;
color: var(--ink-3);
pointer-events: none;
}
.sh-embedded-checkout .select--arrow select { padding-right: 2.5rem; }
/* select2-enhanced fields (.select-search-location, e.g. state/city) inject
their own arrow + a sibling .select2-container; the static svg above is a
leftover from the plain-select markup and duplicates/misaligns with
select2's own (correctly centered) arrow. Hide it only when select2 has
taken over the field, keeping the plain-select fallback above intact. */
.sh-embedded-checkout .select--arrow:has(.select2-container) > svg { display: none; }
/* ─────────────────────────────────────────────────────────────────────────
Select2 overrides - scoped to select2 classes so the funnel palette
matches the rest of the checkout form.
Note: select2 appends its dropdown panel to (outside
.sh-embedded-checkout), so these rules MUST remain global (not nested
under .sh-embedded-checkout). They are still specific enough to only
affect select2 elements and will not bleed into other pages.
───────────────────────────────────────────────────────────────────────── */
/* Selection box (the visible control that replaces