.rafinat-gift-selector {
margin: 24px 0;
padding: 18px;
border: 1px solid #e6e0d8;
border-radius: 14px;
background: #fbfaf7;
clear: both;
}
.rafinat-gift-selector h3 {
margin: 0 0 16px;
font-size: 18px;
line-height: 1.35;
font-weight: 600;
color: #1a1a1a;
}
.rafinat-gift-grid {
display: grid;
gap: 12px;
}
.rafinat-gift-columns-1 .rafinat-gift-grid {
grid-template-columns: 1fr;
}
.rafinat-gift-columns-2 .rafinat-gift-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rafinat-gift-columns-3 .rafinat-gift-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rafinat-gift-card {
position: relative;
display: flex;
gap: 16px;
align-items: center;
min-height: 146px;
padding: 14px;
border: 1px solid #ddd6cb;
border-radius: 12px;
background: #fff;
color: #111;
text-decoration: none;
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rafinat-gift-card:hover,
.rafinat-gift-card.active {
border-color: #111;
box-shadow: 0 4px 16px rgba(0,0,0,.08);
color: #111;
text-decoration: none;
}
.rafinat-gift-card:hover {
transform: translateY(-1px);
}
.rafinat-gift-card.active {
border-width: 2px;
}
.rafinat-gift-thumb {
width: 138px;
height: 138px;
flex: 0 0 138px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 10px;
}
.rafinat-gift-image {
width: 138px;
height: 138px;
object-fit: contain;
display: block;
}
.rafinat-gift-content {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
flex: 1;
}
.rafinat-gift-title {
font-weight: 700;
font-size: 16px;
line-height: 1.25;
}
.rafinat-gift-subtitle {
font-size: 13px;
line-height: 1.35;
color: #666;
}
.rafinat-gift-extra {
margin-top: 5px;
font-size: 16px;
line-height: 1.2;
font-weight: 700;
color: #111;
}
.rafinat-gift-current {
position: absolute;
top: 10px;
right: 10px;
font-size: 11px;
font-weight: 700;
color: #fff;
background: #111;
border-radius: 999px;
padding: 4px 8px;
white-space: nowrap;
} .rafinat-gift-columns-2 .rafinat-gift-card,
.rafinat-gift-columns-3 .rafinat-gift-card {
flex-direction: column;
align-items: stretch;
text-align: center;
}
.rafinat-gift-columns-2 .rafinat-gift-thumb,
.rafinat-gift-columns-3 .rafinat-gift-thumb {
width: 100%;
height: 150px;
flex: 0 0 150px;
}
.rafinat-gift-columns-2 .rafinat-gift-image,
.rafinat-gift-columns-3 .rafinat-gift-image {
width: 100%;
height: 150px;
}
.rafinat-gift-columns-3 .rafinat-gift-card {
padding: 12px;
}
.rafinat-gift-columns-3 .rafinat-gift-title {
font-size: 14px;
}
.rafinat-gift-columns-3 .rafinat-gift-subtitle {
font-size: 12px;
}
.rafinat-gift-columns-3 .rafinat-gift-extra {
font-size: 14px;
}
@media (max-width: 900px) {
.rafinat-gift-columns-2 .rafinat-gift-grid,
.rafinat-gift-columns-3 .rafinat-gift-grid {
grid-template-columns: 1fr;
}
.rafinat-gift-columns-2 .rafinat-gift-card,
.rafinat-gift-columns-3 .rafinat-gift-card {
flex-direction: row;
text-align: left;
align-items: center;
}
.rafinat-gift-columns-2 .rafinat-gift-thumb,
.rafinat-gift-columns-2 .rafinat-gift-image,
.rafinat-gift-columns-3 .rafinat-gift-thumb,
.rafinat-gift-columns-3 .rafinat-gift-image {
width: 112px;
height: 112px;
flex-basis: 112px;
}
}
@media (max-width: 480px) {
.rafinat-gift-card,
.rafinat-gift-columns-2 .rafinat-gift-card,
.rafinat-gift-columns-3 .rafinat-gift-card {
min-height: 118px;
padding: 10px;
gap: 10px;
}
.rafinat-gift-thumb,
.rafinat-gift-image,
.rafinat-gift-columns-2 .rafinat-gift-thumb,
.rafinat-gift-columns-2 .rafinat-gift-image,
.rafinat-gift-columns-3 .rafinat-gift-thumb,
.rafinat-gift-columns-3 .rafinat-gift-image {
width: 96px;
height: 96px;
flex-basis: 96px;
}
.rafinat-gift-title {
font-size: 14px;
}
.rafinat-gift-subtitle {
font-size: 12px;
}
.rafinat-gift-extra {
font-size: 14px;
}
}