/* ---------- the live community feed (/community/) ----------
   Builds on forum.css: the same --forum-* tokens (a tenant theme that maps them, as
   shop-wis.css does under .shop-wis-theme, skins this too), the same avatars, badges,
   buttons and dialogs. Everything here is .community-* so nothing leaks into the forum. */

.community {
	max-width:70rem;
}

.community-columns {
	grid-template-columns:minmax(0, 40rem) minmax(0, 21rem);
	justify-content:center;
	gap:2.25rem;
}

/* the hero, the join box and any notice line up with the two columns below them */
.community > .forum-hero,
.community > .forum-gate,
.community > .forum-empty {
	max-width:63.25rem;
	margin-left:auto;
	margin-right:auto;
}

.community-hero .forum-lead {
	max-width:40rem;
}

/* the live marker */
.community-live {
	display:inline-flex;
	align-items:center;
	gap:.45rem;
	margin:0;
	padding:.35rem .85rem;
	border:1px solid var(--forum-line);
	border-radius:30px;
	background:var(--forum-paper);
	color:var(--forum-ink-soft);
	font-size:.88rem;
}

.community-live strong {
	color:var(--forum-ink);
}

.community-live.is-paused .community-dot {
	background:var(--forum-muted);
	animation:none;
}

.community-dot,
.forum-live-dot {
	display:inline-block;
	width:.6rem;
	height:.6rem;
	border-radius:50%;
	background:var(--forum-terracotta);
	box-shadow:0 0 0 0 rgba(184, 96, 61, .55);
	animation:community-pulse 2s infinite;
	flex:0 0 auto;
}

@keyframes community-pulse {
	0% { box-shadow:0 0 0 0 rgba(184, 96, 61, .5); }
	70% { box-shadow:0 0 0 .5rem rgba(184, 96, 61, 0); }
	100% { box-shadow:0 0 0 0 rgba(184, 96, 61, 0); }
}

/* the composer */
.community-composer {
	margin:0 0 1.25rem;
	padding:1rem 1.1rem .8rem;
	background:var(--forum-paper);
	border:1px solid var(--forum-line);
	border-radius:18px;
	box-shadow:0 8px 22px var(--forum-shadow);
}

.community-composer-row {
	display:flex;
	gap:.8rem;
	align-items:flex-start;
}

.community-composer-text {
	flex:1 1 auto;
	width:100%;
	min-height:3rem;
	max-height:22rem;
	padding:.55rem .2rem;
	border:0;
	background:transparent;
	color:var(--forum-ink);
	font:inherit;
	font-size:1.02rem;
	line-height:1.5;
	resize:none;
	outline:none;
}

.community-composer-text::placeholder {
	color:var(--forum-muted);
}

.community-composer:focus-within {
	border-color:var(--forum-gold);
}

.community-composer-bar {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.6rem;
	margin-top:.7rem;
	padding-top:.7rem;
	border-top:1px solid var(--forum-line);
}

.community-pick {
	position:relative;
	cursor:pointer;
}

.community-pick:focus-within {
	outline:2px solid var(--forum-gold);
	outline-offset:2px;
}

.community-composer-hint {
	flex:1 1 auto;
	color:var(--forum-muted);
	font-size:.8rem;
}

.community-post-btn {
	margin:0 0 0 auto;
	padding:.5rem 1.4rem;
}

.community-post-btn[disabled] {
	opacity:.6;
	cursor:progress;
}

.community-previews {
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(5.5rem, 1fr));
	gap:.5rem;
	margin-top:.8rem;
}

.community-preview {
	position:relative;
	aspect-ratio:1 / 1;
	border-radius:12px;
	overflow:hidden;
	background:var(--forum-cream-deep);
}

.community-preview img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.community-preview button {
	position:absolute;
	top:.3rem;
	right:.3rem;
	width:1.7rem;
	height:1.7rem;
	border:0;
	border-radius:50%;
	background:rgba(37, 48, 44, .72);
	color:#fff;
	font-size:.8rem;
	line-height:1;
	cursor:pointer;
}

.community-alert {
	margin:.7rem 0 0;
	padding:.6rem .9rem;
	border-radius:12px;
	background:rgba(194, 104, 63, .12);
	border:1px solid rgba(194, 104, 63, .4);
	font-size:.9rem;
}

/* filter tabs */
.community-tabs {
	display:flex;
	gap:.4rem;
	margin:0 0 1rem;
	overflow-x:auto;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
}

.community-tabs::-webkit-scrollbar {
	display:none;
}

.forum .community-tab {
	flex:0 0 auto;
	padding:.4rem .95rem;
	border:1px solid var(--forum-line);
	border-radius:30px;
	background:var(--forum-paper);
	color:var(--forum-ink-soft);
	font-size:.86rem;
	font-weight:600;
	text-decoration:none;
	white-space:nowrap;
}

.forum .community-tab:hover,
.forum .community-tab:focus-visible {
	border-color:var(--forum-gold);
	color:var(--forum-ink);
}

.forum .community-tab.is-on {
	background:var(--forum-forest);
	border-color:var(--forum-forest);
	color:var(--forum-cream-text);
}

/* "3 new" - shown when the reader has scrolled away from the top */
.community-newpill {
	position:sticky;
	top:.8rem;
	z-index:5;
	display:flex;
	align-items:center;
	gap:.45rem;
	margin:0 auto .8rem;
	padding:.5rem 1.1rem;
	border:0;
	border-radius:30px;
	background:var(--forum-forest);
	color:var(--forum-cream-text);
	font:inherit;
	font-size:.88rem;
	font-weight:700;
	box-shadow:0 10px 24px var(--forum-shadow-strong);
	cursor:pointer;
}

.community-newpill[hidden] {
	display:none;
}

/* the stream */
.community-list {
	display:grid;
	gap:1rem;
}

.community-card {
	background:rgba(253, 250, 244, .96);
	border:1px solid var(--forum-line);
	border-radius:18px;
	box-shadow:0 8px 22px var(--forum-shadow);
	overflow:hidden;
}

.community-card.is-arriving {
	animation:community-arrive .6s ease-out both;
}

.community-card.is-leaving {
	transition:opacity .35s ease, transform .35s ease;
	opacity:0;
	transform:scale(.98);
}

@keyframes community-arrive {
	0% { opacity:0; transform:translateY(-10px); box-shadow:0 0 0 3px var(--forum-gold); }
	60% { opacity:1; transform:none; box-shadow:0 0 0 3px var(--forum-gold); }
	100% { box-shadow:0 8px 22px var(--forum-shadow); }
}

.community-card:target {
	border-color:var(--forum-gold);
}

.community-card-head {
	display:flex;
	gap:.75rem;
	align-items:flex-start;
	padding:1rem 1.1rem 0;
}

.community-card-who {
	flex:1 1 auto;
	min-width:0;
}

.community-card-line {
	margin:0;
	color:var(--forum-ink-soft);
	line-height:1.4;
}

.forum .community-name {
	color:var(--forum-ink);
	font-weight:700;
	text-decoration:none;
}

.forum a.community-name:hover,
.forum a.community-name:focus-visible {
	text-decoration:underline;
}

.community-card-meta {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.1rem .4rem;
	margin:.15rem 0 0;
	color:var(--forum-muted);
	font-size:.8rem;
}

.forum .community-time {
	color:inherit;
	text-decoration:none;
}

.forum .community-time:hover {
	text-decoration:underline;
}

.community-kind i {
	margin-right:.15rem;
}

.community-private {
	font-style:italic;
}

.community-avatar-icon {
	background:var(--forum-cream-deep);
	color:var(--forum-amber-deep);
	font-size:1rem;
}

.community-card.is-purchase .community-avatar-icon,
.community-card.is-membership .community-avatar-icon {
	background:rgba(201, 162, 75, .2);
}

.community-card-tools {
	flex:0 0 auto;
	margin:-.2rem -.35rem 0 0;
}

.community-card-body {
	padding:.7rem 1.1rem 0;
}

/* cards with no likes or comments under them (the forum ones) need their own bottom edge */
.community-card.is-topic .community-card-body,
.community-card.is-reply .community-card-body {
	padding-bottom:1.1rem;
}

.community-card-body:empty {
	display:none;
}

.community-text {
	color:var(--forum-ink);
	font-size:1rem;
	overflow-wrap:anywhere;
}

.community-text p {
	margin:0 0 .6rem;
}

.community-text p:last-child {
	margin-bottom:0;
}

/* photos: one at its own shape, then two, three and four-up grids */
.community-photos {
	display:grid;
	gap:3px;
	margin:.8rem -1.1rem 0;
	background:var(--forum-line);
}

.community-text + .community-photos {
	margin-top:.8rem;
}

.community-photo {
	position:relative;
	display:block;
	overflow:hidden;
	background:var(--forum-cream-deep);
}

.community-photo img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	transition:transform .4s ease;
}

.community-photo:hover img,
.community-photo:focus-visible img {
	transform:scale(1.02);
}

.community-photos.is-1 .community-photo img {
	height:auto;
	max-height:34rem;
}

.community-photos.is-2 {
	grid-template-columns:1fr 1fr;
}

.community-photos.is-2 .community-photo,
.community-photos.is-4 .community-photo {
	aspect-ratio:1 / 1;
}

.community-photos.is-3 {
	grid-template-columns:2fr 1fr;
	grid-template-rows:1fr 1fr;
	aspect-ratio:3 / 2;
}

.community-photos.is-3 .community-photo:first-child {
	grid-row:span 2;
}

.community-photos.is-4 {
	grid-template-columns:1fr 1fr;
}

.community-photo-more {
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(37, 48, 44, .5);
	color:#fff;
	font-size:1.8rem;
	font-weight:700;
}

/* tiles: a forum conversation, a product */
.forum .community-tile {
	display:flex;
	gap:.9rem;
	align-items:center;
	padding:.85rem 1rem;
	border:1px solid var(--forum-line);
	border-radius:14px;
	background:var(--forum-cream);
	color:var(--forum-ink);
	text-decoration:none;
	transition:border-color .2s ease, transform .2s ease;
}

.forum .community-tile:hover,
.forum .community-tile:focus-visible {
	border-color:var(--forum-gold);
	color:var(--forum-ink);
	transform:translateY(-1px);
}

.community-tile.is-forum {
	flex-direction:column;
	align-items:stretch;
	gap:.25rem;
	border-left:4px solid var(--forum-gold);
}

.community-tile-eyebrow {
	color:var(--forum-amber-deep);
	font-size:.72rem;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
}

.community-tile-title {
	display:block;
	font-family:var(--forum-display);
	font-size:1.12rem;
	line-height:1.3;
}

.community-tile-text {
	display:block;
	color:var(--forum-ink-soft);
	font-size:.92rem;
	overflow-wrap:anywhere;
}

.community-tile-text.is-locked {
	color:var(--forum-muted);
	font-style:italic;
}

.community-tile-foot {
	display:block;
	margin-top:.2rem;
	color:var(--forum-muted);
	font-size:.82rem;
}

.community-tile-foot strong {
	color:var(--forum-forest);
}

.community-tile-img {
	flex:0 0 auto;
	width:5.5rem;
	height:5.5rem;
	border-radius:12px;
	object-fit:cover;
	background:var(--forum-paper);
}

.community-tile-img.is-icon {
	display:flex;
	align-items:center;
	justify-content:center;
	color:var(--forum-amber);
	font-size:1.8rem;
}

.community-tile-copy {
	min-width:0;
}

.community-welcome {
	margin:0;
	padding:.7rem .9rem;
	border-radius:14px;
	background:linear-gradient(135deg, var(--forum-cream), var(--forum-cream-deep));
	color:var(--forum-ink-soft);
}

.community-welcome i {
	color:var(--forum-terracotta);
	margin-right:.25rem;
}

.community-card-foot {
	padding:.8rem 1.1rem 1rem;
}

/* likes and comments */
.community-social {
	margin-top:.8rem;
	padding:.55rem 1.1rem .2rem;
	border-top:1px solid var(--forum-line);
}

.community-social-bar {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:.4rem;
}

.community-like.is-on {
	background:var(--forum-terracotta);
	border-color:var(--forum-terracotta);
	color:#fff;
}

.community-card.is-join .community-like.is-on {
	background:var(--forum-forest);
	border-color:var(--forum-forest);
}

.community-like.is-popping i {
	animation:community-pop .35s ease;
}

@keyframes community-pop {
	50% { transform:scale(1.35); }
}

.community-count:not(:empty) {
	margin-left:.1rem;
	padding-left:.35rem;
	border-left:1px solid currentColor;
	opacity:.85;
}

.community-social-count {
	color:var(--forum-muted);
	font-size:.82rem;
}

.community-more-comments,
.community-link-btn {
	padding:0;
	border:0;
	background:none;
	color:var(--forum-forest);
	font:inherit;
	font-size:.84rem;
	font-weight:600;
	cursor:pointer;
}

.community-more-comments {
	display:block;
	margin:.55rem 0 0;
}

.community-link-btn {
	color:var(--forum-muted);
	font-size:.76rem;
	font-weight:600;
}

.community-more-comments:hover,
.community-link-btn:hover {
	text-decoration:underline;
}

.community-comments {
	list-style:none;
	margin:.6rem 0 0;
	padding:0;
	display:grid;
	gap:.5rem;
}

.community-comment {
	display:flex;
	gap:.5rem;
	align-items:flex-start;
}

.community-comment.is-arriving .community-comment-bubble {
	animation:community-arrive .6s ease-out both;
}

.community-comment-bubble {
	min-width:0;
	max-width:100%;
	padding:.45rem .8rem .35rem;
	border-radius:4px 16px 16px 16px;
	background:var(--forum-cream-deep);
}

.community-comment-who {
	margin:0;
	font-size:.84rem;
	line-height:1.3;
}

.community-comment-who .forum-badge {
	font-size:.6rem;
}

.community-comment-text {
	font-size:.93rem;
	line-height:1.45;
	overflow-wrap:anywhere;
}

.community-comment-text p {
	margin:0;
}

.community-comment-meta {
	display:flex;
	gap:.7rem;
	margin:.1rem 0 0;
	color:var(--forum-muted);
	font-size:.74rem;
}

.community-comment-form {
	display:flex;
	gap:.5rem;
	align-items:flex-end;
	padding:.7rem 1.1rem 1rem;
}

.community-comment-input {
	flex:1 1 auto;
	min-height:2.3rem;
	max-height:10rem;
	padding:.45rem .9rem;
	border:1px solid var(--forum-line);
	border-radius:20px;
	background:var(--forum-paper);
	color:var(--forum-ink);
	font:inherit;
	font-size:.93rem;
	line-height:1.35;
	resize:none;
}

.community-comment-input:focus {
	outline:none;
	border-color:var(--forum-gold);
	box-shadow:0 0 0 3px rgba(201, 162, 75, .2);
}

.community-send {
	flex:0 0 auto;
	width:2.3rem;
	height:2.3rem;
	border:0;
	border-radius:50%;
	background:var(--forum-forest);
	color:var(--forum-cream-text);
	cursor:pointer;
}

.community-send:hover,
.community-send:focus-visible {
	background:var(--forum-amber);
}

.community-send[disabled] {
	opacity:.55;
	cursor:progress;
}

.community-card:not(:has(.community-comment-form)) .community-social {
	padding-bottom:.8rem;
}

.community-empty {
	padding:2rem 0;
	text-align:center;
}

.community-more {
	display:flex;
	justify-content:center;
	margin:1.25rem 0 0;
}

.community-more[hidden] {
	display:none;
}

/* the side column */
.community-side .forum-h2:first-child {
	margin-top:0;
}

.community-panel {
	margin-bottom:1.25rem;
	padding:1rem 1.1rem;
	background:rgba(253, 250, 244, .9);
	border:1px solid var(--forum-line);
	border-radius:16px;
}

.community-panel .forum-h2 {
	margin:0 0 .5rem;
	font-size:1.1rem;
}

.community-panel p {
	margin:0 0 .6rem;
	color:var(--forum-ink-soft);
	font-size:.9rem;
}

.community-panel p:last-child,
.community-panel form:last-child {
	margin-bottom:0;
}

.community-faces {
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	grid-template-columns:repeat(4, minmax(0, 1fr));
	gap:.6rem .4rem;
}

.community-faces li {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:.25rem;
	min-width:0;
	text-align:center;
}

.community-faces span {
	max-width:100%;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	color:var(--forum-ink-soft);
	font-size:.72rem;
}

/* comments for you */
.community-notes {
	list-style:none;
	margin:0 0 .8rem;
	padding:0;
	display:grid;
	gap:.35rem;
}

.forum .community-notes a {
	display:flex;
	gap:.55rem;
	align-items:flex-start;
	padding:.45rem .5rem;
	border-radius:10px;
	color:var(--forum-ink-soft);
	font-size:.86rem;
	line-height:1.4;
	text-decoration:none;
}

.forum .community-notes a:hover,
.forum .community-notes a:focus-visible {
	background:var(--forum-cream-deep);
	color:var(--forum-ink);
}

.community-notes strong {
	color:var(--forum-ink);
}

.community-notes small {
	display:block;
	margin-top:.1rem;
	color:var(--forum-muted);
	font-size:.74rem;
}

.community-notes li.is-new a {
	background:rgba(201, 162, 75, .14);
	box-shadow:inset 3px 0 0 var(--forum-gold);
}

.community-notes-all {
	margin:.6rem 0 0 !important;
	font-size:.84rem !important;
}

/* the single-moment page */
.community-single {
	max-width:40rem;
}

/* the photo viewer */
.community-viewer {
	width:100vw;
	height:100vh;
	max-width:none;
	max-height:none;
	margin:0;
	padding:0;
	border:0;
	background:rgba(17, 22, 20, .94);
	color:#fff;
}

.community-viewer::backdrop {
	background:rgba(17, 22, 20, .6);
}

.community-viewer[open] {
	display:flex;
	align-items:center;
	justify-content:center;
}

.community-viewer img {
	max-width:calc(100vw - 7rem);
	max-height:calc(100vh - 5rem);
	object-fit:contain;
	border-radius:6px;
}

.community-viewer-close,
.community-viewer-step {
	position:absolute;
	border:0;
	background:rgba(255, 255, 255, .12);
	color:#fff;
	cursor:pointer;
}

.community-viewer-close {
	top:1rem;
	right:1rem;
	width:2.6rem;
	height:2.6rem;
	border-radius:50%;
	font-size:1.1rem;
}

.community-viewer-step {
	top:50%;
	width:2.8rem;
	height:4rem;
	margin-top:-2rem;
	border-radius:12px;
	font-size:2rem;
	line-height:1;
}

.community-viewer-step.is-prev { left:1rem; }
.community-viewer-step.is-next { right:1rem; }

.community-viewer-step[hidden] {
	display:none;
}

.community-viewer-count {
	position:absolute;
	bottom:1rem;
	left:0;
	right:0;
	margin:0;
	text-align:center;
	font-size:.85rem;
	opacity:.8;
}

/* a short note from the script: "posting is for members", "that did not go through" */
.community-toast {
	position:fixed;
	left:50%;
	bottom:1.25rem;
	z-index:1000;
	max-width:calc(100vw - 2rem);
	padding:.75rem 1.1rem;
	border-radius:14px;
	background:var(--forum-ink, #25302c);
	color:var(--forum-cream, #f7f5f1);
	font-family:var(--forum-body);
	font-size:.92rem;
	box-shadow:0 14px 34px rgba(0, 0, 0, .25);
	opacity:0;
	pointer-events:none;
	transform:translate(-50%, 1rem);
	transition:opacity .25s ease, transform .25s ease;
}

.community-toast.is-shown {
	opacity:1;
	pointer-events:auto;
	transform:translate(-50%, 0);
}

.community-toast a {
	color:var(--forum-gold, #c9a24b);
	font-weight:700;
}

@media (max-width: 991.98px) {
	.community-columns {
		grid-template-columns:minmax(0, 1fr);
	}

	.community-main {
		max-width:40rem;
		width:100%;
		margin:0 auto;
	}

	.community-side {
		max-width:40rem;
		width:100%;
		margin:0 auto;
	}
}

@media (max-width: 575.98px) {
	.community-card-head,
	.community-card-body,
	.community-social,
	.community-comment-form {
		padding-left:.85rem;
		padding-right:.85rem;
	}

	.community-photos {
		margin-left:-.85rem;
		margin-right:-.85rem;
	}

	.community-composer-hint {
		display:none;
	}

	.community-viewer img {
		max-width:100vw;
	}

	.community-viewer-step {
		top:auto;
		bottom:1rem;
		margin-top:0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.community-dot,
	.forum-live-dot,
	.community-card.is-arriving,
	.community-comment.is-arriving .community-comment-bubble,
	.community-like.is-popping i {
		animation:none;
	}

	.community-photo img,
	.forum .community-tile {
		transition:none;
	}
}