.rating-btn{
	position:absolute;
	top:10px;
	color:#241A17;
	right:10px;
	background-color:#E8D6A8;
	border-radius:50%;
	height:40px;
	width:40px;
	display:flex;
	align-items: center;
	justify-content: center;
	border:2px solid #B4842A;
	font-weight: bold;
}
.clothing-holder {
	  display: flex;
	  flex-wrap:wrap;
	  gap: 10px; /* optional spacing between items */
	  justify-content: center;
}

.clothing-card{
	widht:250px;
	height:380px;
	border:1px solid #A91D2B;
	color:#000;
	border-radius:4px;
}

.clothing-card-brand{
	font-size:1.2em;
	font-weight:bold;

}
.clothing-card-name{
	font-style:italic;
}


.chat-clothing-card{
width:200px;
margin-left:0.5em;
margin-right:0.5em;
}
.chat-landing-card{
width:160px;
margin-left:0.5em;
margin-right:0.5em;
}

.clothing-show-grid {
	width: 80%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"image green"
		"grey grey";
	column-gap: 10px;
	row-gap: 1rem;
	align-items: stretch;
}

.clothing-show-grid .cs-image {
	grid-area: image;
	height: 550px;
	width: 100%;
	object-fit: cover;
}
.clothing-show-grid .cs-green { grid-area: green; height: 550px; overflow-y: auto; }
.clothing-show-grid .cs-grey { grid-area: grey; }

.rating-group {
	display: flex;
	flex-direction: column;
}
.rating-row {
	display: flex;
	align-items: center;
	gap: 0.75em;
	margin: 0;
}
.rating-label {
	width: 80px;
	font-weight: bold;
	flex-shrink: 0;
}
.rating-bar {
	flex: 1;
	height: 14px;
	background-color: #eee;
	overflow: hidden;
	transform: skewX(-20deg);
}
.rating-bar-fill {
	height: 100%;
	background-color: #cdabfe;
}
.rating-score {
	width: 45px;
	text-align: right;
	flex-shrink: 0;
}

@media (max-width: 768px) {
	.clothing-show-grid {
		width: 100%;
		grid-template-columns: 1fr;
		grid-template-areas:
			"image"
			"grey"
			"green";
	}

	.clothing-show-grid .cs-green { height: auto; }
	.clothing-show-grid .cs-image { height: 400px; }
}

.columns.index-hero {
	margin-top: 0rem;
	margin-bottom:0rem;
}

.rank-panel {
	padding: 1.25rem 1.5rem;
}

.rank-title {
	margin: 0 0 0.75rem;
	font-size: 1.1em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #FBF7F0;
	border-bottom: 2px solid rgba(251, 247, 240, 0.35);
	padding-bottom: 0.5rem;
}

.rank-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rank-item {
	border-bottom: 1px solid rgba(251, 247, 240, 0.2);
}

.rank-item:last-child {
	border-bottom: none;
}

.rank-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.6rem 0.25rem;
	color: #FBF7F0;
	text-decoration: none;
	transition: padding-left 0.2s ease, color 0.2s ease;
}

.rank-link:hover,
.rank-link:focus {
	padding-left: 0.5rem;
	color: #E8D6A8;
}

.rank-index {
	flex-shrink: 0;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #E8D6A8;
	color: #241A17;
	font-weight: bold;
	font-size: 0.85em;
}

.rank-name {
	flex: 1;
	font-weight: 600;
}

.rank-preview {
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translate(0, -50%) scale(0.85);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 5;
}

.rank-link:hover .rank-preview,
.rank-link:focus .rank-preview {
	opacity: 1;
	transform: translate(0, -50%) scale(1);
}

.rank-preview-img {
	display: block;
	width: 110px;
	height: 110px;
	object-fit: cover;
	border-radius: 6px;
	border: 2px solid #E8D6A8;
	background-color: #fff;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

/* Golden-ratio (fibonacci spiral) layout: reuse for future views.
   Areas map to squares in the spiral - "image" is the yellow square,
   "grey" is the red rectangle, "green" is the blue square. */
.golden-ratio-grid {
	width: 80%;
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1.618fr;
	grid-template-rows: 1.618fr 1fr;
	grid-template-areas:
		"image green"
		"grey green";
	column-gap: 10px;
	row-gap: 10px;
	aspect-ratio: 1.618 / 1;
	align-items: stretch;
}

.golden-ratio-grid .gr-image {
	grid-area: image;
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.golden-ratio-grid .gr-green { grid-area: green; height: 100%; overflow-y: auto; }
.golden-ratio-grid .gr-grey { grid-area: grey; height: 100%; overflow-y: auto; }

@media (max-width: 768px) {
	.golden-ratio-grid {
		width: 100%;
		aspect-ratio: auto;
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas:
			"image"
			"grey"
			"green";
	}

	.golden-ratio-grid .gr-green { height: auto; }
	.golden-ratio-grid .gr-grey { height: auto; }
	.golden-ratio-grid .gr-image { height: 400px; }
}

.gallery-main {
	position: relative;
}

.gallery-image {
	width: 100%;
}

.gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(36, 26, 23, 0.55);
	color: #FBF7F0;
	border: none;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gallery-arrow:hover {
	background: #A91D2B;
}

.gallery-arrow.prev { left: 10px; }
.gallery-arrow.next { right: 10px; }

.gallery-thumbs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.gallery-thumb {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 4px;
	cursor: pointer;
	border: 2px solid transparent;
	opacity: 0.7;
}

.gallery-thumb:hover {
	opacity: 1;
}

.gallery-thumb.is-active {
	border-color: #A91D2B;
	opacity: 1;
}

.stat-card-label {
	font-size: 0.75em;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #E8D6A8;
	margin-bottom: 6px;
}

.stat-card-value {
	font-size: 1.4em;
	font-weight: bold;
	color: #FBF7F0;
}

.stat-card-value small {
	font-size: 0.6em;
	font-weight: normal;
	color: #E8D6A8;
}

.stat-card-sub {
	font-size: 0.85em;
	color: #E8D6A8;
	margin-top: 4px;
}


.stat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	align-content: center;
	height: 100%;
}

.graphic-info {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.graphic-info-fill {
	flex-grow: 1;
	margin-top: 1rem;
}

.graphic-info .tag {
	border: 1px solid #A91D2B;
	color: #000;
	background-color: #FBF7F0;
}