.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 {
    max-width: 1400px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    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; }
}