/* ASANA Product Grid — native theme-driven presentation */
.asana-native-grid{
  --asana-native-grid-heading:var(--asana-color-heading,#2b123d);
  --asana-native-grid-body:var(--asana-color-body,#2b2430);
  --asana-native-grid-primary:var(--asana-color-primary,#2b123d);
  --asana-native-grid-primary-hover:var(--asana-color-primary-hover,#4b2858);
  --asana-native-grid-secondary:var(--asana-color-secondary,#8b667f);
  --asana-native-grid-surface:var(--asana-color-surface,#fff);
  --asana-native-grid-soft:var(--asana-color-surface-soft,#faf7fb);
  --asana-native-grid-border:var(--asana-color-border,#e8ddea);
  --asana-native-grid-muted:var(--asana-color-muted,#8d838d);
  --asana-native-grid-on-primary:var(--asana-color-on-primary,#fff);
  --asana-native-grid-accent:var(--asana-color-rating,var(--asana-color-secondary,#b48b55));
  display:grid;
  grid-template-columns:repeat(var(--asana-cols-desktop,3),minmax(0,1fr));
  gap:52px 34px;
  width:100%;
}
.asana-native-grid .asana-native-grid-card{min-width:0;margin:0;padding:0;background:transparent}
.asana-native-grid .asana-native-grid-image{
  position:relative;
  display:block;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--asana-radius-card,5px);
  background:var(--asana-native-grid-soft);
}
.asana-native-grid .asana-native-grid-image img{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  object-fit:cover;
  transition:transform .34s ease;
}
.asana-native-grid--zoom .asana-native-grid-card:hover .asana-native-grid-image img{transform:scale(1.028)}
.asana-native-grid .asana-native-grid-save{
  position:absolute;
  left:12px;
  top:12px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:74px;
  height:28px;
  padding:0 10px;
  border:1px solid var(--asana-native-grid-border);
  border-radius:var(--asana-radius-control,4px);
  background:color-mix(in srgb,var(--asana-native-grid-surface) 96%,transparent);
  color:var(--asana-native-grid-secondary);
  font-family:var(--asana-font-ui,system-ui,sans-serif);
  font-size:10px;
  line-height:1;
  letter-spacing:.08em;
  font-weight:600;
  white-space:nowrap;
}
.asana-native-grid .asana-native-grid-meta{
  display:grid;
  grid-template-rows:46px 28px 42px;
  row-gap:8px;
  padding:15px 2px 0;
}
.asana-native-grid .asana-native-grid-title{
  display:-webkit-box;
  height:46px;
  margin:0 auto;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  color:var(--asana-native-grid-heading);
  font-family:var(--asana-font-display,Georgia,serif);
  font-size:20px;
  font-weight:600;
  line-height:1.08;
  text-align:center;
}
.asana-native-grid .asana-native-grid-title a{color:inherit;text-decoration:none}
.asana-native-grid .asana-native-grid-price{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:28px;
  margin:0;
  color:var(--asana-native-grid-heading);
  font-family:var(--asana-font-ui,system-ui,sans-serif);
  font-size:16px;
  font-weight:600;
}
.asana-native-grid .asana-native-grid-price del{color:var(--asana-native-grid-muted);font-size:13px;font-weight:400;opacity:1}
.asana-native-grid .asana-native-grid-price ins{color:var(--asana-native-grid-secondary);text-decoration:none}
.asana-native-grid .asana-native-grid-action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  align-self:end;
  width:100%;
  height:42px;
  padding:0 14px;
  border:1px solid var(--asana-native-grid-primary);
  border-radius:var(--asana-radius-control,4px);
  background:var(--asana-native-grid-primary);
  color:var(--asana-native-grid-on-primary);
  box-shadow:var(--asana-shadow-sm,0 7px 16px rgba(43,18,61,.12));
  font-family:var(--asana-font-ui,system-ui,sans-serif);
  font-size:var(--asana-size-button,14px);
  font-weight:600;
  line-height:1;
  letter-spacing:.08em;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease;
}
.asana-native-grid .asana-native-grid-action:hover{
  transform:translateY(-1px);
  background:var(--asana-native-grid-primary-hover);
  border-color:var(--asana-native-grid-primary-hover);
  color:var(--asana-native-grid-on-primary);
  box-shadow:var(--asana-shadow-md,0 10px 22px rgba(43,18,61,.18));
}
.asana-native-grid .asana-native-grid-action--options{
  background:var(--asana-native-grid-surface);
  color:var(--asana-native-grid-primary);
  border-color:var(--asana-native-grid-border);
  box-shadow:none;
}
.asana-native-grid .asana-native-grid-action--options:hover{
  color:var(--asana-native-grid-primary);
  background:var(--asana-native-grid-soft);
  border-color:var(--asana-native-grid-secondary);
  box-shadow:none;
}
.asana-native-grid .asana-native-grid-star{
  width:16px;
  height:16px;
  flex:0 0 16px;
  fill:var(--asana-native-grid-accent);
}
.asana-native-grid-empty,.asana-native-grid-notice{
  padding:16px;
  border:1px solid var(--asana-color-border,#e8ddea);
  border-radius:var(--asana-radius-control,4px);
  background:var(--asana-color-surface-soft,#faf7fb);
  color:var(--asana-color-body,#2b2430);
  font-family:var(--asana-font-ui,system-ui,sans-serif);
}

@media(max-width:980px){
  .asana-native-grid{
    grid-template-columns:repeat(var(--asana-cols-tablet,3),minmax(0,1fr));
    gap:38px 18px;
  }
}

@media(max-width:767px){
  .asana-native-grid{
    grid-template-columns:repeat(var(--asana-cols-mobile,2),minmax(0,1fr));
    gap:30px 10px;
  }
  .asana-native-grid .asana-native-grid-image{border-radius:var(--asana-radius-card,4px)}
  .asana-native-grid .asana-native-grid-save{left:8px;top:8px;min-width:58px;height:22px;padding:0 7px;font-size:8px}
  .asana-native-grid .asana-native-grid-meta{grid-template-rows:34px 22px 34px;row-gap:6px;padding-top:9px}
  .asana-native-grid .asana-native-grid-title{height:34px;font-size:15px;line-height:1.08}
  .asana-native-grid .asana-native-grid-price{height:22px;gap:5px;font-size:13px}
  .asana-native-grid .asana-native-grid-price del{font-size:10px}
  .asana-native-grid .asana-native-grid-action{height:34px;padding:0 8px;gap:6px;font-size:11px;letter-spacing:.06em}
  .asana-native-grid .asana-native-grid-star{width:12px;height:12px;flex-basis:12px}
}