/* ========================================================================== CPP Storefront Themes Applied via using tenant.storefront_template. Tenant colors come through as --cpp-t-primary / --cpp-t-accent. ========================================================================== */ /* Shared: tenant colors override the house palette */ body[class*="cpp-theme-"] { --cpp-magenta: var(--cpp-t-primary, #c61b6f); --cpp-yellow: var(--cpp-t-accent, #ffd000); } /* ---------- BOLD ---------- */ body.cpp-theme-bold { --cpp-paper: #fffaef; --cpp-ink: #161616; } body.cpp-theme-bold h1, body.cpp-theme-bold h2 { text-transform: uppercase; font-weight: 900; letter-spacing: -0.02em; line-height: 0.95; } body.cpp-theme-bold .cpp-btn, body.cpp-theme-bold button[type="submit"] { border: 3px solid var(--cpp-ink) !important; border-radius: 0 !important; font-weight: 900 !important; text-transform: uppercase; letter-spacing: 0.05em; } body.cpp-theme-bold .cpp-card, body.cpp-theme-bold .cpp-product-card { border: 3px solid var(--cpp-ink) !important; border-radius: 0 !important; } /* ---------- EDITORIAL ---------- */ body.cpp-theme-editorial { --cpp-paper: #fdfcf8; font-family: Georgia, 'Times New Roman', serif; } body.cpp-theme-editorial h1, body.cpp-theme-editorial h2, body.cpp-theme-editorial h3 { font-family: Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: 0; } body.cpp-theme-editorial .cpp-btn { border-radius: 0 !important; border: 1px solid var(--cpp-ink) !important; background: transparent !important; color: var(--cpp-ink) !important; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.85rem; } body.cpp-theme-editorial .cpp-card, body.cpp-theme-editorial .cpp-product-card { border: none !important; border-bottom: 1px solid #ddd !important; border-radius: 0 !important; } /* ---------- MINIMAL ---------- */ body.cpp-theme-minimal { --cpp-paper: #ffffff; font-family: -apple-system, system-ui, sans-serif; } body.cpp-theme-minimal h1, body.cpp-theme-minimal h2 { font-weight: 300; letter-spacing: -0.02em; } body.cpp-theme-minimal .cpp-btn { border: 1px solid var(--cpp-ink) !important; border-radius: 0 !important; background: transparent !important; color: var(--cpp-ink) !important; font-weight: 400 !important; text-transform: none; } body.cpp-theme-minimal .cpp-card, body.cpp-theme-minimal .cpp-product-card { border: none !important; box-shadow: none !important; border-radius: 0 !important; } /* ---------- CREATIVE ---------- */ body.cpp-theme-creative { --cpp-paper: #ffffff; font-family: system-ui, sans-serif; } body.cpp-theme-creative h1, body.cpp-theme-creative h2 { font-weight: 800; letter-spacing: -0.03em; } body.cpp-theme-creative h1 { transform: rotate(-1.5deg); display: inline-block; } body.cpp-theme-creative .cpp-btn { border-radius: 30px !important; border: none !important; font-weight: 700 !important; padding: 0.85rem 1.9rem !important; } body.cpp-theme-creative .cpp-card, body.cpp-theme-creative .cpp-product-card { border-radius: 20px !important; border: none !important; overflow: hidden; box-shadow: 0 4px 18px rgba(0,0,0,0.07) !important; } /* ---------- CLASSIC ---------- */ body.cpp-theme-classic { --cpp-paper: #ffffff; font-family: Georgia, serif; } body.cpp-theme-classic h1, body.cpp-theme-classic h2 { font-family: Georgia, serif; font-weight: 400; } body.cpp-theme-classic .cpp-header { background: var(--cpp-t-primary, #c61b6f) !important; color: #fff !important; } body.cpp-theme-classic .cpp-header a { color: #fff !important; } body.cpp-theme-classic .cpp-btn { border: 2px solid var(--cpp-ink) !important; border-radius: 2px !important; font-weight: 700 !important; } body.cpp-theme-classic .cpp-card, body.cpp-theme-classic .cpp-product-card { border: 1px solid #ddd !important; border-radius: 2px !important; text-align: center; } /* ---------- MODERN ---------- */ body.cpp-theme-modern { --cpp-paper: #fafbfc; --cpp-ink: #0f172a; font-family: -apple-system, system-ui, sans-serif; } body.cpp-theme-modern h1, body.cpp-theme-modern h2 { font-weight: 700; letter-spacing: -0.03em; } body.cpp-theme-modern .cpp-btn { border-radius: 10px !important; border: none !important; font-weight: 600 !important; box-shadow: 0 1px 2px rgba(15,23,42,0.08); } body.cpp-theme-modern .cpp-card, body.cpp-theme-modern .cpp-product-card { border: 1px solid #eef1f4 !important; border-radius: 16px !important; box-shadow: 0 1px 3px rgba(15,23,42,0.05) !important; overflow: hidden; } body.cpp-theme-modern .cpp-header { background: #fff !important; border-bottom: 1px solid #eef1f4 !important; }