/* Tarjeta de producto recomendado en Club Mamá. */

.lockup h1.script{ margin:0; }
.lockup .club-mark{
  width:168px;
  height:168px;
  display:block;
  flex-shrink:0;
  margin-right:-28px;
  clip-path:circle(29% at 50% 49%);
}

.shelf{ margin-bottom:34px; }
.shelf-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.shelf-head h3{
  font-family:'Source Serif 4', serif;
  font-weight:700;
  font-size:1.45rem;
  margin:0;
  color:var(--ink);
}
.shelf-nav{ display:flex; gap:8px; flex:none; }
.shelf-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1.5px solid var(--pink);
  background:linear-gradient(180deg, var(--white), var(--pink-tint));
  color:var(--pink-deep);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.shelf-btn:disabled{ opacity:0.35; cursor:default; }
.shelf-btn::before{
  content:"";
  width:8px;
  height:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
}
.shelf-btn.prev::before{ transform:rotate(-135deg); margin-left:3px; }
.shelf-btn.next::before{ transform:rotate(45deg); margin-right:3px; }
.carousel{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:4px 2px 12px;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{ display:none; }
.carousel .ticket{
  flex:0 0 min(320px, 84%);
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  min-height:240px;
}
.carousel .ticket p{ flex:1; }
.carousel .ticket .go{ margin-top:auto; }
@media (prefers-reduced-motion: reduce){
  .carousel{ scroll-behavior:auto; }
}

.recommend{
  display:flex;
  flex-direction:column;
  height:100%;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 40px rgba(58,44,53,0.06);
}
.recommend img{
  width:100%;
  height:200px;
  object-fit:contain;
  background:var(--pink-tint);
  display:block;
  flex:none;
}
.recommend .body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:18px 20px 20px;
  min-width:0;
}
.recommend h3{
  font-family:'Source Serif 4', serif;
  font-size:1.28rem;
  margin:0 0 8px;
  color:var(--ink);
}
.recommend p{
  margin:0;
  color:var(--gray);
}
.recommend ul{
  list-style:none;
  margin:16px 0 0;
  padding:0;
}
.recommend li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:7px 0;
  color:var(--gray);
}
.recommend .mark{
  color:var(--pink-ink);
  font-weight:700;
}
.recommend .actions{
  margin-top:auto;
  padding-top:16px;
}
.recommend .actions .btn{ margin-top:0; }
.recommend-stack{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}
.recommend .caution{
  margin-top:14px;
  font-size:0.92rem;
}
@media (max-width: 900px){
  .recommend-stack{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .recommend-stack{ grid-template-columns:1fr; }
}