.otc-page{
  color:var(--dg-text);
}

.otc-page .otc-hero,
.otc-page .otc-header,
.otc-page .page-head,
.otc-page .category-hero{
  border-radius:var(--dg-radius-xl);
  overflow:hidden;
}
.otc-page h1{
  letter-spacing:-.3px;
}

.otc-page .otc-toolbar,
.otc-page .catalog-toolbar,
.otc-page .products-toolbar,
.otc-page .filter-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:48px;
  padding:8px 10px;
  border:1px solid var(--dg-line);
  border-radius:var(--dg-radius-md);
  background:#fff;
}
.otc-page .otc-search input,
.otc-page .search-box input,
.otc-page input[type="search"]{
  min-height:40px;
  border:1px solid var(--dg-line)!important;
  border-radius:12px!important;
  background:var(--dg-soft)!important;
  padding-inline:12px!important;
  font-size:11px!important;
}
.otc-page select{
  min-height:38px;
  border:1px solid var(--dg-line);
  border-radius:11px!important;
  background:#fff;
  font-size:10.5px;
}

.otc-page .otc-grid,
.otc-page .otc-products,
.otc-page .products-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.otc-page .otc-card,
.otc-page article.otc-card,
.otc-page .drug-card{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:11px;
  border:1px solid var(--dg-line);
  border-radius:var(--dg-radius-lg);
  background:#fff;
  box-shadow:var(--dg-shadow-sm);
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
@media(hover:hover){
  .otc-page .otc-card:hover,
  .otc-page article.otc-card:hover,
  .otc-page .drug-card:hover{
    transform:translateY(-3px);
    border-color:var(--dg-line-strong);
    box-shadow:var(--dg-shadow-hover);
  }
}

.otc-page .otc-card h3,
.otc-page .drug-card h3,
.otc-page .otc-title,
.otc-page .drug-title{
  min-height:48px;
  max-height:48px;
  margin:7px 0 5px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:13px;
  line-height:1.8;
  font-weight:850;
  color:var(--dg-text);
}
.otc-page .otc-card .generic-name,
.otc-page .drug-card .generic-name,
.otc-page .latin-name{
  min-height:31px;
  max-height:31px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--dg-muted);
  font-size:9.5px;
  line-height:1.65;
}
.otc-page .stock-badge,
.otc-page .availability-badge,
.otc-page .inventory-badge{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  max-width:58%;
  min-height:22px;
  padding:4px 7px;
  border-radius:999px;
  font-size:8.5px;
  font-weight:850;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.otc-page .manufacturer,
.otc-page .brand-name{
  max-width:42%;
  color:var(--dg-muted);
  font-size:9px;
  font-weight:750;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.otc-page .filters,
.otc-page .filter-box,
.otc-page .sidebar-filter{
  border:1px solid var(--dg-line)!important;
  border-radius:var(--dg-radius-lg)!important;
  background:#fff!important;
  box-shadow:var(--dg-shadow-sm);
}

.otc-page .pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:24px;
}
.otc-page .pagination a,
.otc-page .pagination button,
.otc-page .pagination span{
  min-width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--dg-line);
  border-radius:10px;
  background:#fff;
  color:var(--dg-text);
  font-size:10.5px;
  font-weight:800;
}
.otc-page .pagination .active,
.otc-page .pagination [aria-current="page"]{
  background:var(--dg-primary);
  color:#fff;
  border-color:var(--dg-primary);
}

@media(max-width:900px){
  .otc-page .otc-grid,
  .otc-page .otc-products,
  .otc-page .products-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
@media(max-width:640px){
  .otc-page .otc-toolbar,
  .otc-page .catalog-toolbar,
  .otc-page .products-toolbar,
  .otc-page .filter-toolbar{
    min-height:44px;
    padding:7px 8px;
    border-radius:13px;
  }
  .otc-page .otc-grid,
  .otc-page .otc-products,
  .otc-page .products-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .otc-page .otc-card,
  .otc-page article.otc-card,
  .otc-page .drug-card{
    padding:8px;
    border-radius:17px;
  }
  .otc-page .otc-card h3,
  .otc-page .drug-card h3,
  .otc-page .otc-title,
  .otc-page .drug-title{
    min-height:42px;
    max-height:42px;
    font-size:11px;
    line-height:1.8;
  }
  .otc-page .pagination a,
  .otc-page .pagination button,
  .otc-page .pagination span{
    min-width:32px;
    height:32px;
    font-size:9.5px;
  }
}