/* ARSI v19.7.117 — canonical public item card component.
   One visual source for home, search, favorites, related and suggested items. */
.arsi-item-card,
.arsi-item-card *{box-sizing:border-box}

.arsi-item-card{
  position:relative;
  width:100%;
  min-width:0;
  min-height:116px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  align-items:center;
  gap:8px;
  padding:10px;
  overflow:hidden;
  color:var(--dark);
  background:radial-gradient(circle at 100% 0%,rgba(202,20,71,.09),transparent 38%),linear-gradient(135deg,var(--soft),var(--surface));
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:0 10px 26px var(--shadow),inset 0 1px 0 rgba(255,255,255,.5);
  cursor:pointer;
  user-select:none;
  contain:none;
  content-visibility:visible;
  will-change:auto;
  transform:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.arsi-item-card::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:16px;
  bottom:16px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--brand),var(--brand2));
}
.arsi-item-card:hover{
  border-color:rgba(202,20,71,.35);
  box-shadow:0 14px 32px rgba(202,20,71,.16),inset 0 1px 0 rgba(255,255,255,.55);
}
.arsi-item-card:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(202,20,71,.12),0 14px 32px rgba(202,20,71,.16);
}

.arsi-card-link{
  min-width:0;
  width:100%;
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  align-items:center;
  gap:10px;
  color:inherit;
  text-decoration:none;
  border-radius:inherit;
}
.arsi-card-link:focus-visible{outline:3px solid rgba(202,20,71,.32);outline-offset:2px}

.arsi-card-image{
  position:relative;
  width:96px;
  height:96px;
  min-width:96px;
  border-radius:16px;
  overflow:hidden;
  background-color:#f8dce5;
  background-image:url("logo.svg?v=19.7.117");
  background-repeat:no-repeat;
  background-position:center;
  background-size:40px 40px;
  box-shadow:0 7px 18px rgba(70,20,36,.15);
}
.arsi-card-image::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.07),transparent 48%,rgba(0,0,0,.18));
  pointer-events:none;
}
.arsi-card-image img,
.arsi-card-image picture,
.arsi-card-image picture img{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio:1/1;
  background:transparent;
}

.arsi-featured-badge{
  position:absolute;
  left:7px;
  bottom:7px;
  z-index:3;
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  font-size:11px;
  font-weight:900;
  box-shadow:0 6px 15px rgba(202,20,71,.34);
}

.arsi-card-content{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  padding-block:2px;
  transform:none;
}
.arsi-title-row,.arsi-price-row,.arsi-meta-row{min-width:0;display:flex;align-items:center}
.arsi-title-row{gap:7px}
.arsi-price-row{gap:6px;flex-wrap:wrap}
.arsi-meta-row{gap:6px 8px;flex-wrap:wrap;color:var(--muted);font-size:11px;font-weight:800;line-height:1.35;overflow:visible}

.arsi-verified{
  width:19px;
  height:19px;
  flex:0 0 19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  font-size:10px;
  box-shadow:0 4px 10px rgba(202,20,71,.28);
}
.arsi-card-title{
  margin:0;
  overflow-wrap:anywhere;
  word-break:normal;
  min-width:0;
  color:var(--dark);
  font-size:16px;
  font-weight:900;
  line-height:1.35;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  white-space:normal;
}

.arsi-price-chip{
  min-width:0;
  max-width:100%;
  white-space:nowrap;
  height:23px;
  padding:0 7px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 4px 10px rgba(0,0,0,.07);
}
.arsi-price-chip i{font-size:9px}
.arsi-season{background:linear-gradient(135deg,var(--green1),var(--green2))}
.arsi-off-season{background:linear-gradient(135deg,var(--red1),var(--red2))}

.arsi-meta-item{min-width:0;display:inline-flex;align-items:center;gap:4px;max-width:100%}
.arsi-meta-item i{color:var(--pink);font-size:11px}
.arsi-meta-item>span{min-width:0;max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arsi-area-item,.arsi-attribute-item{flex:0 1 auto}
.arsi-separator{width:1px;height:12px;flex:0 0 1px;background:var(--border)}
.arsi-card-stats{display:inline-flex;align-items:center;gap:4px;margin-inline-start:0;font-size:9.5px;flex:0 0 auto}
.arsi-card-stats span{height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:3px;border:1px solid rgba(202,20,71,.12);border-radius:999px;background:var(--stat-bg);color:var(--stat-text);font-weight:900}
.arsi-card-stats i{font-size:9px}
.arsi-card-stats b{font:inherit;font-weight:inherit}

.arsi-favorite-btn{
  position:relative;
  z-index:4;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  flex:0 0 44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  border:1px solid rgba(202,20,71,.26);
  border-radius:50%;
  background:var(--surface);
  color:var(--brand);
  font-size:15px;
  cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.arsi-favorite-btn:hover{background:rgba(202,20,71,.12)}
.arsi-favorite-btn.is-active{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-color:transparent;box-shadow:0 6px 15px rgba(202,20,71,.25)}
.arsi-favorite-btn:focus-visible{outline:3px solid rgba(202,20,71,.22);outline-offset:2px}


/* Popup variant: same component and data, but a layout made for constrained modal/sheet widths.
   No entry transform/compositing is used inside scrollable overlays. */
.arsi-item-card.arsi-card-popup{
  display:block;
  min-height:104px;
  padding:8px;
}
.arsi-card-popup .arsi-card-link{
  grid-template-columns:84px minmax(0,1fr);
  gap:8px;
  padding-inline-end:42px;
}
.arsi-card-popup .arsi-card-image{
  width:84px;
  height:84px;
  min-width:84px;
  border-radius:14px;
}
.arsi-card-popup .arsi-card-content{gap:6px}
.arsi-card-popup .arsi-favorite-btn{
  position:absolute;
  z-index:5;
  inset-inline-end:8px;
  top:8px;
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  flex-basis:36px;
}
.arsi-card-popup .arsi-card-title{font-size:14.5px}
.arsi-card-popup .arsi-price-chip{height:21px;font-size:10px;padding-inline:6px}
.arsi-card-popup .arsi-meta-row{font-size:10px;gap:4px 6px}
.arsi-card-popup .arsi-meta-item>span{max-width:120px}
.arsi-card-popup.arsi-card-enter{opacity:1;transform:none;animation:none}

@media(max-width:360px){
  .arsi-item-card.arsi-card-popup{min-height:96px;padding:7px}
  .arsi-card-popup .arsi-card-link{grid-template-columns:72px minmax(0,1fr);gap:7px;padding-inline-end:38px}
  .arsi-card-popup .arsi-card-image{width:72px;height:72px;min-width:72px;border-radius:12px}
  .arsi-card-popup .arsi-favorite-btn{inset-inline-end:7px;top:7px;width:34px;height:34px;min-width:34px;min-height:34px;flex-basis:34px}
  .arsi-card-popup .arsi-card-title{font-size:13.5px}
  .arsi-card-popup .arsi-meta-item>span{max-width:84px}
}

.arsi-item-card.arsi-card-no-image .arsi-card-link{grid-template-columns:minmax(0,1fr)}
.arsi-item-card.arsi-card-no-image .arsi-card-content{padding-inline-start:4px}
.arsi-item-card.arsi-card-no-price .arsi-card-content{gap:7px}
.arsi-card-badge-only .arsi-featured-badge{position:static;display:inline-flex}
.arsi-meta-row:empty,.arsi-price-row:empty,.arsi-title-row:empty,.arsi-card-stats:empty{display:none}

.arsi-card-enter{opacity:0;animation:arsiCardEnter .16s ease-out forwards}
@keyframes arsiCardEnter{to{opacity:1}}

/* Context containers control only placement; they never restyle the card. */
.arsi-favorites-list .arsi-item-card,
.arsi-user-sheet-body .arsi-item-card,
.arsi-related-grid .arsi-item-card,
.arsi-search-v2-results .arsi-item-card{margin:0}

@media(min-width:768px){
  .arsi-item-card{min-height:122px}
  .arsi-card-link{grid-template-columns:100px minmax(0,1fr);gap:11px}
  .arsi-card-image{width:100px;height:100px;min-width:100px}
  .arsi-card-title{font-size:17px}
  .arsi-meta-row{font-size:11.5px}
}

@media(max-width:430px){
  .arsi-item-card{min-height:108px;padding:8px;gap:6px;border-radius:18px}
  .arsi-card-link{grid-template-columns:86px minmax(0,1fr);gap:8px}
  .arsi-card-image{width:86px;height:86px;min-width:86px;border-radius:15px}
  .arsi-card-content{gap:6px}
  .arsi-card-title{font-size:15px;line-height:1.32}
  .arsi-price-chip{height:22px;padding-inline:6px;font-size:10.5px}
  .arsi-meta-row{gap:4px 6px;font-size:10px}
  .arsi-meta-item>span{max-width:108px}
  .arsi-card-stats{width:100%;justify-content:flex-start}
}

@media(max-width:360px){
  .arsi-item-card{min-height:104px;padding:7px}
  .arsi-card-link{grid-template-columns:78px minmax(0,1fr);gap:7px}
  .arsi-card-image{width:78px;height:78px;min-width:78px;border-radius:14px}
  .arsi-card-title{font-size:14px}
  .arsi-price-chip{font-size:9.5px}
  .arsi-price-chip i{display:none}
  .arsi-meta-item>span{max-width:92px}
}

@media(prefers-reduced-motion:reduce){
  .arsi-card-enter{opacity:1;transform:none;animation:none}
  .arsi-item-card,.arsi-favorite-btn{transition:none}
}

/* Production stability: popup cards must never expand or clip their host overlay. */
.arsi-card-popup,.arsi-card-popup .arsi-card-link,.arsi-card-popup .arsi-card-content{min-width:0;max-width:100%}
.arsi-card-popup .arsi-price-row{max-width:100%;overflow:hidden}
.arsi-card-popup .arsi-meta-row{max-width:100%}
.arsi-card-popup .arsi-card-title{max-width:100%}
@media(max-width:340px){
  .arsi-item-card.arsi-card-popup{padding:6px}
  .arsi-card-popup .arsi-card-link{grid-template-columns:68px minmax(0,1fr);gap:6px;padding-inline-end:36px}
  .arsi-card-popup .arsi-card-image{width:68px;height:68px;min-width:68px}
  .arsi-card-popup .arsi-card-title{font-size:13px}
  .arsi-card-popup .arsi-meta-item>span{max-width:76px}
}