/* ==========================================================================
Kitcove — theme CSS v2
Replaces assets/kitcove.css on the Meridian theme.
Matches docs/design/homepage-mockup.html (Stitched Up Kits structure).
---------------------------------------------------------------------------
READ THIS BEFORE PASTING — two things must change in the LMS editor or the
hero will look WORSE than it does now, not better:
1. HERO COPY. The theme puts the hero's first text block in an and the
second in a . This file styles the
as a small uppercase eyebrow
and the as the big display headline. Your current
is a long
sentence ("Gift-ready hoop kits with everything included. Plus bookbinding
and leather craft tools for the studio shelf."). Set as a 60px headline it
will swallow the screen. Shorten it to a headline, e.g. "Everything you
need, in one box".
2. HERO IMAGE. The theme is rendering its default placeholder (an inline
of a t-shirt). This file hides it. Until you set
a real hero image, or fill in --kc-hero-image below, the hero will be a
flat ink panel. That is intentional and still better than the t-shirt.
WHAT THIS FILE CANNOT DO
The homepage currently has only 2 sections (hero + product list). The
collection tiles, 3-step panel, UGC rail and trust bar in the mockup are new
sections and must be added in the LMS editor. CSS cannot create them. The
styles for them are included below and will activate when the markup exists.
========================================================================== */
/* Fonts load via layout/theme.aqua )
> .hero__content-wrapper > .text-block (h2 + p) + a.button
========================================================================== */
/* SPLIT HERO
Desktop: text on a cream panel (left), photograph (right). The photo does not
sit behind the text, so the headline stays the focus.
Mobile: stacks — photo band on top, text on cream below.
The theme's DOM order is media-wrapper then content-wrapper; on desktop we
use flex `order` to put the text column first (left) and the photo second. */
.hero__container {
position: relative;
display: flex;
flex-direction: column;
background: var(--kc-cream);
}
/* Bin the placeholder t-shirt. */
.hero__media-wrapper svg.hero__image { display: none !important; }
.hero__media-wrapper {
position: relative !important; /* theme forces absolute; override so it flows in the flex row */
inset: auto !important;
width: 100%;
min-height: 44vh;
background-color: var(--kc-cream-2);
background-image: var(--kc-hero-image);
background-size: cover;
background-position: center;
}
/* No scrim now — the text lives on cream, not over the photo. */
.hero__media-wrapper::after { content: none !important; }
.hero__content-wrapper {
position: relative;
z-index: 4;
background: var(--kc-cream);
color: var(--kc-ink);
padding: 40px 22px 48px;
text-align: left !important;
}
.hero, [class*="hero"] { text-align: left !important; }
.hero h1, .hero h2, .hero .h1, .hero .h2, .hero p {
text-align: left !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* First block -> eyebrow (ink on cream now, no shadow) */
.hero .text-block h2 {
font-family: var(--kc-ui) !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase;
color: var(--kc-ink-soft) !important;
margin: 0 0 14px !important;
text-shadow: none !important;
}
/* Second block -> display headline (ink on cream) */
.hero .text-block p {
font-family: var(--kc-display) !important;
font-size: clamp(40px, 8vw, 60px) !important;
font-weight: 600 !important;
line-height: 1.02 !important;
color: var(--kc-ink) !important;
margin: 0 0 26px !important;
max-width: 15ch;
text-shadow: none !important;
}
/* Hero CTA — ink pill on cream. */
.hero .button {
background: var(--kc-ink) !important;
color: var(--kc-cream) !important;
border-color: var(--kc-ink) !important;
font-size: 16px !important;
font-weight: 500 !important;
padding: 19px 40px !important;
border-radius: 999px !important;
letter-spacing: 0.01em !important;
margin-inline: 0 !important;
}
.hero .button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(58, 42, 34, 0.20);
opacity: 1;
}
@media (min-width: 900px) {
/* Desktop split done with the theme's native absolute media model, so the
photo genuinely fills the right half edge-to-edge (flex-stretch was being
overridden by the theme, leaving the photo floating with cream gaps). */
.hero__container {
display: block !important;
position: relative;
min-height: 620px;
}
.hero__media-wrapper {
position: absolute !important;
inset: 0 0 0 50% !important; /* top/right/bottom pinned; left edge at 50% = right half, full height */
width: 50% !important;
min-height: 0 !important;
background-position: center 32%;
}
.hero__content-wrapper {
position: relative;
z-index: 4;
width: 50% !important; /* theme forces full width; pin to the left half */
max-width: 50% !important;
margin-right: auto !important; /* stay left, don't centre */
min-height: 620px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 64px clamp(44px, 5vw, 88px);
background: var(--kc-cream);
}
}
/* ==========================================================================
SECTION HEADINGS + "View all" circle-arrow
========================================================================== */
.product-list h2, .product-list h3,
[class*="product-list"] h2, [class*="collection"] h2 {
font-family: var(--kc-display) !important;
font-size: clamp(36px, 8vw, 52px) !important;
font-weight: 600 !important;
line-height: 1.05 !important;
margin-bottom: 18px !important;
}
.kc-viewall {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--kc-ink);
text-decoration: none;
font-size: 16px;
}
.kc-viewall i {
width: 38px; height: 38px;
border-radius: 50%;
background: var(--kc-cream-2);
display: flex; align-items: center; justify-content: center;
font-style: normal;
}
/* ==========================================================================
PRODUCT CARDS
========================================================================== */
.product-card, product-card, .card-gallery, .collection-card,
[class*="product-card"] {
background: var(--kc-white) !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
.product-card:hover, product-card:hover, [class*="product-card"]:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(58, 42, 34, 0.11) !important;
}
}
/* Reference uses a plain sans title, NOT the display serif. v1 forced the serif
on .product-card__title, which is why the grid felt heavy. */
.product-card__title, .card__heading, .product-title {
font-family: var(--kc-ui) !important;
font-size: 16px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
color: var(--kc-ink) !important;
text-align: left !important;
}
.price, .price-item, [class*="price"] {
font-family: var(--kc-ui) !important;
font-size: 16px !important;
font-weight: 400 !important;
color: var(--kc-ink-soft) !important;
text-align: left !important;
}
/* --- Badges ---------------------------------------------------------------
These need markup the theme does not emit today. Add via product metafield
or a badge app; the styles are ready. The "hrs" pill is the highest-value
borrowed idea on the reference site: it answers "is this too hard for me?"
before the customer has to ask.
-------------------------------------------------------------------------- */
.kc-pre {
position: absolute; top: 12px; left: 12px; z-index: 3;
background: var(--kc-blush); color: var(--kc-white);
font-size: 12px; font-weight: 500;
padding: 6px 14px; border-radius: 999px;
}
.kc-hrs {
position: absolute; top: 12px; right: 12px; z-index: 3;
background: var(--kc-white); color: var(--kc-ink);
border: 1px solid var(--kc-ink);
font-size: 12px; font-weight: 500;
padding: 6px 12px; border-radius: 999px;
}
.kc-quick {
position: absolute; right: 12px; bottom: 12px; z-index: 3;
width: 44px; height: 44px; border-radius: 50%;
background: var(--kc-white); border: 1px solid var(--kc-line);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background 0.2s ease;
}
.kc-quick:hover { background: var(--kc-cream-2); }
/* Stars. Gold, not brown. */
.kc-stars, .rating__stars, [class*="rating"] [class*="star"] {
color: var(--kc-gold) !important;
}
/* ==========================================================================
COLLECTION TILES — Shop Our Kits (Stitched Up style)
Square cards, centered white serif labels, slim gutters.
========================================================================== */
.kc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kc-tile {
position: relative; aspect-ratio: 1 / 1;
display: flex; align-items: center; justify-content: center;
text-decoration: none; overflow: hidden;
background: var(--kc-cream-2);
}
.kc-tile img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s ease;
}
@media (hover: hover) { .kc-tile:hover img { transform: scale(1.05); } }
.kc-tile::after {
content: ""; position: absolute; inset: 0; z-index: 2;
background: rgba(24, 14, 9, 0.34);
}
.kc-tile span {
position: absolute; z-index: 4; left: 12px; right: 12px;
top: 50%; transform: translateY(-50%);
color: #fff; font-family: var(--kc-display);
font-size: clamp(22px, 4.5vw, 28px); font-weight: 600;
text-align: center; line-height: 1.15;
text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
@media (min-width: 900px) {
.kc-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kc-tile span { font-size: 28px; left: 16px; right: 16px; }
}
/* Section shell shared by tiles + any custom-liquid content block */
.kc-shell { padding: 56px 20px; }
.kc-shell.kc-shop-kits { padding: 56px 20px 64px; }
.kc-shell__head {
display: flex; align-items: center; justify-content: space-between;
gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.kc-shell__head h2 {
font-family: var(--kc-display) !important;
font-size: clamp(36px, 7vw, 48px) !important;
font-weight: 600 !important; line-height: 1.05 !important;
margin: 0 !important;
}
.kc-shell__head a,
.kc-viewall {
color: var(--kc-ink); text-decoration: none; font-size: 16px;
display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
font-weight: 500;
}
.kc-viewall i {
width: 38px; height: 38px; border-radius: 50%;
background: var(--kc-cream-2);
display: inline-flex; align-items: center; justify-content: center;
font-style: normal; font-size: 15px;
}
.kc-shell__head a::after { display: none; }
@media (min-width: 900px) {
.kc-shell { padding: 72px 40px; }
.kc-shell.kc-shop-kits { padding: 72px 40px 80px; }
}
/* ==========================================================================
PRODUCT CARD media — cream frame so white supplier shots still read,
and contain (not cover) so off-center tools stay fully visible.
========================================================================== */
.product-card .card-gallery,
product-card .card-gallery {
background: var(--kc-cream-2) !important;
aspect-ratio: 1 / 1;
}
.product-card .product-media,
product-card .product-media {
background: var(--kc-cream-2) !important;
}
.product-card .product-media__image,
product-card .product-media__image,
.product-card .product-media-container.media-fit img,
product-card .product-media-container.media-fit img {
object-fit: contain !important;
object-position: center center !important;
background: var(--kc-cream-2) !important;
width: 100% !important;
height: 100% !important;
}
/* ==========================================================================
3-STEP PANEL (needs a new section in the LMS editor)
========================================================================== */
/* The custom-liquid section sits inside the theme's page-width wrapper, which
insets it. Both of these panels are meant to run edge to edge, so break them
out of the container. */
.kc-steps,
.kc-trust,
.kc-reviews {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: none;
}
.kc-steps {
background: var(--kc-ink);
color: var(--kc-cream);
text-align: center;
padding: 64px 24px 72px;
}
.kc-steps h2 {
font-family: var(--kc-display) !important;
font-size: clamp(32px, 7.5vw, 46px) !important;
color: var(--kc-cream) !important;
margin-bottom: 44px !important;
}
.kc-steps__grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 44px 24px; max-width: 900px; margin: 0 auto;
}
.kc-step:last-child { grid-column: 1 / -1; max-width: 440px; margin: 0 auto; }
.kc-step svg {
width: 78px; height: 70px; margin: 0 auto 18px; display: block;
stroke: var(--kc-cream); fill: none; stroke-width: 1.3;
}
.kc-step h3 {
font-family: var(--kc-display) !important;
font-size: 26px !important;
color: var(--kc-cream) !important;
margin-bottom: 14px !important;
}
.kc-step p {
font-size: 15px; line-height: 1.6;
color: rgba(253, 245, 238, 0.9);
}
@media (min-width: 900px) {
.kc-steps__grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
.kc-step:last-child { grid-column: auto; max-width: none; margin: 0; }
}
/* ==========================================================================
TRUST BAR (custom-liquid section on the homepage)
========================================================================== */
.kc-trust {
background: var(--kc-cream-2);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px 20px;
text-align: center;
padding: 56px 20px;
}
.kc-trust h4 {
font-family: var(--kc-display) !important;
font-size: 20px !important;
font-weight: 600 !important;
margin-bottom: 6px !important;
}
.kc-trust p {
font-size: 13px;
line-height: 1.55;
color: var(--kc-ink-soft);
}
@media (min-width: 900px) {
.kc-trust { grid-template-columns: repeat(4, 1fr); padding: 64px 48px; }
}
/* ==========================================================================
BUTTONS (global)
========================================================================== */
/* IMPORTANT: exclude .button-unstyled. The theme reuses the `button` class on
functional controls (image-zoom, quantity +/-, slideshow arrows) and marks
them .button-unstyled. Without this exclusion, those get the ink pill + 999px
radius treatment — which drew a giant brown circle over every product photo.
Only style real CTAs. */
.button:not(.button-unstyled),
button[type="submit"]:not(.button-unstyled),
.product-form__submit,
.shopify-payment-button__button {
background: var(--kc-ink) !important;
color: var(--kc-cream) !important;
border-color: var(--kc-ink) !important;
border-radius: 999px !important;
font-weight: 500 !important;
transition: transform 0.25s ease, opacity 0.25s ease, box-shadow 0.25s ease;
}
.button:not(.button-unstyled):hover,
button[type="submit"]:not(.button-unstyled):hover {
opacity: 0.92;
transform: translateY(-1px);
}
.button-secondary {
background: transparent !important;
color: var(--kc-ink) !important;
border: 1px solid var(--kc-ink) !important;
border-radius: 999px !important;
}
.button-secondary:hover {
background: var(--kc-ink) !important;
color: var(--kc-cream) !important;
}
/* ==========================================================================
FOOTER
========================================================================== */
.lms-section, .shopify-section, .content-for-layout { background: transparent; }
/* Meridian renders the main footer and the copyright strip as two sibling
sections. Scope the dark treatment to both so the theme's light page
background cannot show through between them. */
#lms-section-footer,
#lms-section-utilities,
#lms-section-footer > .section-background,
#lms-section-utilities > .section-background,
#lms-section-footer > .section,
#lms-section-utilities > .section {
--color-background: var(--kc-ink) !important;
--color-foreground: var(--kc-cream) !important;
--color-foreground-heading: var(--kc-cream) !important;
--color-primary: var(--kc-cream) !important;
background: var(--kc-ink) !important;
color: var(--kc-cream) !important;
}
#lms-section-footer {
border-top: 1px solid rgba(253, 245, 238, 0.14);
}
#lms-section-footer .footer-content {
padding-block: clamp(48px, 5vw, 72px) !important;
column-gap: clamp(36px, 5vw, 88px) !important;
row-gap: 20px !important;
}
#lms-section-footer .menu__heading,
#lms-section-footer .text-block--footer_legal > p:first-child {
margin: 0 0 18px !important;
padding: 0 !important;
color: var(--kc-cream) !important;
font-family: var(--kc-display) !important;
font-size: 21px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
}
#lms-section-footer .menu__item,
#lms-section-footer .text-block--footer_legal p {
margin-block: 0 12px !important;
}
#lms-section-footer a {
color: rgba(253, 245, 238, 0.76) !important;
text-decoration-color: rgba(253, 245, 238, 0.34) !important;
text-underline-offset: 3px;
}
#lms-section-footer a:hover,
#lms-section-utilities a:hover {
color: var(--kc-white) !important;
}
#lms-section-footer .h3,
#lms-section-footer .h3 p {
color: var(--kc-cream) !important;
font-family: var(--kc-display) !important;
font-size: clamp(30px, 3vw, 40px) !important;
font-weight: 600 !important;
line-height: 1.05 !important;
}
#lms-section-footer .group-block .rte,
#lms-section-footer .group-block .rte p {
color: rgba(253, 245, 238, 0.72) !important;
line-height: 1.6 !important;
}
#lms-section-footer .email-signup__input-group {
align-items: stretch !important;
gap: 10px !important;
}
#lms-section-footer .email-signup__input {
min-width: 0 !important;
background: rgba(253, 245, 238, 0.08) !important;
color: var(--kc-cream) !important;
border: 1px solid rgba(253, 245, 238, 0.46) !important;
border-radius: 999px !important;
}
#lms-section-footer .email-signup__input::placeholder {
color: rgba(253, 245, 238, 0.62) !important;
opacity: 1;
}
#lms-section-footer .email-signup__input:focus {
border-color: var(--kc-cream) !important;
outline: 2px solid rgba(91, 77, 232, 0.72) !important;
outline-offset: 2px;
}
#lms-section-footer .email-signup__button {
flex: 0 0 auto !important;
background: var(--kc-cream) !important;
color: var(--kc-ink) !important;
border: 1px solid var(--kc-cream) !important;
box-shadow: none !important;
}
#lms-section-footer .email-signup__button:hover {
background: var(--kc-white) !important;
border-color: var(--kc-white) !important;
opacity: 1 !important;
}
#lms-section-utilities .utilities {
border-top-color: rgba(253, 245, 238, 0.16) !important;
}
#lms-section-utilities,
#lms-section-utilities a {
color: rgba(253, 245, 238, 0.58) !important;
}
@media screen and (min-width: 990px) {
#lms-section-footer .footer-content {
grid-template-columns: minmax(140px, 0.8fr) minmax(180px, 0.9fr) minmax(360px, 2fr) !important;
}
#lms-section-footer .footer-content > .menu {
grid-column: 1;
grid-row: 1 / span 2;
}
#lms-section-footer .footer-content > .text-block--footer_legal {
grid-column: 2;
grid-row: 1 / span 2;
}
#lms-section-footer .footer-content > .group-block {
grid-column: 3;
grid-row: 1;
}
#lms-section-footer .footer-content > .email-signup-block {
grid-column: 3;
grid-row: 2;
}
}
@media screen and (max-width: 749px) {
#lms-section-footer .footer-content {
gap: 34px !important;
}
#lms-section-footer .email-signup__input-group {
flex-wrap: wrap !important;
}
#lms-section-footer .email-signup__input {
flex: 1 1 220px !important;
}
}
/* ==========================================================================
MOTION
========================================================================== */
@keyframes kc-rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
#MainContent > .lms-section:first-of-type,
#MainContent > .shopify-section:first-of-type {
animation: kc-rise 0.7s ease both;
}
#MainContent > .lms-section:nth-of-type(2),
#MainContent > .shopify-section:nth-of-type(2) {
animation: kc-rise 0.85s ease 0.08s both;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation: none !important;
transition: none !important;
}
}
/* ==========================================================================
PLACEHOLDER SYSTEM
--------------------------------------------------------------------------
Kitcove has 0 reviews, 0 customers and 80-150 units of stock per SKU. So the
social-proof, bandwagon and scarcity slots below CANNOT be filled with true
numbers yet. They are built, but marked.
Anything wrapped in .kc-ph is unmistakably a placeholder: dashed outline,
muted, with a corner tag. This is deliberate. A subtle placeholder is a
placeholder that ships by accident, and shipping invented review counts or a
fake "only 3 left" is the one thing here that carries real legal risk.
TO GO LIVE: fill the slot with true data, then delete the .kc-ph wrapper.
Search the theme + docs/copy-deck.md for "kc-ph" to find every one.
========================================================================== */
.kc-ph {
position: relative;
outline: 2px dashed rgba(91, 77, 232, 0.55);
outline-offset: -2px;
background: rgba(91, 77, 232, 0.035);
opacity: 0.88;
}
.kc-ph::before {
content: attr(data-ph);
position: absolute;
top: 0;
left: 0;
z-index: 20;
background: var(--kc-accent);
color: #fff;
font-family: var(--kc-ui);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 9px;
}
.kc-ph--inline {
display: inline-block;
outline-offset: 1px;
padding: 0 4px;
}
.kc-ph--inline::before { display: none; }
/* A token standing in for a number nobody has earned yet, e.g. [REVIEW COUNT] */
.kc-token {
font-family: var(--kc-ui);
font-weight: 700;
color: var(--kc-accent);
background: rgba(91, 77, 232, 0.10);
padding: 1px 6px;
border-radius: 3px;
white-space: nowrap;
}
/* ==========================================================================
BANDWAGON — the stat bar
Every figure here is a token until it is true.
========================================================================== */
.kc-stats {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: var(--kc-cream-2);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
text-align: center;
padding: 40px 20px;
border-block: 1px solid var(--kc-line);
}
.kc-stat b {
display: block;
font-family: var(--kc-display);
font-size: clamp(28px, 7vw, 44px);
font-weight: 600;
line-height: 1;
margin-bottom: 6px;
}
.kc-stat span {
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--kc-ink-soft);
}
/* ==========================================================================
SOCIAL PROOF — scrolling reviews carousel (ink panel)
Temporary sample quotes until real reviews exist. Live file also in
assets/kitcove-reviews.css.
========================================================================== */
.kc-reviews {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: none;
background: var(--kc-ink) !important;
color: var(--kc-cream) !important;
padding: 64px 0 72px;
text-align: center;
overflow: hidden;
}
.kc-reviews h2 {
font-family: var(--kc-display) !important;
font-size: clamp(32px, 7.5vw, 46px) !important;
font-weight: 600 !important;
color: var(--kc-cream) !important;
margin: 0 20px 10px !important;
line-height: 1.1 !important;
}
.kc-reviews__sub {
margin: 0 20px 36px !important;
font-size: 15px !important;
line-height: 1.5 !important;
color: rgba(253, 245, 238, 0.78) !important;
}
.kc-reviews__rail {
overflow: hidden;
width: 100%;
}
.kc-reviews__track {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
gap: 16px;
width: max-content;
padding-inline: 20px;
}
@media (prefers-reduced-motion: no-preference) {
.kc-reviews__track {
animation: kc-reviews-scroll 48s linear infinite;
}
.kc-reviews__rail:hover .kc-reviews__track {
animation-play-state: paused;
}
}
@keyframes kc-reviews-scroll {
to { transform: translateX(-50%); }
}
.kc-review-card {
flex: 0 0 min(300px, 82vw);
box-sizing: border-box;
background: rgba(253, 245, 238, 0.07);
border: 1px solid rgba(253, 245, 238, 0.14);
padding: 26px 22px;
text-align: left;
color: var(--kc-cream);
}
.kc-review-card .s {
color: var(--kc-gold) !important;
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 12px;
line-height: 1;
}
.kc-review-card q {
display: block;
quotes: none;
font-family: var(--kc-display) !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
color: var(--kc-cream) !important;
margin: 0 0 16px !important;
}
.kc-review-card .who {
font-size: 13px;
line-height: 1.4;
color: rgba(253, 245, 238, 0.72) !important;
}
.kc-review-card .who b {
color: var(--kc-cream) !important;
font-weight: 600;
font-family: var(--kc-ui) !important;
}
@media (min-width: 900px) {
.kc-reviews { padding: 72px 0 80px; }
.kc-review-card { flex-basis: 340px; padding: 30px 26px; }
.kc-review-card q { font-size: 22px !important; }
.kc-reviews__track { gap: 18px; padding-inline: 28px; }
}
/* Legacy static proof wall (unused once carousel is live) */
.kc-proof { padding: 64px 20px; text-align: center; }
.kc-proof > h2 {
font-family: var(--kc-display) !important;
font-size: clamp(34px, 8vw, 50px) !important;
margin-bottom: 8px !important;
}
.kc-proof__sub {
color: var(--kc-ink-soft);
font-size: 15px;
margin-bottom: 32px;
}
.kc-proof__grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
max-width: 1100px;
margin: 0 auto;
}
.kc-review {
background: var(--kc-white);
padding: 24px 20px;
text-align: left;
}
.kc-review .s { color: var(--kc-gold); font-size: 14px; letter-spacing: 2px; margin-bottom: 10px; }
.kc-review q {
display: block;
font-family: var(--kc-display);
font-size: 20px;
line-height: 1.35;
margin-bottom: 14px;
quotes: none;
}
.kc-review .who { font-size: 13px; color: var(--kc-ink-soft); }
.kc-review .who b { color: var(--kc-ink); font-weight: 600; }
@media (min-width: 760px) {
.kc-proof__grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
/* ==========================================================================
LOSS AVERSION / RISK REVERSAL
The one section on this page whose claims are all TRUE today.
========================================================================== */
.kc-risk {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: var(--kc-ink);
color: var(--kc-cream);
padding: 64px 22px 70px;
text-align: center;
}
.kc-risk h2 {
font-family: var(--kc-display) !important;
font-size: clamp(32px, 7.5vw, 46px) !important;
color: var(--kc-cream) !important;
margin-bottom: 12px !important;
}
.kc-risk__lede {
color: rgba(253, 245, 238, 0.82);
font-size: 16px;
line-height: 1.6;
max-width: 560px;
margin: 0 auto 40px;
}
.kc-risk__grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
max-width: 900px;
margin: 0 auto 40px;
text-align: left;
}
.kc-risk__item h3 {
font-family: var(--kc-display) !important;
font-size: 22px !important;
color: var(--kc-cream) !important;
margin-bottom: 6px !important;
}
.kc-risk__item p { font-size: 14px; line-height: 1.6; color: rgba(253, 245, 238, 0.8); }
.kc-risk .button, .kc-risk a.kc-cta {
display: inline-block;
background: var(--kc-cream);
color: var(--kc-ink);
text-decoration: none;
font-weight: 600;
font-size: 16px;
padding: 18px 38px;
border-radius: 999px;
}
@media (min-width: 760px) {
.kc-risk__grid { grid-template-columns: repeat(3, 1fr); gap: 34px; }
}
/* ==========================================================================
SCARCITY / URGENCY strip
Structure only. Do not switch this on until the constraint is real.
========================================================================== */
.kc-urgency {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: var(--kc-blush);
color: var(--kc-ink);
text-align: center;
padding: 18px 20px;
font-size: 14px;
font-weight: 500;
}
/* ==========================================================================
CONTENT PAGES (FAQ, guides)
========================================================================== */
.kc-page { max-width: 780px; margin: 0 auto; padding: 56px 20px 80px; }
.kc-page h1 {
font-family: var(--kc-display) !important;
font-size: clamp(38px, 9vw, 58px) !important;
line-height: 1.05 !important;
margin-bottom: 14px !important;
}
.kc-page .kc-lede {
font-size: 18px;
line-height: 1.6;
color: var(--kc-ink-soft);
margin-bottom: 40px;
}
.kc-page h2 {
font-family: var(--kc-display) !important;
font-size: 30px !important;
margin: 40px 0 12px !important;
}
.kc-page p, .kc-page li { font-size: 16px; line-height: 1.7; margin-bottom: 14px; }
.kc-page ul { padding-left: 20px; margin-bottom: 20px; }
.kc-faq { border-top: 1px solid var(--kc-line); }
.kc-faq details {
border-bottom: 1px solid var(--kc-line);
padding: 20px 0;
}
.kc-faq summary {
font-family: var(--kc-display);
font-size: 21px;
font-weight: 600;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
gap: 16px;
}
.kc-faq summary::-webkit-details-marker { display: none; }
.kc-faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--kc-ink-soft); }
.kc-faq details[open] summary::after { content: "\2212"; }
.kc-faq details p {
margin-top: 12px;
color: var(--kc-ink-soft);
font-size: 16px;
line-height: 1.7;
}
/* ==========================================================================
USP STRIP — a slim row of selling points directly under the hero.
Every claim here is TRUE today (no placeholder needed).
========================================================================== */
.kc-usps {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: var(--kc-cream-2);
border-block: 1px solid var(--kc-line);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.kc-usp {
padding: 20px 18px;
text-align: center;
border-top: 1px solid var(--kc-line);
border-left: 1px solid var(--kc-line);
}
.kc-usp:nth-child(-n+2) { border-top: none; }
.kc-usp:nth-child(odd) { border-left: none; }
.kc-usp b {
display: block;
font-family: var(--kc-display);
font-size: 18px;
font-weight: 600;
margin-bottom: 3px;
}
.kc-usp span {
font-size: 12.5px;
line-height: 1.45;
color: var(--kc-ink-soft);
}
@media (min-width: 760px) {
.kc-usps { grid-template-columns: repeat(4, 1fr); }
.kc-usp { border-top: none; }
.kc-usp:nth-child(odd) { border-left: 1px solid var(--kc-line); }
.kc-usp:first-child { border-left: none; }
.kc-usp b { font-size: 19px; }
}
/* ==========================================================================
PRODUCT PAGE enhancements (injected by assets/kitcove-pdp.js)
========================================================================== */
/* Trust row under the Add to cart / Buy it now buttons */
.kc-pdp-trust {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin: 18px 0 4px;
padding-top: 16px;
border-top: 1px solid var(--kc-line);
}
.kc-pdp-trust__item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--kc-ink);
}
.kc-pdp-trust__item svg { color: var(--kc-ink-soft); flex-shrink: 0; }
/* Scarcity + urgency under ATC (JS; suppressed when sold out) */
.kc-pdp-scarce {
margin: 14px 0 0;
padding: 12px 14px;
background: var(--kc-cream-2);
border: 1px solid var(--kc-line);
}
.kc-pdp-scarce__stock {
margin: 0 0 4px;
font-size: 14px;
color: var(--kc-ink);
}
.kc-pdp-scarce__stock strong { font-weight: 600; }
.kc-pdp-scarce__watch {
margin: 0;
font-size: 13px;
color: var(--kc-ink-soft);
}
/* Info accordion after the description (Andor-style labels) */
.kc-pdp-acc {
margin-top: 26px;
border-top: 1px solid var(--kc-line);
}
.kc-pdp-acc__item {
border-bottom: 1px solid var(--kc-line);
}
.kc-pdp-acc__item summary {
list-style: none;
cursor: pointer;
padding: 18px 0;
font-family: var(--kc-ui);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--kc-ink);
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.kc-pdp-acc__item summary::-webkit-details-marker { display: none; }
.kc-pdp-acc__item summary::after {
content: "";
width: 10px;
height: 10px;
border-right: 1.5px solid var(--kc-ink-soft);
border-bottom: 1.5px solid var(--kc-ink-soft);
transform: rotate(45deg);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.kc-pdp-acc__item[open] summary::after {
transform: rotate(-135deg);
margin-top: 6px;
}
.kc-pdp-acc__body {
padding: 0 0 18px;
}
.kc-pdp-acc__body p {
font-size: 14.5px;
line-height: 1.65;
color: var(--kc-ink-soft);
margin: 0;
}
.kc-pdp-acc__body a { color: var(--kc-ink); text-decoration: underline; }
.kc-pdp-acc__body strong { color: var(--kc-ink); font-weight: 600; }
/* Below-fold deep PDP (before You may also like) */
.kc-pdp-deep {
width: 100%;
margin: 0;
}
.kc-pdp-usps {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
background: var(--kc-cream-2);
border-block: 1px solid var(--kc-line);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 48px 20px;
}
.kc-pdp-usp {
padding: 22px 18px;
border-top: 1px solid var(--kc-line);
border-left: 1px solid var(--kc-line);
}
.kc-pdp-usp:nth-child(-n+2) { border-top: none; }
.kc-pdp-usp:nth-child(odd) { border-left: none; }
.kc-pdp-usp svg {
display: block;
margin-bottom: 14px;
color: var(--kc-ink);
}
.kc-pdp-usp h3 {
font-family: var(--kc-ui) !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
margin: 0 0 8px !important;
color: var(--kc-ink) !important;
}
.kc-pdp-usp p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--kc-ink-soft);
}
@media (min-width: 900px) {
.kc-pdp-usps {
grid-template-columns: repeat(4, 1fr);
padding: 56px 40px;
}
.kc-pdp-usp { border-top: none; padding: 8px 24px; }
.kc-pdp-usp:nth-child(odd) { border-left: 1px solid var(--kc-line); }
.kc-pdp-usp:first-child { border-left: none; }
}
.kc-pdp-split {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
display: grid;
grid-template-columns: 1fr;
min-height: 420px;
background: var(--kc-cream);
}
.kc-pdp-split__copy {
display: flex;
flex-direction: column;
justify-content: center;
padding: 48px 28px;
background: var(--kc-cream);
}
.kc-pdp-split__copy h2 {
font-family: var(--kc-display) !important;
font-size: clamp(28px, 5vw, 42px) !important;
font-weight: 600 !important;
line-height: 1.1 !important;
margin: 0 0 16px !important;
max-width: 16ch;
}
.kc-pdp-split__copy p {
margin: 0;
font-size: 16px;
line-height: 1.65;
color: var(--kc-ink-soft);
max-width: 36ch;
}
.kc-pdp-split__media {
min-height: 280px;
background-size: cover;
background-position: center;
background-color: var(--kc-cream-2);
}
@media (min-width: 900px) {
.kc-pdp-split {
grid-template-columns: 1fr 1fr;
min-height: 520px;
}
.kc-pdp-split__copy { padding: 64px clamp(40px, 6vw, 88px); }
.kc-pdp-split__media { min-height: 100%; }
.kc-pdp-split--rev .kc-pdp-split__copy { order: 2; text-align: right; align-items: flex-end; }
.kc-pdp-split--rev .kc-pdp-split__copy p { text-align: right; }
.kc-pdp-split--rev .kc-pdp-split__media { order: 1; }
}
.kc-pdp-included {
max-width: 1100px;
margin: 0 auto;
padding: 64px 24px 72px;
text-align: center;
}
.kc-pdp-included h2 {
font-family: var(--kc-display) !important;
font-size: clamp(28px, 5vw, 40px) !important;
font-weight: 600 !important;
margin: 0 0 36px !important;
}
.kc-pdp-included__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 16px;
text-align: left;
}
.kc-pdp-included__grid li {
padding: 18px 16px;
background: var(--kc-white);
border: 1px solid var(--kc-line);
}
.kc-pdp-included__grid b {
display: block;
font-family: var(--kc-ui);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 6px;
}
.kc-pdp-included__grid span {
font-size: 14px;
line-height: 1.5;
color: var(--kc-ink-soft);
}
@media (min-width: 760px) {
.kc-pdp-included__grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
}