/* Front styles for gifts box – compact, responsive */
.rf-fg-box{border:1px solid #eee; border-radius:16px; padding:16px; margin:16px 0; box-shadow:0 6px 18px rgba(0,0,0,.06); background:#fff;}
.rf-fg-box h3{margin:0 0 12px; font-size:1.1rem;}

.rf-fg-progress{height:8px; background:#f4f4f5; border-radius:999px; overflow:hidden; margin:8px 0 6px;}
.rf-fg-progress-bar{height:100%; width:0%; background:#e91e63;}
.rf-fg-hint{margin:6px 0 12px; font-size:.95rem; color:#333;}
.rf-fg-limit{color:#a00; font-weight:600; margin-top:6px;}
.rf-fg-empty{margin:6px 0;}

/* Grid */
.rf-fg-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px;}
@media (max-width: 1024px){ .rf-fg-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px; } }
@media (max-width: 820px){  .rf-fg-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; } }
@media (max-width: 520px){  .rf-fg-grid{ grid-template-columns: 1fr; gap:10px; } }

/* Card */
.rf-fg-item{display:flex; flex-direction:column; gap:8px; border:1px solid #eee; border-radius:14px; padding:10px; background:#fff; transition:transform .16s ease, box-shadow .16s ease;}
.rf-fg-item:hover{ transform: translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.06); }

/* Thumb */
.rf-fg-thumb{ display:block; border-radius:10px; overflow:hidden; }
.rf-fg-thumb img{ display:block; width:100%; height:auto; aspect-ratio: 1/1; object-fit: cover; border-radius:10px; }

/* Info */
.rf-fg-info{ display:flex; flex-direction:column; gap:6px; }
.rf-fg-title{
  font-weight:600; font-size:.98rem; line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.4em;
}

/* Price line */
.rf-fg-price{ display:flex; align-items:center; gap:6px; font-size:.95rem; }
.rf-fg-old del{ opacity:.75; }
.rf-fg-free{
  font-size:.78rem; font-weight:800; padding:4px 8px; border-radius:999px;
  background:#e91e63; color:#fff; line-height:1;
}

/* Button */
.rf-fg-add.button{
  width:100%; text-align:center; border-radius:999px; padding:10px 12px; font-weight:700; font-size:.98rem;
}
.rf-fg-add.button[disabled]{ opacity:.6; pointer-events:none; }

/* Tablet & mobile tweaks */
@media (max-width: 1024px){
  .rf-fg-title{ font-size:.95rem; }
  .rf-fg-price{ font-size:.9rem; }
  .rf-fg-add.button{ padding:9px 10px; font-size:.94rem; }
}
@media (max-width: 820px){
  .rf-fg-title{ font-size:.92rem; }
  .rf-fg-add.button{ padding:8px 10px; font-size:.9rem; }
}
@media (max-width: 520px){
  .rf-fg-title{ font-size:.9rem; }
  .rf-fg-add.button{ padding:8px 10px; font-size:.88rem; }
}