/* CustomKaro homepage — port of the Lovable design. Everything is scoped to .ck-home. */
.ck-home {
	--ck-ink: #1a1816;
	--ck-ink: oklch(0.19 0.005 60);
	--ck-coral: #f04a2a;
	--ck-coral: oklch(0.637 0.215 30.6);
	--ck-cream: #f6f4ec;
	--ck-cream: oklch(0.968 0.013 100);
	--ck-display: "Archivo Black", system-ui, sans-serif;
	--ck-body: "Hind", system-ui, sans-serif;
	--ck-r-lg: min(2vw, 20px);
	--ck-r-md: min(1.5vw, 14px);

	background: var(--ck-cream);
	color: var(--ck-ink);
	font-family: var(--ck-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.ck-home *,
.ck-home *::before,
.ck-home *::after { box-sizing: border-box; }
.ck-home img { display: block; max-width: 100%; }
:where(.ck-home) a { text-decoration: none; color: inherit; }
:where(.ck-home) :is(h1, h2, h3, p, figure, blockquote, ul, li) { margin: 0; padding: 0; }
:where(.ck-home) ul { list-style: none; }
/* The Printbe theme colours and re-fonts every heading; keep ours on the design's own colours and fonts. */
.ck-home :is(h1, h2, h3) { color: inherit; font-family: inherit; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.ck-home .ck-display { font-family: var(--ck-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.025em; }
.ck-home .ck-hero__title,
.ck-home .ck-how__title { color: var(--ck-cream); }
.ck-home .ck-mini__title,
.ck-home .ck-cat__title,
.ck-home .ck-section__title { color: var(--ck-ink); }
.ck-home .ck-step__title { color: var(--ck-cream); }
.ck-home .ck-step__n { color: var(--ck-coral); }
/* The Printbe theme styles blockquotes (quote mark, indent) and buttons (pill, padding); reset both inside the design. */
.ck-home blockquote { border: 0; background: none; quotes: none; font-style: normal; color: inherit; }
.ck-home blockquote::before,
.ck-home blockquote::after { content: none; display: none; }
.ck-home button.ck-plus { padding: 0; min-width: 0; line-height: 1; color: var(--ck-ink); box-shadow: none; text-transform: none; }
.ck-home ::selection { background: var(--ck-coral); color: var(--ck-cream); }

.ck-home__main { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.ck-display { font-family: var(--ck-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.025em; }
.ck-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ck-coral); }

/* Animations */
@keyframes ck-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ck-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ck-spin { to { transform: rotate(360deg); } }
.ck-rise { animation: ck-rise 0.6s cubic-bezier(0.32, 0.72, 0, 1) both; }

/* Bento hero */
.ck-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; padding-top: 16px; }
.ck-bento > * { grid-column: span 12; }
.ck-tile { border-radius: var(--ck-r-lg); }
.ck-tile--card { background: #fff; border: 1px solid rgba(26, 24, 22, 0.1); }

.ck-hero { position: relative; min-height: 420px; overflow: hidden; background: var(--ck-ink); color: var(--ck-cream); }
.ck-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-hero__shade { position: absolute; inset: 0; background: rgba(26, 24, 22, 0.4); }
.ck-hero__body { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 24px; }
.ck-hero__top { display: flex; align-items: flex-start; justify-content: space-between; }
.ck-pill { background: var(--ck-coral); color: var(--ck-ink); border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; }
.ck-seal { display: none; width: 64px; height: 64px; place-items: center; border-radius: 50%; border: 2px dashed rgba(246, 244, 236, 0.4); color: rgba(246, 244, 236, 0.7); text-align: center; font-size: 9px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.025em; animation: ck-spin 14s linear infinite; }
.ck-hero__bottom { margin-top: auto; }
.ck-hero__brand { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; color: var(--ck-coral); }
.ck-hero__title { margin-top: 8px; font-size: 3rem; line-height: 0.85; overflow-wrap: normal; word-break: normal; }
.ck-hero__lead { margin-top: 16px; max-width: 28rem; font-size: 14px; color: rgba(246, 244, 236, 0.8); }
.ck-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.ck-btn { display: inline-block; border-radius: 999px; padding: 12px 24px; font-size: 14px; font-weight: 700; transition: transform 0.15s, background 0.15s, color 0.15s; }
.ck-btn--coral { background: var(--ck-coral); color: var(--ck-ink); }
.ck-btn--coral:hover { transform: translateY(-2px); }
.ck-btn--ghost { border: 1px solid rgba(246, 244, 236, 0.4); color: var(--ck-cream); }
.ck-btn--ghost:hover { background: var(--ck-cream); color: var(--ck-ink); }

.ck-cat { display: flex; flex-direction: column; grid-column: span 6; }
.ck-cat__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ck-r-lg) var(--ck-r-lg) 0 0; background: rgba(26, 24, 22, 0.06); }
.ck-cat__body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.ck-tag { align-self: flex-start; border-radius: 4px; background: rgba(240, 74, 42, 0.15); color: var(--ck-coral); padding: 2px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; }
.ck-cat__title { margin-top: 8px; font-size: 1.5rem; }
.ck-cat__text { margin-top: 4px; font-size: 14px; color: rgba(26, 24, 22, 0.6); }
.ck-cat__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; }
.ck-link { font-size: 14px; font-weight: 700; color: var(--ck-coral); }
.ck-link:hover { text-decoration: underline; }

.ck-mini { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; }
.ck-mini--coral { grid-column: span 6; background: var(--ck-coral); color: var(--ck-ink); }
.ck-mini__title { font-size: 1.875rem; line-height: 1; overflow-wrap: normal; word-break: normal; }
.ck-mini--card .ck-mini__title { font-size: 1.5rem; line-height: 1.15; }
.ck-mini--coral .ck-mini__text { margin-top: 8px; font-size: 14px; font-weight: 600; }
.ck-mini--card .ck-mini__text { margin-top: 4px; font-size: 13px; color: rgba(26, 24, 22, 0.6); }
.ck-mini__price { align-self: flex-start; margin-top: 12px; font-size: 16px; font-weight: 700; color: var(--ck-coral); }
.ck-mini--coral .ck-mini__price { margin-top: 0; font-size: 14px; color: inherit; text-decoration: underline; text-underline-offset: 4px; }

/* Marquee */
.ck-marquee { position: relative; margin: 24px 0; overflow: hidden; border-top: 4px solid var(--ck-coral); border-bottom: 4px solid var(--ck-coral); background: var(--ck-ink); color: var(--ck-cream); padding: 12px 0; }
.ck-marquee__track { display: flex; white-space: nowrap; width: max-content; animation: ck-marquee 22s linear infinite; }
.ck-marquee__copy { padding: 0 16px; font-size: 1.25rem; }
.ck-marquee__copy i { font-style: normal; color: var(--ck-coral); }

/* Sections */
.ck-section { padding: 32px 0; scroll-margin-top: 80px; }
.ck-section__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; }
.ck-section__title { margin-top: 4px; font-size: 2.25rem; line-height: 1; }
.ck-section__all { display: none; }

.ck-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ck-product { display: block; color: inherit; overflow: hidden; border-radius: var(--ck-r-md); border: 1px solid rgba(26, 24, 22, 0.1); background: #fff; }
.ck-product__img { width: 100%; aspect-ratio: 1; object-fit: cover; background: rgba(26, 24, 22, 0.06); }
.ck-product__body { display: block; padding: 16px; }
.ck-home .ck-product__name { display: block; font-size: 14px; font-weight: 600; font-family: var(--ck-body); color: var(--ck-ink); }
.ck-product__row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.ck-product__price { font-family: var(--ck-display); font-size: 1.125rem; color: var(--ck-ink); }
.ck-product:hover .ck-plus { background: var(--ck-coral); color: var(--ck-ink); }
.ck-plus { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(26, 24, 22, 0.1); background: var(--ck-cream); color: var(--ck-ink); font-weight: 700; transition: background 0.15s; }

.ck-how { margin: 24px 0; scroll-margin-top: 80px; border-radius: var(--ck-r-lg); background: var(--ck-ink); color: var(--ck-cream); padding: 24px; }
.ck-how__title { margin: 4px 0 24px; font-size: 1.875rem; line-height: 1; }
.ck-how__grid { display: grid; gap: 24px; }
.ck-step { border-top: 2px solid var(--ck-coral); padding-top: 16px; }
.ck-step__n { font-size: 1.5rem; color: var(--ck-coral); }
.ck-step__title { margin-top: 4px; font-size: 1.25rem; }
.ck-step__text { margin-top: 4px; font-size: 14px; color: rgba(246, 244, 236, 0.7); }

.ck-quotes { display: flex; gap: 12px; margin-top: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ck-quotes::-webkit-scrollbar { display: none; }
.ck-quotes:focus-visible { outline: 2px solid var(--ck-coral); outline-offset: 4px; }
.ck-quote { flex: 0 0 85%; scroll-snap-align: start; margin: 0; border-radius: var(--ck-r-md); border: 1px solid rgba(26, 24, 22, 0.1); background: #fff; padding: 20px; }
.ck-quote blockquote { font-size: 15px; line-height: 1.375; }
.ck-quote figcaption { margin-top: 16px; font-size: 14px; }
.ck-quote figcaption b { font-weight: 700; }
.ck-quote figcaption span { color: rgba(26, 24, 22, 0.5); }

/* >= 640px (sm) */
@media (min-width: 640px) {
	.ck-home__main { padding: 0 1.5rem; }
	.ck-bento { gap: 16px; padding-top: 24px; }
	.ck-hero__body { padding: 40px; }
	.ck-seal { display: grid; }
	.ck-hero__title { font-size: 4.5rem; }
	.ck-hero__lead { font-size: 16px; }
	.ck-hero__brand { font-size: 14px; }
	.ck-marquee { margin: 32px 0; }
	.ck-marquee__copy { font-size: 1.5rem; }
	.ck-section { padding: 40px 0; }
	.ck-section__title { font-size: 3rem; }
	.ck-section__all { display: block; }
	.ck-products { gap: 16px; }
	.ck-how { margin: 32px 0; padding: 40px; }
	.ck-how__title { margin-bottom: 32px; font-size: 3rem; }
	.ck-how__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ck-quotes { gap: 16px; }
	.ck-quote { flex-basis: calc((100% - 16px) / 2); }
}

/* >= 1024px (lg) */
@media (min-width: 1024px) {
	.ck-hero { grid-column: span 8; grid-row: span 2; }
	.ck-cat { grid-column: span 4; grid-row: span 2; }
	.ck-mini,
	.ck-mini:last-child { grid-column: span 2; }
	.ck-hero__title { font-size: 6rem; }
	.ck-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ck-quote { flex-basis: calc((100% - 32px) / 3); }
}

/* ---- Header and footer (Lovable design) ---- */
.ck-home { width: 100%; overflow-x: clip; }
.ck-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(26, 24, 22, 0.1); background: rgba(246, 244, 236, 0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ck-header__in { display: flex; align-items: center; gap: 24px; height: 64px; max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
.ck-logo { display: flex; align-items: flex-end; gap: 4px; color: var(--ck-ink); }
.ck-logo__dot { display: inline-block; width: 24px; height: 24px; border-radius: 50%; background: var(--ck-coral); animation: ck-spin 14s linear infinite; }
.ck-logo__text { font-size: 20px; line-height: 1; padding-bottom: 2px; }
.ck-logo__mark { height: 36px; width: auto; flex-shrink: 0; }
.ck-logo__text span,
.ck-footer__logo span { color: var(--ck-coral); }
.ck-nav { display: none; align-items: center; gap: 28px; margin-left: auto; font-size: 14px; font-weight: 600; }
.ck-nav a { color: var(--ck-ink); transition: color 0.15s; }
.ck-nav a:hover { color: var(--ck-coral); }
.ck-cart { margin-left: auto; border-radius: 999px; background: var(--ck-ink); color: var(--ck-cream); padding: 8px 16px; font-size: 14px; font-weight: 600; transition: background 0.15s, color 0.15s; }
.ck-cart:hover { background: var(--ck-coral); color: var(--ck-ink); }

.ck-footer { background: var(--ck-ink); color: var(--ck-cream); }
.ck-footer__in { max-width: 80rem; margin: 0 auto; padding: 40px 1rem; }
.ck-footer__top { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.ck-footer__brand { max-width: 20rem; }
.ck-footer__logo { font-size: 1.5rem; line-height: 1; }
.ck-footer__tag { margin-top: 8px; font-size: 14px; color: rgba(246, 244, 236, 0.6); }
.ck-footer__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ck-footer__badges span { border-radius: 999px; background: rgba(246, 244, 236, 0.1); padding: 4px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; }
.ck-footer__badges span.is-coral { background: var(--ck-coral); color: var(--ck-ink); }
.ck-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; font-size: 14px; }
.ck-footer__cols p { margin-bottom: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.025em; color: var(--ck-coral); }
.ck-footer__cols li + li { margin-top: 8px; }
.ck-footer__cols a { color: rgba(246, 244, 236, 0.7); transition: color 0.15s; }
.ck-footer__cols a:hover { color: var(--ck-coral); }
.ck-footer__bottom { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; margin-top: 40px; border-top: 1px solid rgba(246, 244, 236, 0.15); padding-top: 24px; font-size: 12px; color: rgba(246, 244, 236, 0.5); }

@media (min-width: 640px) {
	.ck-header__in { padding: 0 1.5rem; }
	.ck-nav { display: flex; }
	.ck-cart { margin-left: 0; }
	.ck-footer__in { padding: 48px 1.5rem; }
	.ck-footer__top { flex-direction: row; }
	.ck-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ck-footer__bottom { flex-direction: row; }
}

/* ---- Line-heights of the Lovable design (Tailwind text-sm = 20px, text-xs = 16px, ...) ---- */
.ck-home .ck-nav a,
.ck-home .ck-cart,
.ck-home .ck-btn,
.ck-home .ck-cat__text,
.ck-home .ck-link,
.ck-home .ck-mini--coral .ck-mini__text,
.ck-home .ck-mini--coral .ck-mini__price,
.ck-home .ck-step__text,
.ck-home .ck-quote figcaption,
.ck-home .ck-footer__tag,
.ck-home .ck-footer__cols { line-height: 20px; }
.ck-home .ck-eyebrow,
.ck-home .ck-footer__cols p,
.ck-home .ck-footer__bottom { line-height: 16px; }
.ck-home .ck-seal { line-height: 1.25; }
.ck-home .ck-cat__title { line-height: 32px; }
.ck-home .ck-mini--card .ck-mini__title { line-height: 1.25; }
.ck-home .ck-step__n { font-size: 1.5rem; line-height: 32px; letter-spacing: normal; text-transform: none; }
.ck-home .ck-step__title { line-height: 28px; }
.ck-home .ck-product__price { line-height: 28px; }
.ck-home .ck-hero__lead { line-height: 20px; }
.ck-home .ck-quote blockquote { font-family: var(--ck-body); font-size: 15px; line-height: 1.375; margin: 0; padding: 0; }
.ck-home .ck-quote figcaption { font-family: var(--ck-body); }
.ck-home .ck-marquee__copy { line-height: 28px; }
.ck-home .ck-product__name { line-height: 20px; }
.ck-home button.ck-plus { font: 700 16px/24px var(--ck-body); letter-spacing: normal; }
@media (min-width: 640px) {
	.ck-home .ck-marquee__copy { line-height: 32px; }
}
.ck-home .ck-hero__brand { line-height: 16px; }
@media (min-width: 640px) {
	.ck-home .ck-hero__brand { line-height: 20px; }
	.ck-home .ck-hero__lead { line-height: 24px; }
}

/* Reviews slider controls */
.ck-slider__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.ck-slider__count { min-width: 56px; text-align: center; font-size: 14px; font-weight: 600; color: rgba(26, 24, 22, 0.6); }
.ck-home button.ck-slider__btn { display: grid; place-items: center; width: 44px; height: 44px; min-width: 0; padding: 0; border-radius: 50%; border: 1px solid rgba(26, 24, 22, 0.15); background: #fff; color: var(--ck-ink); font-size: 18px; line-height: 1; box-shadow: none; text-transform: none; cursor: pointer; transition: background 0.15s; }
.ck-home button.ck-slider__btn:hover:not(:disabled) { background: var(--ck-coral); }
.ck-home button.ck-slider__btn:disabled { opacity: 0.35; cursor: default; }