/* Krunch Karo — styles for markup the widgets introduce that isn't in the
   original ported.css. Uses the same brand tokens (defined in ported.css). */

/* Chip-bag / pack images inside hero, grid, box */
.kk-pack-img{width:100%;height:auto;display:block;filter:drop-shadow(4px 6px 0 rgba(6,55,31,.18))}
.hero-art .pack-float .kk-pack-img,
.box-stack .pack-float .kk-pack-img{max-width:180px}
.pack-wrap .kk-pack-img{max-width:150px;margin:0 auto}

/* Product grid defaults (ported.css styles .card; ensure grid track fallback) */
.kk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:900px){.kk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.kk-grid{grid-template-columns:1fr}}
.kk-grid .card[hidden]{display:none}

/* Tabs active/hover already in ported.css; keep pointer */
.kk-tabs .tab{cursor:pointer}

/* ---------- Testimonials ---------- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.rev-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.rev-grid{grid-template-columns:1fr}}
.rev-card{
	background:#fff;border:3px solid var(--ink);border-radius:22px;
	padding:26px 24px;box-shadow:5px 6px 0 var(--ink);
	position:relative;overflow:hidden
}
.rev-card::before{content:"";position:absolute;inset:0 auto auto 0;height:8px;width:100%;background:var(--acc,#FF2D78)}
.rev-card .rt{font-family:var(--font-body);font-weight:600;font-size:clamp(15px,1.6vw,18px);line-height:1.45;margin-top:10px}
.rev-meta{display:flex;align-items:center;gap:12px;margin-top:18px}
.rev-av{width:44px;height:44px;border-radius:999px;border:2px solid var(--ink);object-fit:cover}
.rev-dot{width:16px;height:16px;border-radius:999px;display:inline-block;border:2px solid var(--ink)}
.rev-name{display:flex;flex-direction:column;line-height:1.1}
.rev-name b{font-family:var(--font-round);font-weight:700}
.rev-name small{opacity:.7}

/* ---------- Subscribe form ---------- */
.subscribe{background:var(--ink);color:var(--cream)}
.subscribe h2{color:var(--yolk)}
.subscribe .eyebrow{background:var(--yolk);color:var(--ink)}
.sub-inner{max-width:680px;margin:0 auto}
.kk-sub-form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.kk-sub-input{
	font-family:var(--font-body);font-size:17px;
	padding:.85em 1.1em;border-radius:999px;border:3px solid var(--ink);
	min-width:min(360px,80vw);background:#fff;color:var(--ink)
}
.kk-sub-input:focus{outline:3px solid var(--beet);outline-offset:2px}
.kk-sub-msg{margin-top:16px;font-family:var(--font-round);font-weight:600;min-height:1.4em}

/* Ambient host inside hero */
.hero .ambient{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.hero .wrap{position:relative;z-index:1}