/* ==========================================================================
   CARD3 THEMES LIBRARY (background + borders only)
   - NON tocca layout, padding, contenuti, ecc.
   - Usa: <div class="card3 card3_premium_rose">...</div>
   - Base: card3 = tua classe esistente
   - Temi: classi che iniziano con card3_
   ========================================================================== */


/* ====== BASE (lascia la tua card3 com’è già) ====== */
/* .card3 { ... }  <-- NON la riscrivo qui apposta */

/* ========================================================================
   MACRO AREA 0: BASIC
   ======================================================================== */
.card3_lavender{
  width: 100%;
  height: fit-content;
  background-color: #f3ecff; /* lavanda pastello */
  border: var(--card-border-w) solid #b89be6; /* viola chiaro coerente */
  border-radius: var(--card-radius);
  text-align: center;
}

.card3_mint{
  width: 100%;
  height: fit-content;
  background-color: #edf7f1; /* verde salvia chiaro */
  border: var(--card-border-w) solid #9cc9b3; /* bordo verde soft */
  border-radius: var(--card-radius);
  text-align: center;
}




/* ========================================================================
   MACRO AREA 1: PREMIUM / LUXURY
   ======================================================================== */

/* 1) Premium Rosé (elegante, moderno, “boutique”) */
.card3_premium_rose{
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,0.65), transparent 42%),
    linear-gradient(135deg, #fdd5ec 0%, #f8c4e2 45%, #f2b6da 100%);
  border: 1.5px solid rgba(155, 119, 196, 0.35);
  border-radius: var(--card-radius);
  box-shadow:
    0 15px 40px rgba(114, 46, 111, 0.18),
    0 2px 8px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}
.card3_premium_rose::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,185,245,0.7), rgba(255,255,255,0.9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* 2) Premium “Pearl” (perla, pulito, super curato) */
.card3_premium_pearl{
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.92), transparent 45%),
    radial-gradient(circle at 82% 26%, rgba(230,245,220,0.55), transparent 55%),
    linear-gradient(145deg,
      #f7fbf4 0%,
      #e9f4e3 35%,
      #d8e8cf 70%,
      #c7dcc0 100%
    );

  border: 1.5px solid rgba(140,175,120,0.40);
  border-radius: var(--card-radius);

  box-shadow:
    0 20px 60px rgba(90,130,80,0.18),
    0 2px 0 rgba(255,255,255,0.85) inset,
    0 0 28px rgba(210,235,200,0.45);

  position: relative;
  overflow: hidden;
}


/* cornice madreperla verde caldo */
.card3_premium_pearl::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1.4px;

  background: linear-gradient(135deg,
    rgba(255,255,255,0.95),
    rgba(220,235,210,0.80),
    rgba(165,195,145,0.60),
    rgba(255,255,255,0.95)
  );

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events:none;
}


/* riflesso madreperla verde */
.card3_premium_pearl::after{
  content:"";
  position:absolute;
  inset:-35%;

  background: linear-gradient(120deg,
    transparent 20%,
    rgba(255,255,255,0.50) 40%,
    rgba(220,240,210,0.30) 50%,
    rgba(255,255,255,0.15) 60%,
    transparent 80%
  );

  transform: rotate(18deg);
  pointer-events:none;
  opacity:.65;
}


/* 3) Premium “Velvet” (scuro chic, contrasto alto, luxury) */
.card3_premium_velvet{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.12), transparent 45%),
    linear-gradient(135deg, #3b1236 0%, #5a1b52 45%, #722e6f 100%);
  border: 1px solid rgba(248,185,245,0.28);
  border-radius: var(--card-radius);
  box-shadow:
    0 20px 55px rgba(0,0,0,0.35),
    0 1px 0 rgba(255,255,255,0.08) inset;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.card3_premium_velvet::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.08) 30%, transparent 60%);
  transform: translateX(-35%);
  pointer-events:none;
  color: #fff;
}

.card3_premium_velvet .button2{
  color: #fff;
}

.card3_premium_velvet .table {
  color: #fff;
}

.card3_premium_velvet  .pro {
  color: #fff;
}
.card3_premium_velvet .pro-attivo {
  color: #000;
}

/* 4) Premium “Champagne” (lusso chiaro: satin + micro shimmer) */
.card3_premium_champagne{
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.90), transparent 46%),
    radial-gradient(circle at 82% 22%, rgba(255,248,230,0.65), transparent 55%),
    linear-gradient(135deg, #fffaf2 0%, #f8e7cf 45%, #ecd2a9 100%);
    
  border: 3px solid rgba(166,124,64,0.35); /* oro soft */
  border-radius: var(--card-radius);

  box-shadow:
    0 22px 60px rgba(166,124,64,0.18),   /* profondità oro */
    0 2px 0 rgba(255,255,255,0.85) inset,
    0 0 28px rgba(220,190,140,0.35);     /* glow champagne */

  position: relative;
  overflow: hidden;
}


/* cornice gioiello champagne/oro */
.card3_premium_champagne::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1.6px;

  background: linear-gradient(135deg,
    rgba(255,255,255,0.98),
    rgba(255,228,178,0.85),
    rgba(205,164,94,0.65),
    rgba(255,255,255,0.95)
  );

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events:none;
}


/* shimmer oro caldo, più elegante */
.card3_premium_champagne::after{
  content:"";
  position:absolute;
  inset:-60%;

  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255,255,255,0.55) 45%,
    rgba(255,240,210,0.35) 50%,
    rgba(255,255,255,0.15) 55%,
    transparent 65%
  );

  transform: rotate(12deg) translateX(-120%);
  animation: ch_premium_shimmer 10s linear infinite;

  pointer-events:none;
  opacity: .75;
}

@keyframes ch_premium_shimmer{
  from {
    transform: rotate(12deg) translateX(-120%);
  }
  to {
    transform: rotate(12deg) translateX(120%);
  }
}




/* 5) Premium “Onyx” (luxury scuro: deep + highlight “metallico”) */
.card3_premium_onyx{
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,0.10), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(248,185,245,0.10), transparent 55%),
    linear-gradient(135deg, #150914 0%, #2a1027 45%, #3f1a3a 100%);
  border: 1px solid rgba(248,185,245,0.22);
  border-radius: var(--card-radius);
  box-shadow:
    0 26px 70px rgba(0,0,0,0.48),
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 0 22px rgba(184,107,189,0.18);
  position: relative;
  overflow: hidden;
  color: #fff;
}

/* bordo “metallic glow” (cornice luxury) */
.card3_premium_onyx::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:1.6px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.10),
    rgba(248,185,245,0.35),
    rgba(114,46,111,0.85),
    rgba(255,255,255,0.08)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* highlight diagonale “finitura” (tipo seta/metal) */
.card3_premium_onyx::after{
  content:"";
  position:absolute;
  inset:-50%;

  background: linear-gradient(120deg,
    transparent 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.05) 50%,
    rgba(255,255,255,0.02) 60%,
    transparent 75%
  );

  transform: translateX(-120%);
  animation: onyx_sheen 7s linear infinite;

  pointer-events:none;
  opacity:.9;
}

@keyframes onyx_sheen{
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(120%);
  }
}


.card3_premium_onyx .button2{
  color: #fff;
}

.card3_premium_onyx .table {
  color: #fff;
}

.card3_premium_onyx  .pro {
  color: #fff;
}
.card3_premium_onyx .pro-attivo {
  color: #000;
}

/* ========================================================================
   MACRO AREA 2: CUTE / HANDMADE (Etsy vibes)
   ======================================================================== */

/* 4) Cute Handmade (carta rosa, morbida, accogliente) */
.card3_cute_handmade{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,0.85), transparent 38%),
    linear-gradient(180deg, #fff4fb 0%, #ffeaf6 100%);
  border: 2px solid #f6b6e8;
  border-radius: 28px;
  box-shadow:
    0 10px 25px rgba(255,153,214,0.25),
    0 4px 8px rgba(114,46,111,0.08);
  position: relative;
  overflow: hidden;
}
.card3_cute_handmade::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background-image: radial-gradient(rgba(255,255,255,0.45) 1px, transparent 1px);
  background-size: 12px 12px;
  opacity:0.14;
  pointer-events:none;
}

/* 5) Cute “Candy” (più pop, brillante, giovane) */
.card3_cute_candy{
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.95), transparent 40%),
    linear-gradient(135deg, #ffd1ea 0%, #ffc1e2 35%, #ffb2d8 100%);
  border: 2px solid rgba(114,46,111,0.18);
  border-radius: 26px;
  box-shadow:
    0 14px 34px rgba(255,102,204,0.22),
    0 2px 0 rgba(255,255,255,0.7) inset;
  position: relative;
  overflow: hidden;
}
.card3_cute_candy::before{
  content:"";
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 60%);
  transform: rotate(-12deg);
  pointer-events:none;
}

/* 6) Cute “Stitched” (effetto cucitura sul bordo) */
.card3_cute_stitched{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.85), transparent 42%),
    linear-gradient(180deg, #fff0fa 0%, #ffe3f5 100%);
  border: 2px solid #f0aee0;
  border-radius: 26px;
  box-shadow:
    0 12px 28px rgba(114,46,111,0.14);
  position: relative;
  overflow: hidden;
}
.card3_cute_stitched::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: calc(26px - 10px);
  border: 2px dashed rgba(114,46,111,0.18);
  pointer-events:none;
}

/* 7) Cute “Mint Cloud” (menta + crema, super fresco e dolce) */
.card3_cute_mint_cloud{
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,0.90), transparent 42%),
    linear-gradient(180deg, #f4fffb 0%, #e9fff7 45%, #dff7f0 100%);
  border: 2px solid rgba(97, 184, 162, 0.35);
  border-radius: 28px;
  box-shadow:
    0 12px 28px rgba(97, 184, 162, 0.18),
    0 4px 10px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}

/* pattern “confetti” leggero */
.card3_cute_mint_cloud::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background-image:
    radial-gradient(rgba(255,255,255,0.55) 1px, transparent 1px),
    radial-gradient(rgba(97,184,162,0.16) 1px, transparent 1px);
  background-size: 14px 14px, 18px 18px;
  background-position: 0 0, 6px 8px;
  opacity: .18;
}



/* Cute “Sunny Lemon Pro” – più luce, più profondità, più premium */
.card3_cute_sky_lemon{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.85), transparent 45%),
    linear-gradient(135deg, #fffce9 0%, #fff6c9 40%, #ffe0a8 75%, #ffc58f 100%);

  background-size: 100% 100%, 200% 200%;
  background-position: center, 0% 0%;
  animation: lemonDrift 12s ease-in-out infinite;

  border: 2px solid rgba(255,176,92,0.35);
  border-radius: 26px;

  box-shadow:
    0 18px 40px rgba(255,176,92,0.25),
    0 10px 25px rgba(255,205,120,0.22);

  position: relative;
  overflow: hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}


/* Micro texture morbida (effetto carta, non vetro) */
.card3_cute_sky_lemon::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background-image:
    radial-gradient(rgba(255,170,90,0.12) 1px, transparent 1px);
  background-size: 16px 16px;

  opacity: 0.08;
}

/* Hover elegante ma non glossy */
.card3_cute_sky_lemon:hover{
  transform: translateY(-3px);
  box-shadow:
    0 24px 55px rgba(255,176,92,0.35),
    0 14px 30px rgba(255,205,120,0.30);
}

@keyframes lemonDrift{
  0%{
    background-position: center, 0% 0%;
  }
  50%{
    background-position: center, 100% 100%;
  }
  100%{
    background-position: center, 0% 0%;
  }
}




/* ========================================================================
   MACRO AREA 3: MINIMAL / CLEAN (moderno, “shop serio”)
   ======================================================================== */

/* 7) Minimal Soft (pulito, quasi bianco, leggero) */
.card3_minimal_soft{
  background: linear-gradient(180deg, #fff9fd 0%, #fff1fa 100%);
  border: 1px solid rgba(114,46,111,0.15);
  border-radius: var(--card-radius);
  box-shadow:
    0 10px 26px rgba(0,0,0,0.06);
  position: relative;
}

/* 8) Minimal Outline (molto “UI product”, bordo definito) */
.card3_minimal_outline{
  background: #fff2fa;
  border: 5px solid rgba(114,46,111,0.30);
  border-radius: var(--card-radius);
  box-shadow:
    0 8px 18px rgba(114,46,111,0.10);
  position: relative;
}

/* 9) Minimal Sand (warm paper / “wood” vibe, asciutta, zero glass) */
.card3_minimal_sand{
  background: linear-gradient(180deg, 
    #f8f2e7 0%, 
    #efe4d3 100%
  );

  border: 5px solid rgba(150,120,85,0.18);
  border-radius: var(--card-radius);

  box-shadow: 
    0 12px 28px rgba(90,70,45,0.08);

  position: relative;
  overflow: hidden;
}


/* micro grain sabbia più realistico */
.card3_minimal_sand::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background-image: radial-gradient(
    rgba(120,95,65,0.15) 0.6px,
    transparent 0.6px
  );

  background-size: 16px 16px;
  opacity: 0.06;
}



/* 10) Minimal Sage (pastello salvia + bordo più “UI”, diverso dal tuo outline) */
.card3_minimal_sage{
  background: linear-gradient(180deg, #f5fbf7 0%, #eef7f2 100%);
  border: 2px solid rgba(75,120,100,0.28);   /* bordo freddo/salvia */
  border-radius: var(--card-radius);
  box-shadow: 0 8px 18px rgba(0,0,0,0.045);
  position: relative;
}
/* doppio bordo interno super sottile (dà “cura” senza glass) */
.card3_minimal_sage::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: calc(var(--card-radius) - 10px);
  border: 1px solid rgba(114,46,111,0.08);
  pointer-events:none;
}


/* 11) Minimal Peach Lines (pastello pesca + righe sottili, NON dots) */
.card3_minimal_peach_lines{
  background:
    linear-gradient(180deg, 
      #fff4e9 0%, 
      #ffe3d1 100%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(195,120,60,0.08) 0px,
      rgba(195,120,60,0.08) 1px,
      transparent 1px,
      transparent 14px
    );

  border: 5px solid rgba(195,120,60,0.22);
  border-radius: var(--card-radius);

  box-shadow: 0 11px 26px rgba(170,105,55,0.10);

  position: relative;
}


/* ========================================================================
   MINIMAL PREMIUM (upgrade “pro”, pulita ma high-end)
   - look da tema a pagamento: bordi doppi, depth elegante, top accent
   - zero glass, zero glitter: minimal, ma “premium”
   ======================================================================== */
.card3_minimal_premium{
  background: linear-gradient(180deg, #fff9ff 0%, #fff2fb 100%);
  border-radius: calc(var(--card-radius) + 4px);
  border: 1.5px solid rgba(114,46,111,0.22);

  box-shadow:
    0 20px 55px rgba(114,46,111,0.16),
    0 0 28px rgba(184,107,189,0.35),
    0 0 60px rgba(184,107,189,0.18);

  position: relative;
  overflow: hidden;
}

/* bordo animato */
.card3_minimal_premium::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding:3px;

  background: linear-gradient(
    130deg,
    #722e6f 0%,
    #f8b9f5 20%,
    #ffffff 40%,
    #b86bbd 60%,
    #722e6f 100%
  );

  background-size: 300% 300%;
  animation: premiumBorderFlow 7s linear infinite;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  pointer-events:none;
}

@keyframes premiumBorderFlow{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}

.card3_minimal_premium:hover{
  transform: translateY(-2px);
  box-shadow:
    0 28px 70px rgba(114,46,111,0.22),
    0 0 26px rgba(184,107,189,0.28);
  transition: all .4s ease;
}


/* ========================================================================
   MACRO AREA 4: ART / GRADIENT / CREATIVE (wow, brand identity forte)
   ======================================================================== */

/* 9) Creative Aurora (gradient “aurora” rosa/viola) */
.card3_creative_aurora{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.55), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(248,185,245,0.35), transparent 50%),
    linear-gradient(135deg, #ffd0ea 0%, #d9b3ff 55%, #b08cff 100%);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: var(--card-radius);
  box-shadow:
    0 18px 45px rgba(114,46,111,0.16);
  position: relative;
  overflow: hidden;
}
.card3_creative_aurora::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.10) 35%, transparent 65%);
  transform: translateX(-35%);
  pointer-events:none;
}

/* 10) Creative “Glass” (vetro satinato su rosa) */
.card3_creative_glass{
  background:
    linear-gradient(135deg, rgba(255,220,242,0.85) 0%, rgba(255,236,248,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--card-radius);
  box-shadow:
    0 16px 40px rgba(114,46,111,0.14);
  position: relative;
  overflow: hidden;
}
.card3_creative_glass::after{
  content:"";
  position:absolute;
  inset:0;

  pointer-events:none;
}

.card3_creative_sunset_fusion{
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,0.45), transparent 40%),
    linear-gradient(135deg,
      #ff9a9e 0%,
      #fad0c4 25%,
      #fbc2eb 55%,
      #a18cd1 100%
    );

  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: var(--card-radius);

  box-shadow:
    0 22px 55px rgba(161,140,209,0.25),
    0 10px 28px rgba(255,154,158,0.25);

  position: relative;
  overflow: hidden;
}

.card3_creative_sunset_fusion::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.12) 40%,
    transparent 70%
  );
}

.card3_creative_ocean_pop{
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.45), transparent 45%),
    linear-gradient(135deg,
      #43e97b 0%,
      #38f9d7 35%,
      #4facfe 65%,
      #7b61ff 100%
    );

  border: 1.5px solid rgba(255,255,255,0.30);
  border-radius: var(--card-radius);
  box-shadow:
    0 22px 60px rgba(79,172,254,0.30),
    0 12px 30px rgba(123,97,255,0.25);

  position: relative;
  overflow: hidden;
}

.card3_creative_ocean_pop::before{
  content:"";
  position:absolute;
  inset:-40%;
  border-radius: inherit;
  pointer-events:none;

  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
}

.card3_creative_neon_blend{
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.35), transparent 45%),
    linear-gradient(135deg,
      #ff6a00 0%,
      #ff2d55 30%,
      #b721ff 65%,
      #21d4fd 100%
    );

  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: var(--card-radius);

  box-shadow:
    0 25px 65px rgba(183,33,255,0.30),
    0 14px 35px rgba(255,45,85,0.28);

  position: relative;
  overflow: hidden;
}

.card3_creative_neon_blend::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,0.10) 45%,
    transparent 80%
  );
}

.reviews-wrap{
  width: 100%;
  max-width: 100%;
  padding: 0 4% 1rem;
  margin: 0;
  box-sizing: border-box;
  text-align: left;       /* override del center della card3 */
}

/* card bianca recensione */
.review-box{
  width: 100%;
  max-width: 100%;
  margin: 0.75rem auto;
  box-sizing: border-box;

  background: #fff;
  border: 0.0625rem solid rgba(0,0,0,.10); /* 1px → rem */
  border-radius: 0.875rem;                /* 14px → rem */
  padding: 1.125rem;                      /* 18px → rem */

  box-shadow: 0 0.625rem 1.375rem rgba(0,0,0,.08); /* rem */
}

/* header */
.review-header{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 0.75rem;   /* 12px → rem */
}

/* stelle + data */
.review-left{
  display: flex;
  align-items: center;
  gap: 0.625rem;         /* 10px → rem */
  flex-wrap: wrap;
  min-width: 0;
}

/* titolo centrato */
.review-title-center{
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;    /* già ok */
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* corpo recensione */
.review-body{
  margin-top: 0.625rem;  /* 10px → rem */
  text-align: left;
}

.review-user{
  font-weight: 800;
  margin-bottom: 0.375rem; /* 6px → rem */
  text-align: left;
}

.review-content{
  text-align: left;
  color: rgba(0,0,0,.80);
  white-space: pre-wrap;
}

.review-images{
  margin-top: 0.75rem;
}

.review-images-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.5rem;
}

.review-thumb-btn{
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0.75rem;
  overflow: hidden;
  cursor: pointer;
}

.review-thumb{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.12s ease;
}

.review-thumb-btn:hover .review-thumb{
  transform: scale(1.03);
}